/* ============================================================
   Navigator Hub — SPIS TREŚCI STRONY (NH.spis, 19.10.2026) — wygląd
   Jedno menu strony dla Panelu zarządzania recepcją i Panelu admina (plan docs/PLAN_panele_skrot_i_wspolny_styl.md, etap 4;
   decyzja Soni 19.10: dawne paski skrótów „były niewidoczne i nieintuicyjne — nie widać, że to spis treści i menu strony”).
   Dwie części: KARTA „Na tej stronie” (.nh-spis-card, wariant A) i PASEK (.nh-spis-bar, oba warianty).
   Wymaga ui/panel-shell.css (.nh-pcard, .nh-eyebrow, .nh-chip, .nh-cnt, .nh-sel), ui/sekcja.css (.nh-sec-n numer w kółku),
   ui/icons.css (strzałki). Tylko tokeny; margin/padding jawnie (reset Huba).

   STICKY (jedyny w ui/*.css — świadomy wyjątek strażnika check:sekcja §2): pasek klei się POD górnym paskiem Huba
   (top = --nh-topbar-h; w powiększonym widoku ÷ --fit-z), na telefonie od 0 (górny pasek Huba tam się nie klei —
   check:widoki-bez-przewijania). Host NIE ma już własnego sticky (.zr-nav / .pa-nav znikają w etapach 4b/4c).
   Wysokość paska mierzy JS → --nh-spis-bar-h (scroll-margin-top sekcji, próg NH.sekcja.spy).
   ============================================================ */

/* host i opakowanie NIE tworzą pudełka (display: contents): pasek jest w układzie dzieckiem WYSOKIEGO kontenera strony
   (widoku), więc position: sticky trzyma się przez całą stronę, a nie tylko przez wysokość spisu. */
.nh-spis-host, .nh-spis { display: contents; }

/* ── PASEK ─────────────────────────────────────────────────────────────────── */
.nh-spis-bar { position: sticky; top: calc(var(--nh-topbar-h, 0px) / var(--fit-z, 1)); z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  min-height: var(--nh-tap-min); box-sizing: border-box; margin: 0; padding: var(--space-2) var(--space-3);
  background: var(--nh-surface); border: 1px solid var(--nh-line); border-radius: var(--nh-r-card); box-shadow: var(--nh-sh-modal);
  transition: background-color .15s, border-color .15s, box-shadow .15s; }
/* podpis „SEKCJE” / „NA TEJ STRONIE” — mówi, czym ten pasek JEST (dawny pasek nie miał żadnego podpisu) */
.nh-spis-lbl { flex: 0 0 auto; color: var(--nh-text-2); padding-left: var(--space-1); }
/* segmenty = sekcje strony: numer · krótka nazwa · liczba; aktywny wypełniony granatem (= przycisk główny) */
.nh-spis-segs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; min-width: 0; }
.nh-spis-seg { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--nh-font-btn); font-size: var(--nh-text-sm); font-weight: 600; color: var(--nh-text);
  background: var(--btn-ghost-bg); border: 1px solid var(--nh-line); border-radius: var(--nh-r-pill); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); margin: 0; cursor: pointer; white-space: nowrap; line-height: 1.3; }
.nh-spis-seg:hover { background: var(--nh-row-select); border-color: var(--nh-chip-br); }
.nh-spis-seg:focus-visible, .nh-spis-tab:focus-visible, .nh-spis-go:focus-visible, .nh-spis-kid:focus-visible, .nh-spis-link:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
.nh-spis-n { display: inline-flex; align-items: center; justify-content: center; min-width: var(--icon-md); height: var(--icon-md); padding: 0 var(--space-1); box-sizing: border-box; border-radius: var(--nh-r-pill);
  background: var(--nh-field); color: var(--nh-text-2); font-size: var(--nh-text-xs); font-variant-numeric: tabular-nums; margin: 0; }
.nh-spis-seg[aria-current="true"] { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); }
.nh-spis-seg[aria-current="true"] .nh-spis-n { background: var(--nh-text-on-dark); color: var(--nh-navy); }
.nh-spis-seg .nh-cnt { margin-left: calc(-1 * var(--space-1)); }
/* liczba „cicha” (ton ok / bez tonu): szara zamiast czerwonej — czerwień tylko tam, gdzie coś wymaga uwagi */
.nh-cnt--quiet { background: var(--nh-field); color: var(--nh-text-2); }
.nh-spis-seg[aria-current="true"] .nh-cnt--quiet { background: var(--nh-text-on-dark); color: var(--nh-navy); }
/* działy (Panel admina) jako zakładki PRZED segmentami: ciepła kreska pod aktywną (jak menu boczne) */
.nh-spis-tabs { display: inline-flex; gap: var(--space-1); margin: 0; padding: 0; }
.nh-spis-tab { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--nh-font-head); font-size: var(--nh-text-sm); font-weight: 600; color: var(--nh-text-2);
  background: transparent; border: 0; border-bottom: 2px solid transparent; padding: var(--space-1) var(--space-2); margin: 0; cursor: pointer; white-space: nowrap; }
