/* =========================================================================
   RE Analytics — prototyp UI
   Design tokeny podle validované palety (dataviz reference instance).
   ========================================================================= */

:root {
  --surface-1:      #fcfcfb;
  --surface-2:      #f9f9f7;
  --surface-3:      #f2f2ee;
  --plane:          #f4f4f1;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --grid:           #e1e0d9;
  --axis:           #c3c2b7;
  --border:         rgba(11, 11, 11, 0.10);
  --border-strong:  rgba(11, 11, 11, 0.18);

  --series-1: #2a78d6;  /* blue    */
  --series-2: #eb6834;  /* orange  */
  --series-3: #1baf7a;  /* aqua    */
  --series-4: #eda100;  /* yellow  */
  --series-5: #e87ba4;  /* magenta */
  --series-6: #008300;  /* green   */
  --series-7: #4a3aa7;  /* violet  */
  --series-8: #e34948;  /* red     */

  --seq-100: #cde2fb; --seq-200: #9ec5f4; --seq-300: #6da7ec; --seq-400: #3987e5;
  --seq-450: #2a78d6; --seq-500: #256abf; --seq-600: #184f95; --seq-700: #0d366b;

  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --delta-up: #006300;

  --spec:      #7c3aed;
  --spec-soft: rgba(124, 58, 237, 0.10);
  --spec-line: rgba(124, 58, 237, 0.35);

  --sidebar-bg:   #17171a;
  --sidebar-text: #b9b8b2;
  --sidebar-hot:  #ffffff;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --shadow-1: 0 1px 2px rgba(11,11,11,.05), 0 1px 1px rgba(11,11,11,.04);
  --shadow-2: 0 8px 28px rgba(11,11,11,.13), 0 2px 6px rgba(11,11,11,.07);
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --surface-1:      #1a1a19;
  --surface-2:      #202020;
  --surface-3:      #262625;
  --plane:          #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --grid:           #2c2c2a;
  --axis:           #383835;
  --border:         rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);

  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;

  --seq-100: #184f95; --seq-200: #256abf; --seq-300: #2a78d6; --seq-400: #3987e5;
  --seq-450: #5598e7; --seq-500: #6da7ec; --seq-600: #9ec5f4; --seq-700: #cde2fb;

  --delta-up: #0ca30c;
  --sidebar-bg: #0d0d0d;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 8px 28px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* ikony mají vždy pevný rozměr — v flexu by se jinak roztáhly */
svg.ico { width: 15px; height: 15px; flex: none; }

/* [hidden] musí přebít display z tříd (grid/flex) */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--plane);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ============================ Layout ============================ */

.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.brand { padding: 18px 18px 14px; display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, #3987e5, #1baf7a);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px;
}
.brand-name { color: #fff; font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.brand-sub { color: #6e6d68; font-size: 11px; margin-top: -2px; }

.nav { padding: 6px 10px; flex: 1; }
.nav-group { margin-bottom: 14px; }
.nav-group-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: #6e6d68; padding: 6px 8px 4px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--r-md);
  color: var(--sidebar-text); cursor: pointer; font-size: 13px;
  border: 0; background: none; width: 100%; text-align: left; font-family: inherit;
  /* Prototyp měl v menu <button>, my máme <a>, aby se odkaz dal otevřít
     v nové záložce a fungoval bez JavaScriptu. Podtržení je jediné, co
     tím proti návrhu přibylo — pryč s ním. */
  text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: var(--sidebar-hot); }
.nav-item[aria-current="page"] { background: rgba(255,255,255,.10); color: var(--sidebar-hot); font-weight: 500; }
.nav-item .ico { width: 15px; height: 15px; flex: none; opacity: .85; }
.nav-badge {
  margin-left: auto; font-size: 10px; padding: 1px 5px; border-radius: 20px;
  background: rgba(255,255,255,.12); color: #d8d7d1; font-variant-numeric: tabular-nums;
}
.nav-badge.live { background: rgba(12,163,12,.18); color: #6ee06e; }

/* rozbalovací sekce navigace */
.nav-sec {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: 0; background: none; cursor: pointer;
  color: #8a8983; font-family: inherit; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; text-align: left; border-radius: var(--r-md);
}
.nav-sec:hover { background: rgba(255,255,255,.05); color: var(--sidebar-text); }
.nav-sec.open { color: var(--sidebar-text); }
.nav-sec .nav-count {
  margin-left: auto; font-size: 10px; letter-spacing: 0; font-weight: 500;
  color: #5f5e59; font-variant-numeric: tabular-nums;
}
.nav-sec .nav-caret { font-size: 9px; transition: transform .15s; opacity: .6; }
.nav-sec.open .nav-caret { transform: rotate(180deg); }
.nav-list { display: block; }
.nav-list.collapsed { display: none; }
.nav-item.sub { padding-left: 33px; font-size: 12.5px; }
.nav-item.sub[aria-current="page"] { background: rgba(255,255,255,.11); }

.sidebar-foot { padding: 12px 14px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: #6e6d68; }
.sidebar-foot b { color: #b9b8b2; font-weight: 500; }

.main { min-width: 0; display: flex; flex-direction: column; }

/* ============================ Topbar ============================ */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-row { display: flex; align-items: center; gap: 10px; padding: 10px 22px; }
.topbar-row + .topbar-row { border-top: 1px solid var(--border); padding-top: 8px; padding-bottom: 8px; }

.page-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-right: 4px; }
.page-sub { font-size: 12px; color: var(--text-muted); }
.spacer { flex: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-primary); font-size: 12.5px; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn.primary { background: var(--series-1); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.07); }
/* Nevratná akce. Jiná barva než primární tlačítko schválně: „Smazat data"
   nesmí vypadat jako „Uložit". */
.btn.danger { background: var(--critical); border-color: transparent; color: #fff; }
.btn.danger:hover { filter: brightness(1.07); }
.btn.danger:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text-primary); }
.btn.sm { padding: 4px 8px; font-size: 12px; }
.btn .ico { width: 14px; height: 14px; }
.btn[aria-pressed="true"] { background: var(--spec-soft); border-color: var(--spec-line); color: var(--spec); }
:root[data-theme="dark"] .btn[aria-pressed="true"] { color: #b794f6; }

.filterbar { display: flex; align-items: center; gap: 8px; padding: 9px 22px; flex-wrap: wrap; }
.filter-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.select {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-1);
  font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.select:hover { border-color: var(--border-strong); }
.select .caret { opacity: .5; margin-left: 2px; }
.select .swatch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--series-1); }

