/* ============================================================
   Navigator Hub — SEKCJA ZE SKRÓTEM (NH.sekcja, 18.10.2026) — wygląd
   <details class="nh-sec"> z nagłówkiem = nadtytuł · tytuł + ⓘ · kapsułki/zdanie (SKRÓT) · akcje · strzałka,
   treść w .nh-sec-b. Lustro zwijanej sekcji Tablicy PDCA (`.pd-sec`, `#secTodo` w public/tablica-pdca.html) —
   strażnik `npm run check:sekcja` §3 porównuje deklaracje. Wymaga ui/panel-shell.css (kapsułki .nh-chip, nadtytuł
   .nh-eyebrow) i ui/icons.css (strzałka). Tylko tokeny; margin/padding jawnie (reset Huba); bez sticky.

   Dlaczego <details>, nie pop-up (decyzja Soni 18.10, plan docs/PLAN_panele_skrot_i_wspolny_styl.md):
   sekcja się ROZWIJA (widać etykiety pozostałych, pasek sekcji i ?sekcja= działają, Ctrl+F i druk widzą treść),
   REKORD się OTWIERA (lista za liczbą, sprawa, zadanie → szuflada / okno jak dziś).
   Zwinięta sekcja NIGDY nie jest pustym paskiem (tak wyglądało zwijanie usunięte z Panelu admina 12.10):
   skrót = ≤ 3 kapsułki z liczbą i stanem albo jedno zdanie — liczy go NH.sekcja z tych samych danych co treść.
   ============================================================ */

/* ── Sekcja = karta (= .pd-card + .pd-sec) ─────────────────────────────────── */
.nh-sec { background: var(--nh-surface); border: 1px solid var(--nh-line); border-radius: var(--nh-r-card); box-shadow: var(--nh-sh-card);
  margin: var(--space-5) 0 0; padding: 0; scroll-margin-top: var(--nh-sec-top); }
.nh-sec.alarm { border-color: var(--nh-alarm-br); }   /* = .pd-sec.alarm: w skrócie jest kapsułka „miss” */

/* ── Nagłówek (= .pd-sec > summary) ───────────────────────────────────────── */
.nh-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  margin: 0; flex-wrap: wrap; min-height: var(--nh-tap-min); box-sizing: border-box; border-radius: var(--nh-r-card); }
.nh-sec > summary::-webkit-details-marker { display: none; }
.nh-sec > summary:hover { background: var(--nh-row-select); }
.nh-sec[open] > summary:hover { border-radius: var(--nh-r-card) var(--nh-r-card) 0 0; }
.nh-sec > summary:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: -2px; }
.nh-sec > summary h2 { font-family: var(--nh-font-head); font-weight: 600; font-size: var(--nh-text-xl); margin: 0; padding: 0; display: inline-flex; align-items: center; gap: var(--space-2); }
.nh-sec > summary .nh-eyebrow { flex: 0 0 auto; }
/* numer w kółku (Panel zarządzania, FINAL 15.10: „sekcja 3” mówi się na zebraniu) — zamiast nadtytułu słownego */
.nh-sec-n { flex: 0 0 auto; width: var(--icon-lg); height: var(--icon-lg); box-sizing: border-box; border: 1px solid var(--nh-line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--nh-text-2); font-family: var(--nh-font-body); font-weight: 600; font-size: var(--nh-text-xs); font-variant-numeric: tabular-nums; margin: 0; padding: 0; }
/* numer podsekcji „1.3” (etap 4: 5 sekcji z podsekcjami) — ta sama obwódka, szersza pigułka zamiast kółka */
.nh-sec-n--sub { width: auto; min-width: var(--icon-lg); padding: 0 var(--space-2); border-radius: var(--nh-r-pill); }
/* tytuł + ⓘ */
.nh-sec-t { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; }
/* SKRÓT: kapsułki (.nh-chips) albo jedno zdanie (.nh-sec-sum-t) */
.nh-sec-sum { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; margin: 0; padding: 0; }
.nh-sec-sum-t { font-size: var(--nh-text-sm); color: var(--nh-text-2); font-variant-numeric: tabular-nums; margin: 0; padding: 0; }
.nh-sec-sum-t b { color: var(--nh-text); font-weight: 600; }
/* akcje po prawej (np. „Otwórz na całym ekranie”) — klik nie przełącza sekcji (NH.sekcja łapie go w JS) */
.nh-sec-act { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0 0 0 auto; padding: 0; }
/* strzałka (= .pd-sec > summary .chev): po prawej, obrócona gdy zwinięta */
.nh-sec-chev { margin-left: auto; color: var(--nh-text-2); transition: transform .15s; display: inline-flex; margin-top: 0; margin-right: 0; margin-bottom: 0; padding: 0; }
.nh-sec-act + .nh-sec-chev { margin-left: 0; }
.nh-sec:not([open]) > summary .nh-sec-chev { transform: rotate(-90deg); }