.nh-spis-tab:hover { color: var(--nh-text); }
.nh-spis-tab[aria-selected="true"] { color: var(--nh-text); border-bottom-color: var(--nh-accent-warm); }
.nh-spis-sep { width: 1px; align-self: stretch; min-height: var(--icon-lg); background: var(--nh-line); margin: 0; padding: 0; }
/* inne ekrany (Panel admina: „Tablica PDCA”, „Historia”) — po prawej, jako łącza */
.nh-spis-links { display: inline-flex; gap: var(--space-1); margin: 0 0 0 auto; padding: 0; }
.nh-spis-link { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--nh-font-btn); font-size: var(--nh-text-sm); font-weight: 600; color: var(--nh-accent); background: transparent; border: 0; padding: var(--space-1) var(--space-2); margin: 0; cursor: pointer; white-space: nowrap; --icon-color: currentColor; }
.nh-spis-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* z działami (Panel admina) segmenty sekcji zawsze w DRUGIM rzędzie: rząd 1 = podpis · działy · inne ekrany, rząd 2 = sekcje działu */
.nh-spis-tabs ~ .nh-spis-segs { flex: 1 0 100%; order: 1; }
/* telefon: <select> zamiast segmentów (domyślnie schowany) */
.nh-spis-sel-w { display: none; margin: 0; padding: 0; flex: 1 1 0; min-width: 0; }
.nh-spis-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.nh-spis-sel { width: 100%; min-width: 0; }

/* pasek CICHY (wariant A, karta cała na ekranie): przezroczysty, sam podpis = tytuł karty; segmenty znikają bez zmiany wysokości */
.nh-spis-bar.is-idle { background: transparent; border-color: transparent; box-shadow: none; }
.nh-spis-bar.is-idle .nh-spis-segs, .nh-spis-bar.is-idle .nh-spis-sel-w, .nh-spis-bar.is-idle .nh-spis-links { visibility: hidden; }
.nh-spis-bar.is-idle .nh-spis-lbl { color: var(--nh-text-muted); }

/* ── KARTA „Na tej stronie” (wariant A) ───────────────────────────────────── */
.nh-spis-card { margin: var(--space-2) 0 0; padding: 0; overflow: hidden; }
.nh-spis-card-t { padding: var(--space-3) var(--space-5) 0; }
.nh-spis-row { margin: 0; padding: 0; border-top: 1px solid var(--nh-line-soft); }
.nh-spis-row:first-child, .nh-spis-card-t + .nh-spis-row { border-top: 0; }
.nh-spis-row.is-active { box-shadow: inset 3px 0 0 var(--nh-accent-warm); }
.nh-spis-go { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--space-3); width: 100%; text-align: left;
  font: inherit; color: inherit; background: transparent; border: 0; margin: 0; padding: var(--space-3) var(--space-5); cursor: pointer; min-height: var(--nh-tap-min); box-sizing: border-box; }
.nh-spis-go:hover { background: var(--nh-row-select); }
.nh-spis-go:hover .nh-spis-tt { color: var(--nh-accent); }
.nh-spis-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 0; }
.nh-spis-tt { font-family: var(--nh-font-head); font-weight: 600; font-size: var(--nh-text-lg); color: var(--nh-text); margin: 0; padding: 0; }
.nh-spis-line { font-size: var(--nh-text-sm); color: var(--nh-text-2); line-height: 1.45; margin: 0; padding: 0; }
.nh-spis-chips { justify-content: flex-end; }
.nh-spis-chev { color: var(--nh-text-muted); display: inline-flex; margin: 0; padding: 0; }
.nh-spis-go:hover .nh-spis-chev { color: var(--nh-accent); }
/* podsekcje pod wierszem: „1.1 Zaległe zadania · 11” */
.nh-spis-kids { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0 var(--space-5) var(--space-3) calc(var(--space-5) + var(--icon-lg) + var(--space-3)); }
.nh-spis-kid { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--nh-font-body); font-size: var(--nh-text-sm); font-weight: 500; color: var(--nh-text-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--nh-r-pill); padding: 2px var(--space-2) 2px var(--space-1); margin: 0; cursor: pointer; }
.nh-spis-kid:hover { background: var(--nh-row-select); color: var(--nh-text); }
.nh-spis-kid[aria-current="true"] { border-color: var(--nh-line); background: var(--nh-surface-warm); color: var(--nh-text); }
.nh-spis-kn { font-size: var(--nh-text-xs); font-weight: 600; color: var(--nh-text-muted); font-variant-numeric: tabular-nums; min-width: 2.2em; }

/* ── Telefon (≤ 640 px): górny pasek Huba się nie klei → pasek od 0; <select> zamiast segmentów; karta jednokolumnowa ── */
@media (max-width: 640px) {
  /* pasek na całą szerokość ekranu: wychodzi poza wcięcie widoku (--nh-spis-bleed = wcięcie hosta na telefonie, domyślnie 16 px) */
  .nh-spis-bar { top: 0; border-radius: 0; margin: 0 calc(-1 * var(--nh-spis-bleed, var(--space-4))); padding: var(--space-2) var(--nh-spis-bleed, var(--space-4)); }
  .nh-spis-segs, .nh-spis-sep, .nh-spis-links { display: none; }
  .nh-spis-sel-w { display: block; }
  .nh-spis-sel-w { order: 1; }
  .nh-spis-tabs { order: 2; flex: 1 0 100%; overflow-x: auto; }
  .nh-spis-go { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--space-3) var(--space-4); }
  .nh-spis-chev { grid-column: 3; grid-row: 1; }
  .nh-spis-chips { grid-column: 2 / 3; grid-row: 2; justify-content: flex-start; margin-top: var(--space-1); }
  .nh-spis-kids { padding-left: var(--space-4); }
}

/* ── Druk: menu strony nie drukuje się (treść sekcji tak) ── */
@media print { .nh-spis { display: none; } }