/*
   Vlastní rozbalovací seznam, jak ho má prototyp.

   Dřív tu byl nativní <select> ostylovaný tak, aby vypadal podobně. Nešlo
   to dotáhnout: rozbalený seznam nekreslí stránka, ale prohlížeč, takže
   se v něm nedaly ukázat odškrtnutí, počty návštěv u webu ani položka
   „Vlastní rozsah". Vypadal navíc v každém prohlížeči jinak.

   Nosníkem je <details>, ne <div> s JavaScriptem: otevírá a zavírá se
   i bez skriptu a ovládá se z klávesnice, aniž bychom to museli psát.
   Skript jen dovírá po kliknutí vedle.
*/
.picker { position: relative; display: inline-block; }
.picker > summary { list-style: none; }
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary::marker { content: ''; }
.picker > summary:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.picker[open] > summary { border-color: var(--border-strong); }
.picker[open] > summary .caret { transform: rotate(180deg); }
.select .caret { transition: transform .15s; }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 250px; padding: 6px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  /* Strop výšky. U skupiny čtyřiceti obchodů seznam bez něj vyjede pod
     okraj obrazovky a na spodní položky se nedá dostat vůbec — stránka
     samotná se neposouvá, protože nabídka je vytržená z toku. */
  max-height: min(70vh, 440px);
  display: flex; flex-direction: column;
}
.dropdown[hidden] { display: none; }

/* Posouvá se JEN seznam, ne celá nabídka: hledání má zůstat vidět,
   i když je člověk v půlce seznamu. */
.dd-scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }

.dd-search { padding: 2px 2px 6px; }
.dd-search input {
  width: 100%; font: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--text-primary);
}
.dd-search input:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.dd-empty { padding: 10px 9px; font-size: 12.5px; color: var(--text-muted); }
.dd-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: var(--r-sm); cursor: pointer; font-size: 13px;
}
.dd-row:hover { background: var(--surface-3); }
.dd-row .check { width: 16px; font-weight: 700; color: var(--series-1); opacity: 0; }
.dd-row[aria-selected="true"] .check { opacity: 1; }
.dd-row .muted { margin-left: auto; color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dd-sep { height: 1px; background: var(--border); margin: 5px 2px; }
.dd-foot { padding: 7px 9px; font-size: 12px; color: var(--text-muted); }

/* Položky seznamu jsou odkazy: stav patří do URL, aby šel report poslat
   tak, jak ho člověk vidí. Podtržení a barva odkazu tomu ale nepatří. */
a.dd-row { text-decoration: none; color: var(--text-primary); }

/* Vlastní rozsah dat. Sbalený, dokud na něj člověk neklikne — dvě pole
   s daty rozevřená napořád by z nabídky udělala formulář. */
.dd-range { padding: 4px 9px 8px; }
.dd-range > summary {
  list-style: none; cursor: pointer; padding: 7px 0 7px 25px;
  font-size: 13px; color: var(--text-primary);
}
.dd-range > summary::-webkit-details-marker { display: none; }
.dd-range > summary::marker { content: ''; }
.dd-range-body { display: flex; align-items: flex-end; gap: 8px; padding-top: 4px; }
.dd-range-body label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.dd-range-body input[type="date"] {
  font: inherit; font-size: 12.5px; padding: 5px 7px; width: 130px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--text-primary);
}
.dd-range-body input[type="date"]:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.dd-range-note { padding: 6px 9px 0; font-size: 11.5px; color: var(--critical); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 9px; border-radius: 20px;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-secondary); white-space: nowrap;
}
.chip .x { cursor: pointer; opacity: .5; font-size: 13px; line-height: 1; }
.chip .x:hover { opacity: 1; }
/* Křížek je odkaz (odebrání pole má vlastní adresu), ale nemá vypadat
   jako odkaz — barvu i podtržení dědí z chipu. */