/* ── Treść (= .pd-sec-b) ──────────────────────────────────────────────────── */
.nh-sec-b { padding: 0 var(--space-5) var(--space-5); margin: 0; }
/* jedno zdanie pod tytułem (≤ 20 słów): co tu jest; definicja i progi zostają w ⓘ */
.nh-sec-line { font-size: var(--nh-text-sm); color: var(--nh-text-2); line-height: 1.5; max-width: 80ch; margin: 0 0 var(--space-4); padding: 0; }
/* „Jak to omawiać” / „Od czego zacząć”: zwijane w treści, domyślnie zwinięte (porada nie zasłania danych) */
.nh-sec-how { margin: 0 0 var(--space-4); padding: 0; }
.nh-sec-how > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--nh-text-sm); font-weight: 600; color: var(--nh-accent); margin: 0; padding: 0; }
.nh-sec-how > summary::-webkit-details-marker { display: none; }
.nh-sec-how > summary .nh-icon { transition: transform .15s; }
.nh-sec-how:not([open]) > summary .nh-icon { transform: rotate(-90deg); }
.nh-sec-how > summary:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
.nh-sec-how-b { font-size: var(--nh-text-sm); color: var(--nh-text-2); line-height: 1.6; max-width: 80ch; margin: var(--space-2) 0 0; padding: 0; }
.nh-sec-how-b p { margin: 0 0 var(--space-2); padding: 0; }

/* ── Podsekcja (sekcja w sekcji): bez ramki, oddzielona kreską; ten sam skrót, mniejszy tytuł ── */
.nh-sec--sub { margin: var(--space-4) 0 0; border: 0; border-top: 1px solid var(--nh-line-soft); border-radius: 0; background: transparent; box-shadow: none; }
.nh-sec--sub > summary { padding: var(--space-3) 0; border-radius: 0; }
.nh-sec--sub > summary:hover { background: transparent; }
.nh-sec--sub > summary:hover h2 { color: var(--nh-accent); }
.nh-sec--sub > summary h2 { font-size: var(--nh-text-lg); }
.nh-sec--sub > .nh-sec-b { padding: 0 0 var(--space-4); }
.nh-sec--sub.alarm { border-top-color: var(--nh-alarm-br); }

/* ── „Pokaż kolejne 10 · Widać 5 z 23 · Pokaż wszystkie · Zwiń do 5” (= lim() z zarzadzanie.js, 14.10) ── */
.nh-more-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding: 0; }
.nh-more { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; margin: 0; border: 0; background: none; color: var(--nh-accent); font-family: var(--nh-font-body); font-weight: 600; font-size: var(--nh-text-sm); cursor: pointer; --icon-color: currentColor; }
.nh-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.nh-more--quiet { color: var(--nh-text-2); font-weight: 500; }
.nh-more:focus-visible, .nh-pg:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
.nh-more-meta { font-size: var(--nh-text-xs); color: var(--nh-text-2); font-variant-numeric: tabular-nums; }
.nh-more-bar--pg { gap: var(--space-1); }
.nh-more-bar--pg .nh-more-meta { margin-right: var(--space-3); }
.nh-pg { min-width: var(--icon-lg); height: var(--icon-lg); padding: 0 var(--space-1); margin: 0; border: 1px solid var(--nh-line); border-radius: var(--radius-sm); background: var(--nh-surface); color: var(--nh-text-2); font-family: var(--nh-font-body); font-weight: 500; font-size: var(--nh-text-xs); cursor: pointer; font-variant-numeric: tabular-nums; }
.nh-pg.is-on { border-color: var(--nh-chip-br); background: var(--nh-field); color: var(--nh-text); font-weight: 700; }
.nh-pg[disabled] { cursor: default; color: var(--nh-text-muted); }

/* ── Telefon: nagłówek ciaśniej, kapsułki pod tytułem, cel dotyku zostaje ≥ 44 px ── */
@media (max-width: 640px) {
  .nh-sec > summary { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .nh-sec-b { padding: 0 var(--space-4) var(--space-4); }
  .nh-sec-sum { flex-basis: 100%; }
}

/* ── Druk: NH.sekcja otwiera zwinięte sekcje na beforeprint; tu tylko bez strzałek i bez tła najechania ── */
@media print {
  .nh-sec-chev, .nh-sec-act, .nh-more-bar { display: none; }
  .nh-sec > summary:hover { background: transparent; }
}