a.x { text-decoration: none; color: inherit; }
.chip.add { border-style: dashed; cursor: pointer; background: transparent; }
.chip.add:hover { background: var(--surface-3); color: var(--text-primary); }
.chip.dim { border-color: color-mix(in srgb, var(--series-1) 40%, transparent); background: color-mix(in srgb, var(--series-1) 8%, transparent); color: var(--series-1); }
.chip.met { border-color: color-mix(in srgb, var(--series-3) 45%, transparent); background: color-mix(in srgb, var(--series-3) 9%, transparent); color: #0f7d57; }
:root[data-theme="dark"] .chip.met { color: #39c493; }

/* ============================ Content ============================ */

.content { padding: 18px 22px 60px; }
.view[hidden] { display: none; }

.grid { display: grid; gap: 14px; min-width: 0; }
.grid > * { min-width: 0; }
/*
  `align-items: stretch` (výchozí), ne `start`.

  Prototyp měl `start`, takže karta se sparklinou byla vyšší než sousední
  bez ní a řádek dlaždic vypadal roztřepeně. U dlaždic, které se čtou
  jedním pohledem zleva doprava, je nestejná výška rušivá — oko hledá
  význam v rozdílu, který žádný nemá.

  `grid-auto-rows: 1fr` u čtyřsloupcové mřížky srovná i JEDNOTLIVÉ ŘÁDKY
  mezi sebou: osm dlaždic se láme na dva řádky a bez toho by druhý mohl
  být nižší než první.
*/
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-23 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.g-32 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1180px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3, .g-2, .g-23, .g-32 { grid-template-columns: minmax(0,1fr); }
}

.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  position: relative; min-width: 0;
}
/* tabulky se scrollují uvnitř karty, nikdy nerozšiřují stránku */
.tbl-scroll { overflow-x: auto; max-width: 100%; }
.card-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px 9px;
}
.card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.card-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.card-tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.card-body { padding: 4px 15px 15px; }
.card-body.flush { padding: 0 0 6px; }

.icon-btn {
  width: 24px; height: 24px; border-radius: var(--r-sm);
  border: 0; background: none; cursor: pointer; color: var(--text-muted);
  display: grid; place-items: center;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text-primary); }
.icon-btn[aria-pressed="true"] { background: var(--surface-3); color: var(--series-1); }

/* ---------- stat tiles ---------- */

.stat { padding: 13px 15px 12px; }
.stat-label { font-size: 11.5px; color: var(--text-secondary); font-weight: 500; }
.stat-value { font-size: 27px; font-weight: 600; letter-spacing: -.025em; margin-top: 3px; line-height: 1.1; }
.stat-value.hero { font-size: 46px; letter-spacing: -.03em; }
.stat-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; }
.delta.up { color: var(--delta-up); }
.delta.down { color: var(--critical); }
.delta.flat { color: var(--text-muted); }
.stat-vs { font-size: 11.5px; color: var(--text-muted); }
/*
  Sparklina se drží uvnitř dlaždice.

  Bez `overflow: hidden` a bez výslovné velikosti SVG přetékala ven přes
  zaoblený roh karty: značka `<svg>` bez atributů width/height si velikost
  určí sama a s `preserveAspectRatio: none` se roztáhne, jak jí padne.
  Prototyp to má taky, ale to z toho nedělá záměr.

  `margin-top: auto` přisune proužek ke SPODNÍ hraně. Dlaždice jsou teď
  všechny stejně vysoké, takže bez toho by u nižšího obsahu visel
  uprostřed a řádek by přestal držet linku.
*/
.stat-spark { margin-top: auto; padding-top: 9px; height: 40px; }
.stat-spark svg { display: block; width: 100%; height: 34px; }

/* Dlaždice je sloupec, aby `margin-top: auto` u sparkliny mělo kam. */
.card.stat { display: flex; flex-direction: column; }

/* ---------- tables ---------- */

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-weight: 500; font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .055em;
  padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface-1); z-index: 2;
}
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.sortable { cursor: pointer; }
.tbl th.sortable:hover { color: var(--text-primary); }
.tbl th .arrow { opacity: .45; font-size: 9px; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .strong { font-weight: 500; }
.tbl .sub { font-size: 11.5px; color: var(--text-muted); }
/* Adresa nebo dotaz bez mezer (…?id_cart=…&key=…) by jinak roztáhl
   tabulku a sloupec s čísly vystrčil z karty. */
.tbl td.src { overflow-wrap: anywhere; }
.tbl .drill { cursor: pointer; }
.tbl .drill:hover .strong { color: var(--series-1); text-decoration: underline; text-underline-offset: 2px; }
.tbl tr.child td { background: var(--surface-2); }
.tbl tr.child td:first-child { padding-left: 30px; }

.minibar { height: 5px; border-radius: 3px; background: var(--series-1); min-width: 2px; }
.minibar-track { background: var(--surface-3); border-radius: 3px; height: 5px; width: 100%; overflow: hidden; }
.cellbar { display: flex; align-items: center; gap: 9px; }
.cellbar .minibar-track { flex: 1; max-width: 110px; }

.swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.swatch.round { border-radius: 50%; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 2px 15px 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.legend-key { width: 14px; height: 2px; border-radius: 2px; }
.legend-key.rect { height: 9px; width: 9px; border-radius: 2px; }

/* ---------- charts ---------- */

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .axisline { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.chart .tick.mid { fill: var(--text-secondary); }
.chart .lbl { fill: var(--text-secondary); font-size: 11px; }
.chart .val { fill: var(--text-primary); font-size: 11px; font-weight: 600; }
.chart .crosshair { stroke: var(--axis); stroke-width: 1; pointer-events: none; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .bar { transition: opacity .12s; }
.chart .bar:hover { opacity: .82; }

.tooltip {
  position: absolute; z-index: 50; pointer-events: none;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: 8px 10px; font-size: 12px; min-width: 150px;
  transform: translate(-50%, -108%); opacity: 0; transition: opacity .1s;
}
.tooltip.on { opacity: 1; }
.tt-head { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
.tt-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.tt-key { width: 12px; height: 2px; border-radius: 2px; flex: none; }
.tt-name { color: var(--text-secondary); font-size: 11.5px; }
.tt-val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-note { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }

/* ---------- funnel ---------- */

.funnel { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; }
.fn-step { display: grid; grid-template-columns: 178px 1fr 96px; gap: 12px; align-items: center; }
.fn-name { font-size: 12.5px; }
.fn-name .sub { font-size: 11px; color: var(--text-muted); }
.fn-track { background: var(--surface-3); border-radius: var(--r-sm); height: 26px; position: relative; overflow: hidden; }
.fn-fill { height: 100%; background: var(--series-1); border-radius: 0 var(--r-sm) var(--r-sm) 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fn-out { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.fn-out b { color: var(--critical); font-weight: 600; }
.fn-drop { height: 12px; margin-left: 190px; border-left: 1px dashed var(--axis); }
.fn-out .sub { display: block; font-size: 11px; color: var(--critical); }

/* ---------- číslovaná pravidla ---------- */

/* Pravidla, podle kterých se určuje zdroj návštěvy. Číslovaný seznam,
   protože na POŘADÍ tu záleží — vyhodnocuje se shora dolů a první shoda
   vyhrává. Odrážky by ten vztah zatajily. */
.rules { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.rules li { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
/* Věta před seznamem pravidel a za ním (pojistky, společné parametry).
   Stejné písmo i kód jako v seznamu, aby se četla jako jeho součást. */
.rules-note { margin: 0 0 8px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.rules + .rules-note { margin: 8px 0 0; }
.rules code, .rules-note code {
    font-family: var(--mono);
    font-size: 11.5px;
    background: var(--surface-3);
    border-radius: var(--r-sm);
    padding: 1px 5px;
}

/* ---------- heatmap ---------- */

.heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.heat-cell { aspect-ratio: 1 / 1; border-radius: 2px; background: var(--seq-100); cursor: pointer; }
.heat-cell:hover { outline: 2px solid var(--text-primary); outline-offset: 0; }
.heat-lbl { font-size: 10.5px; color: var(--text-muted); }
.heat-scale { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.heat-scale .sw { width: 15px; height: 9px; border-radius: 2px; }

/* ---------- misc ---------- */

.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 12.5px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 500; }
.pill.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: #067806; }
.pill.warn { background: color-mix(in srgb, var(--warning) 20%, transparent); color: #8a6100; }
.pill.crit { background: color-mix(in srgb, var(--critical) 14%, transparent); color: #a72c2c; }
.pill.neutral { background: var(--surface-3); color: var(--text-secondary); }
/* Stav, který se nehodnotí jako dobrý ani špatný, ale má být vidět
   (čekající mazání, založený záznam v logu). Vlastní barva ze sady
   `spec` ho odliší od neutrálních štítků na první pohled. */
.pill.spec { background: var(--spec-soft); color: var(--spec); border: 1px solid var(--spec-line); }
:root[data-theme="dark"] .pill.spec { color: #b794f6; }
:root[data-theme="dark"] .pill.good { color: #4fd44f; }
:root[data-theme="dark"] .pill.warn { color: #ffc94d; }
:root[data-theme="dark"] .pill.crit { color: #ff7b7b; }

.src { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.code {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 12px; overflow-x: auto; white-space: pre;
  color: var(--text-secondary);
}
.code .k { color: var(--series-7); font-weight: 600; }
.code .s { color: var(--series-6); }
.code .c { color: var(--text-muted); font-style: italic; }
:root[data-theme="dark"] .code .k { color: #b7aef2; }
:root[data-theme="dark"] .code .s { color: #6ee06e; }

.empty { padding: 26px 14px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

/* ============================ Spec mode ============================ */

.specbar {
  display: none; align-items: center; gap: 10px;
  padding: 7px 22px; font-size: 12px;
  background: var(--spec-soft); border-bottom: 1px solid var(--spec-line); color: var(--spec);
}
:root[data-spec="on"] .specbar { display: flex; }
:root[data-theme="dark"] .specbar { color: #c4b0f7; }
.specbar b { font-weight: 600; }

.anno {
  display: none;
  position: absolute; z-index: 20; top: 8px; right: 8px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 20px; background: var(--spec); color: #fff;
  font-size: 11px; font-weight: 700; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
:root[data-spec="on"] .anno { display: inline-flex; }
:root[data-spec="on"] .card:has(> .anno) { outline: 1px dashed var(--spec-line); outline-offset: 2px; }
.anno:hover { filter: brightness(1.15); }

.specpanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 424px; z-index: 80;
  background: var(--surface-1); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-2); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease;
}
.specpanel.on { transform: none; }
.sp-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; }
.sp-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--spec); font-weight: 700; }
:root[data-theme="dark"] .sp-eyebrow { color: #b794f6; }
.sp-title { font-size: 15px; font-weight: 600; margin-top: 2px; }
.sp-body { padding: 14px 16px 30px; overflow-y: auto; font-size: 13px; }
.sp-sec { margin-bottom: 18px; }
.sp-sec h4 {
  margin: 0 0 7px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); font-weight: 700;
}
.sp-sec p { margin: 0 0 8px; color: var(--text-secondary); line-height: 1.55; }
.sp-list { margin: 0; padding-left: 17px; color: var(--text-secondary); line-height: 1.6; }
.sp-list li { margin-bottom: 3px; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-tag {
  display: inline-block; flex: none; font-family: var(--mono); font-size: 11px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 1px 6px; margin: 0 3px 3px 0; color: var(--text-secondary);
}
.sp-tag.ev { border-color: color-mix(in srgb, var(--series-1) 45%, transparent); color: var(--series-1); }
.sp-tag.tbl { border-color: color-mix(in srgb, var(--series-3) 45%, transparent); color: #0f7d57; }
:root[data-theme="dark"] .sp-tag.tbl { color: #39c493; }
.sp-phase { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--surface-3); color: var(--text-secondary); }
.sp-phase.f1 { background: color-mix(in srgb, var(--good) 15%, transparent); color: #067806; }
.sp-phase.f2 { background: color-mix(in srgb, var(--series-1) 15%, transparent); color: var(--series-1); }
.sp-phase.f3 { background: color-mix(in srgb, var(--warning) 22%, transparent); color: #8a6100; }
.sp-phase.f4 { background: color-mix(in srgb, var(--series-7) 15%, transparent); color: var(--series-7); }
:root[data-theme="dark"] .sp-phase.f1 { color: #4fd44f; }
:root[data-theme="dark"] .sp-phase.f3 { color: #ffc94d; }
:root[data-theme="dark"] .sp-phase.f4 { color: #b7aef2; }

.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(11,11,11,.22); opacity: 0; pointer-events: none; transition: opacity .18s; }
.scrim.on { opacity: 1; pointer-events: auto; }

/* ============================ Explorer ============================ */

.explorer { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .explorer { grid-template-columns: minmax(0,1fr); } }
/* Seznamy jsou dva (Dimenze, Metriky), takže se strop dělí — s původními
   460px by levý sloupec narostl na dvojnásobek a karta „Uložit pohled" by
   spadla pod okraj obrazovky. 260px ukáže zhruba deset řádků, což stačí na
   celou skupinu i s nadpisem. */
.field-list { max-height: 260px; overflow-y: auto; }
.field-group-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
  font-weight: 700; padding: 9px 13px 4px;
}
.field {
  display: flex; align-items: center; gap: 8px; padding: 5px 13px;
  font-size: 12.5px; color: var(--text-secondary);
  /* V prototypu `grab`, protože se počítalo s přetahováním. U nás se pole
     přidává KLIKNUTÍM, takže ruka místo dlaně — jinak kurzor slibuje něco,
     co se nestane. */
  cursor: pointer;
  text-decoration: none;
}
.field:hover { background: var(--surface-3); color: var(--text-primary); }
/* `.field .tag` tu bývalo pro štítek dim/met na konci řádku. Od rozdělení
   panelu na dvě karty říká totéž nadpis karty, štítek zmizel a pravidlo
   s ním — jinak by zbylo viset na třídě, kterou už nikdo nevypisuje. */
.field.on { color: var(--series-1); font-weight: 500; }

.builder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 15px; border-bottom: 1px solid var(--border); }
.builder-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 700; margin-right: 2px; }

/* ============================ Realtime / quality ============================ */

.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

.evstream { font-family: var(--mono); font-size: 11.5px; max-height: 268px; overflow-y: auto; }
.ev { display: flex; gap: 10px; padding: 4px 15px; border-bottom: 1px solid var(--grid); align-items: baseline; }
.ev:last-child { border-bottom: 0; }
.ev-t { color: var(--text-muted); flex: none; }
.ev-n { color: var(--series-1); font-weight: 600; flex: none; min-width: 118px; }
.ev-d { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-s { margin-left: auto; flex: none; font-size: 10px; padding: 0 5px; border-radius: 3px; background: var(--surface-3); color: var(--text-muted); }

.health { display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-bottom: 1px solid var(--grid); }
.health:last-child { border-bottom: 0; }
.health-name { font-size: 12.5px; }
.health-name .sub { font-size: 11px; color: var(--text-muted); }
.health-val { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 500; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 15px; }
.tab {
  padding: 8px 11px; font-size: 12.5px; border: 0; background: none; cursor: pointer;
  color: var(--text-secondary); font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"] { color: var(--series-1); border-bottom-color: var(--series-1); font-weight: 500; }

.note {
  display: flex; gap: 9px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-secondary);
  line-height: 1.5;
}
.note .ico { flex: none; margin-top: 1px; color: var(--text-muted); }
.note.spec { background: var(--spec-soft); border-color: var(--spec-line); color: var(--text-secondary); }

/* Hláška po uložení. Odlišená barvou, ne jen umístěním — potvrzení, které
   vypadá jako každá jiná poznámka na stránce, si nikdo nespojí se svou
   právě provedenou akcí. */
.note.flash { margin-bottom: 14px; }
.note.flash.ok { background: color-mix(in srgb, var(--good) 10%, transparent); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.note.flash.ok .ico { color: #067806; }
.note.flash.warn { background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.note.flash.warn .ico { color: #8a6100; }
:root[data-theme="dark"] .note.flash.ok .ico { color: #4fd44f; }
:root[data-theme="dark"] .note.flash.warn .ico { color: #ffc94d; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================ Dialog ============================ */

.modal-wrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal-wrap[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(11,11,11,.34); }
.modal {
  position: relative; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.modal-head { padding: 15px 18px 11px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; }
.modal-title { font-size: 15px; font-weight: 600; }
.modal-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.modal-body { padding: 15px 18px; }
.modal-foot { padding: 12px 18px 15px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }

/* Nativní <dialog> se stejným vzhledem. `.modal` výš má position: relative
   pro variantu s obalem; dialog musí zůstat fixed, jinak by se místo
   uprostřed obrazovky vykreslil na konci stránky. */
dialog.modal { position: fixed; inset: 0; margin: auto; height: fit-content; padding: 0; color: var(--text-primary); }
dialog.modal::backdrop { background: rgba(11,11,11,.34); }
/* Výslovně, jako u .specbar b: výchozí `bolder` se systémovým písmem na
   některých strojích tučně nevykreslí — a tady tučně stojí název webu,
   který má člověk opsat, a věta, že je operace nevratná. */
.modal-body b { font-weight: 600; }

.field-row { margin-bottom: 13px; }
.field-row > label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.input, .textarea, .selectbox {
  width: 100%; padding: 7px 10px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-1); color: var(--text-primary);
}
.input:hover, .selectbox:hover { border-color: var(--text-muted); }
.input:focus, .textarea:focus, .selectbox:focus { outline: 2px solid color-mix(in srgb, var(--series-1) 45%, transparent); outline-offset: 1px; border-color: var(--series-1); }
.textarea { min-height: 62px; resize: vertical; }

/* Pole ve formulářích dostávají vzhled i BEZ třídy.
   Nette vypisuje prvky samo a třída se na ně dá dolepit jen ručně
   u každého z nich — na což se dřív nebo později zapomene a jedno pole
   pak vypadá jako z jiné aplikace. */
.field-row > input[type="text"], .field-row > input[type="email"],
.field-row > input[type="password"], .field-row > input[type="search"],
.field-row > input[type="number"], .field-row > input[type="date"],
.field-row > textarea, .field-row > select {
  width: 100%; padding: 7px 10px; font-family: inherit; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-1); color: var(--text-primary);
}

/* Rozbalovací seznam ve formuláři vypadá jako přepínač webu v horní liště.
   Nativní <select>, ne vlastní widget: hodnota se musí odeslat i bez
   JavaScriptu a na mobilu je systémový výběr lepší než cokoli, co bych
   nakreslil. Sjednocuje se tedy jen VZHLED — vlastní šipka místo té,
   kterou si kreslí prohlížeč, každý jinak.

   Šipka je #898781, tedy hodnota `--text-muted`. Ta je v obou motivech
   stejná, takže se nemusí překreslovat pro tmavý — a do data URI se
   proměnná stejně dosadit nedá. */
.selectbox, .field-row > select {
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23898781' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.field-row > select:hover { border-color: var(--text-muted); }
.field-row > select:focus, .field-row > input:focus, .field-row > textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--series-1) 45%, transparent);
  outline-offset: 1px; border-color: var(--series-1);
}

/* Seznam se zaškrtávátky — např. přidělení webů uživateli.
   Rám a rolování jako u rozbalovacího seznamu, aby dvacet webů
   neroztáhlo formulář přes celou obrazovku. */
.checklist {
  max-height: 210px; overflow-y: auto;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-1); padding: 3px 0;
}
.checkrow {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer;
}
.checkrow:hover { background: var(--surface-3); color: var(--text-primary); }
.checkrow input[type="checkbox"] { accent-color: var(--series-1); width: 14px; height: 14px; flex: none; cursor: pointer; }
.checkrow:has(input:checked) { color: var(--text-primary); font-weight: 500; }
.field-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.toggle-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--grid); }
.toggle-row:first-of-type { border-top: 0; }
.toggle-row .t-name { font-size: 13px; }
.toggle-row .t-sub { font-size: 11.5px; color: var(--text-muted); }
.switch {
  margin-left: auto; width: 34px; height: 19px; border-radius: 20px; border: 0;
  background: var(--surface-3); position: relative; cursor: pointer; flex: none; transition: background .15s;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.switch[aria-checked="true"] { background: var(--series-1); }
.switch[aria-checked="true"]::after { transform: translateX(15px); }

/* ======================= Knihovna reportů ======================= */

.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.lib-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px 14px; cursor: pointer; position: relative; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 5px; min-height: 116px;
}
.lib-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.lib-card .lib-sec { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 700; }
.lib-card .lib-name { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.lib-card .lib-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.lib-card .lib-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; padding-top: 7px; }
/*
  Jediný přírůstek proti prototypu. Ten kartu vykresluje jako <div>
  s posluchačem kliknutí; tady je to skutečný odkaz, aby šel report
  otevřít v nové kartě, zkopírovat a projít klávesnicí.

  Tlačítko oblíbených ale nesmí být UVNITŘ odkazu — vnořený ovládací
  prvek je neplatné HTML a odečítačky ho hlásí zmateně. Je proto
  sourozencem a `display: contents` nechá obsah odkazu chovat se
  v mřížce karty přesně jako dřív.
*/
.lib-card > .lib-link { display: contents; color: inherit; text-decoration: none; }

.lib-star { position: absolute; top: 10px; right: 10px; border: 0; background: none; cursor: pointer; color: var(--axis); padding: 2px; }
.lib-star.on { color: var(--warning); }
.lib-star:hover { color: var(--warning); }

.raj-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  padding: 1px 6px; border-radius: 20px; font-weight: 600;
  background: color-mix(in srgb, var(--series-7) 13%, transparent); color: var(--series-7);
}
:root[data-theme="dark"] .raj-tag { color: #b7aef2; }

.searchbox { position: relative; flex: 1; max-width: 320px; }
.searchbox input {
  width: 100%; padding: 6px 10px 6px 30px; font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-primary);
}
.searchbox svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); opacity: .45; }

.saved-row { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--grid); }
.saved-row:last-child { border-bottom: 0; }
.saved-row:hover { background: var(--surface-2); }
.saved-main { min-width: 0; }
.saved-name { font-size: 13.5px; font-weight: 500; }
.saved-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.saved-cfg { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.saved-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; flex: none; }

/* ============================ Wiki ============================ */

/*
   Odkaz „?" u hodnoty — vede do wiki na heslo metriky, dimenze nebo
   na článek. Malý a tlumený schválně: u každé dlaždice a v každé hlavičce
   tabulky je jich na obrazovce desítky a nesmí přehlušit čísla.

   V hlavičce tabulky dědí `text-transform: uppercase` a rozestupy
   písmen; tady se obojí ruší, jinak by „?" v úzkém sloupci ujížděl.
*/
.help-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 4px; vertical-align: 1px;
  border-radius: 50%; border: 1px solid var(--border-strong);
  font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none;
  color: var(--text-muted); text-decoration: none; flex: none;
}
.help-link:hover, .help-link:focus-visible { color: var(--series-1); border-color: var(--series-1); }
.help-link:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
/* V hlavičce tabulky menší: sloupce jsou `nowrap` a každý pixel navíc
   rozšiřuje tabulku, která se v poloviční kartě už teď sotva vejde. */
.tbl th .help-link { width: 13px; height: 13px; margin-left: 3px; font-size: 9px; vertical-align: 0; }
/* Klikací plocha aspoň 24 × 24 px (WCAG 2.5.8) bez zvětšení kroužku:
   neviditelný přesah kolem něj. Rozměr tabulky ani řádku se nemění,
   absolutně umístěný prvek místo nezabírá. Přesah se počítá od vnitřku
   rámečku: 13 + 2 × 6 = 25 px, v hlavičce 11 + 2 × 7 = 25 px. */
.help-link:not(.text) { position: relative; }
.help-link:not(.text)::after { content: ''; position: absolute; inset: -6px; }
.tbl th .help-link:not(.text)::after { inset: -7px; }
/* Textová varianta — „Jak číst tuto obrazovku" v podtitulku. */
.help-link.text {
  width: auto; height: auto; margin-left: 0; border: 0; border-radius: 0;
  font-size: inherit; font-weight: 500; color: var(--series-1);
  text-decoration: underline; text-underline-offset: 2px;
}
/* Popisek dlaždice je flex jen tam, kde nese i „?" — jinak zůstává, jak byl. */
.stat-label:has(> .help-link) { display: flex; align-items: center; gap: 0; }

/* ---------- rozcestník ---------- */

.wiki-search { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.wiki-search .searchbox { max-width: 460px; }
.wiki-search-note { font-size: 12px; color: var(--text-muted); }

.wiki-tiles { margin-bottom: 18px; }
.wiki-tile {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 15px;
  color: inherit; text-decoration: none;
}
.wiki-tile:hover { border-color: var(--border-strong); }
.wiki-tile-count { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wiki-tile-name { font-size: 13.5px; font-weight: 600; }
.wiki-tile-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

.wiki-group { margin-top: 18px; }
.wiki-group-title, .wiki-section-title {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
}
.wiki-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.wiki-item {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  color: inherit; text-decoration: none;
}
.wiki-item:hover { border-color: var(--border-strong); }
.wiki-item-title { font-size: 13.5px; font-weight: 600; color: var(--series-1); }
.wiki-item-sum { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

.wiki-index { padding: 4px 0; }
.wiki-hit {
  display: flex; align-items: baseline; gap: 9px; padding: 7px 14px;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--grid);
}
.wiki-hit:last-child { border-bottom: 0; }
.wiki-hit:hover { background: var(--surface-2); }
.wiki-hit-label { font-size: 13px; font-weight: 500; color: var(--series-1); }
.wiki-hit-hint { margin-left: auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

/* ---------- referenční stránky ---------- */

.wiki-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wiki-toc .chip { text-decoration: none; }
.wiki-toc .chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.wiki-toc-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.wiki-section { margin-top: 22px; }
.wiki-section-title { font-size: 12px; }

/*
   Heslo reference. `scroll-margin-top` kvůli lepivé horní liště: bez něj
   by odkaz „?" skočil na heslo, jehož nadpis zůstane schovaný pod ní.
*/
.wiki-entry { padding: 13px 15px 12px; margin-bottom: 10px; scroll-margin-top: 76px; }
/* Heslo, na které vedl odkaz „?", musí být na první pohled vidět —
   stránka metrik má desítky stejně vypadajících karet. */
.wiki-entry:target {
  border-color: color-mix(in srgb, var(--series-1) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--series-1) 18%, transparent), var(--shadow-1);
  background: color-mix(in srgb, var(--series-1) 4%, var(--surface-1));
}
.wiki-entry-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.wiki-entry-title { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; }
.wiki-key {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-secondary);
  background: var(--surface-3); border-radius: var(--r-sm); padding: 1px 6px;
}
.wiki-anchor { color: var(--text-muted); text-decoration: none; font-size: 12px; opacity: .6; }
.wiki-anchor:hover { color: var(--series-1); opacity: 1; }
.wiki-open { margin-left: auto; text-decoration: none; }
.wiki-entry-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.wiki-desc { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-primary); max-width: 90ch; }
.wiki-note { color: var(--text-secondary); font-size: 12.5px; }
.wiki-muted { color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.wiki-kv { margin-top: 10px; grid-template-columns: 104px 1fr; line-height: 1.55; }
.wiki-kv dd { font-variant-numeric: normal; color: var(--text-secondary); }
.wiki-kv code, .wiki-enum code, .wiki-def code, .wiki-desc code, .wiki-tbl code {
  font-family: var(--mono); font-size: 11.5px; background: var(--surface-3);
  border-radius: var(--r-sm); padding: 0 4px;
}
.wiki-ref { color: var(--series-1); text-decoration: none; }
.wiki-ref:hover { text-decoration: underline; text-underline-offset: 2px; }

.wiki-tbl { margin-top: 10px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.wiki-tbl .tbl th { position: static; }
.wiki-tbl .tbl td { vertical-align: top; font-size: 12.5px; }
.wiki-enum { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 3px; align-items: baseline; }

/* Technický zápis: jen pro vybrané role, vždy sbalený — kdo SQL nečte,
   nemá o něj zakopávat. */
.wiki-tech { margin-top: 10px; }
.wiki-tech > summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
.wiki-tech > summary:hover { color: var(--text-primary); }
.wiki-tech .code { margin-top: 6px; white-space: pre-wrap; word-break: break-word; }
.wiki-tech-ds { margin-top: 8px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- článek ---------- */

.wiki-article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .wiki-article { grid-template-columns: minmax(0, 1fr); } }
.wiki-article-body { padding: 18px 24px 22px; }
.wiki-aside { display: grid; gap: 10px; }
.wiki-aside-card { padding: 12px 14px; font-size: 12.5px; }
.wiki-aside-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 7px; }
.wiki-aside-text { color: var(--text-secondary); margin-bottom: 4px; }
.wiki-aside-group { margin-bottom: 7px; line-height: 1.55; color: var(--text-secondary); }
.wiki-aside-label { display: block; font-size: 11px; color: var(--text-muted); }
.wiki-aside-link { display: block; padding: 3px 0; color: var(--series-1); text-decoration: none; }
.wiki-aside-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.wiki-stub { color: var(--text-muted); font-style: italic; }

/*
   Typografie článku.

   Administrace jinak nadpisy h1–h6 nepoužívá (titulek je v horní liště),
   takže tu nic nedědí a všechno se nastavuje od nuly. Šířka řádku je
   omezená na čitelnou délku; na širokém monitoru by se jinak text táhl
   přes dvě stě znaků.
*/
.prose { max-width: 76ch; font-size: 14px; line-height: 1.65; color: var(--text-primary); }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin: 28px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
  scroll-margin-top: 76px;
}
.prose h3 { margin: 20px 0 6px; font-size: 14.5px; font-weight: 600; line-height: 1.35; scroll-margin-top: 76px; }
.prose h2:target, .prose h3:target { color: var(--series-1); }
.prose p { margin: 0 0 11px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose li { margin-bottom: 4px; }
.prose li > ul, .prose li > ol { margin: 4px 0 0; }
.prose a:not(.help-link):not(.btn) {
  color: var(--series-1); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--series-1) 40%, transparent);
}
.prose a:not(.help-link):not(.btn):hover { text-decoration-color: currentColor; }
.prose b, .prose strong { font-weight: 600; }
.prose code {
  font-family: var(--mono); font-size: 12.5px; background: var(--surface-3);
  border-radius: var(--r-sm); padding: 1px 5px;
}
.prose pre { margin: 0 0 12px; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }
.prose th {
  text-align: left; font-weight: 600; font-size: 11.5px; color: var(--text-secondary);
  padding: 7px 10px; border-bottom: 1px solid var(--border-strong); background: var(--surface-2);
}
.prose td { padding: 7px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.prose blockquote {
  margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

/*
   Boxy v článku. Barvou i štítkem, ne jen jedním z nich:
     .wiki-box.warn — Pozor: past při čtení čísla, známá vada
     .wiki-box      — obyčejná poznámka
*/
.wiki-box {
  display: flex; gap: 9px; margin: 0 0 14px; padding: 10px 12px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13px; line-height: 1.55; color: var(--text-secondary);
}
.wiki-box > .ico { flex: none; margin-top: 2px; color: var(--text-muted); }
.wiki-box > :last-child { margin-bottom: 0; }
.wiki-box b, .wiki-box strong { color: var(--text-primary); }
.wiki-box.warn { background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.wiki-box.warn > .ico { color: #8a6100; }
:root[data-theme="dark"] .wiki-box.warn > .ico { color: #ffc94d; }

/* Definice metriky vložená do článku z katalogu. */
.wiki-def {
  margin: 0 0 14px; padding: 11px 13px; border: 1px solid var(--border);
  border-left: 3px solid var(--series-1); border-radius: var(--r-md); background: var(--surface-2);
  font-size: 13px;
}
.wiki-def-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.wiki-def-meta { font-size: 12px; color: var(--text-muted); }
.wiki-def p { margin: 6px 0 0; color: var(--text-secondary); }