/* ============================================================
   Navigator Hub — WSPÓLNE KLOCKI (wspólny styl v4, 20.10.2026)
   Makieta zaakceptowana przez Sonię („ok, jest spoko”): https://claude.ai/artifact/3ttcLUKzqPdpC21KxjvHGG (wersja 4),
   po dwóch ocenach układu: pomiar (oś, rytm, style pisma) + design-critique (metoda Anthropic).
   Pierwszy ekran: Notatki AI z rozmów (NH.callNote.mountAdmin). Kolejne ekrany DOPINAJĄ SIĘ do tych klas —
   nie piszą własnych kart, list i pigułek. Filtruj = NH.filterMenu (ui/filter-menu.css), Sortuj = NH.sortMenu
   (ui/sort-menu.js, ten sam wygląd), ⓘ = NH.tipMark (ui/tooltip.js), ikony = NH.icon.
   (Panel admina i Panel zarządzania mają dziś muszlę ui/panel-shell.css — połączenie obu wzorów = krok „Panel admina”.)

   Zasady:
     • kolejność według pracy — to, co codzienne, na górze; rzadkie (wgrywanie) za przyciskiem;
     • jedna oś lewa i jedna prawa; liczby „Stanu” w równych kolumnach wyrównanych do lewej;
     • rytm 4/8: między kartami --space-6, wcięcie karty --space-5, w środku --space-4 / --space-3;
     • nagłówek karty 64 px, kontrolki --nh-ctl-h (telefon --nh-tap-min);
     • pismo: 2xl 24 · xl 20 · base 15 · md 14 · sm 13 · xs 12; tytuł sekcji = krój tytułu strony, mniejszy;
     • kropka = TYLKO stan; czas po progu (1 h) czerwony z ikoną; ostrzeżenie w osobnej linii;
     • 3 kształty kontrolek: pigułka zmienia widok (przełącznik, Filtruj, Sortuj) · prostokąt wykonuje akcję · link;
     • niebieski (--nh-accent na --nh-group-blue) = „to jest włączone”.
   Tylko tokeny (zero literałów kolorów, zero !important); margin/padding jawnie (reset Huba) — strażnik `npm run check:klocki`.
   ============================================================ */

/* ── Strona: jedna kolumna czytania ─────────────────────────────────────────── */
.nh-k-stack { display: grid; gap: var(--space-6); max-width: 820px; min-width: 0; margin: 0; padding: 0; }
.nh-k-stack > * { min-width: 0; }
/* Tytuł strony w kroju wzoru (strona z klasą .nh-k-page; reszta ekranów Studio bez zmian) */
.nh-k-page .wz-title { font-size: var(--nh-text-2xl); font-weight: 500; color: var(--nh-text); }
.nh-k-page .wz-sub { font-size: var(--nh-text-md); color: var(--nh-text-sub); }

/* ── Pasek strony: stan po lewej, akcja strony po prawej ────────────────────── */
.nh-k-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin: 0; padding: 0; }
.nh-k-bar__l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--nh-text-sm); color: var(--nh-text-sub); }

/* ── Karta sekcji: nagłówek 64 px oddzielony linią, treść z oddechem ────────── */
.nh-k-card { background: var(--nh-surface); border: 1px solid var(--nh-line); border-radius: var(--nh-r-card); box-shadow: var(--nh-sh-card); margin: 0; padding: 0; min-width: 0; }
.nh-k-card[hidden] { display: none; }
.nh-k-card__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: 64px; box-sizing: border-box; margin: 0; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--nh-line-soft); }
.nh-k-card__t { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; padding: 0; font-family: var(--nh-font-head); font-size: var(--nh-text-xl); font-weight: 500; line-height: 1.3; color: var(--nh-text); text-transform: none; letter-spacing: normal; }
.nh-k-card__n { color: var(--nh-text-sub); font-variant-numeric: tabular-nums; }
.nh-k-card__t .nh-i { align-self: center; }
.nh-k-card__b { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-3) var(--space-5); min-width: 0; }
.nh-k-card__b--pad { padding: var(--space-5); }
.nh-k-card__b > * { min-width: 0; }
.nh-k-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); position: relative; min-width: 0; }
.nh-k-tools .nh-fm-pop { left: auto; right: 0; }   /* menu z prawego rogu karty otwiera się w lewo — nie wychodzi za ekran */

/* ── Tekst pomocniczy ───────────────────────────────────────────────────────── */
.nh-k-note { margin: 0; padding: 0; font-size: var(--nh-text-sm); line-height: 1.5; color: var(--nh-text-sub); }
.nh-k-empty { margin: 0; padding: var(--space-3) 0; font-size: var(--nh-text-md); color: var(--nh-text-sub); }
.nh-k-lbl { font-size: var(--nh-text-sm); color: var(--nh-text-sub); }

/* ── Stan = kropka + słowo (kropka niesie TYLKO stan) ───────────────────────── */
.nh-k-dot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nh-text-sm); font-weight: 500; white-space: nowrap; color: var(--nh-text-quiet); }
.nh-k-dot::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nh-k-dot--ok { color: var(--nh-ok-ink); }
.nh-k-dot--warn { color: var(--nh-warn-ink); }
.nh-k-dot--miss { color: var(--nh-miss-text); }
.nh-k-dot--prep { color: var(--nh-accent); }
.nh-k-dot--mute { color: var(--nh-text-quiet); }
.nh-k-late { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--nh-miss-text); font-weight: 600; --icon-color: currentColor; }
.nh-k-flag { display: flex; flex-basis: 100%; align-items: center; gap: var(--space-1); color: var(--nh-warn-ink); --icon-color: currentColor; }

/* ── Kontrolki: akcja (obrys / wypełnienie) i widok — obie pigułki od 26.10 (decyzja Soni, --nh-r-btn), link ── */
.nh-k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--nh-ctl-h); box-sizing: border-box; margin: 0; padding: 0 var(--space-3);
  border: 1px solid var(--nh-ctl-line); border-radius: var(--nh-r-btn); background: var(--nh-surface); color: var(--nh-text);
  font-family: var(--nh-font-btn); font-size: var(--nh-text-sm); font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: normal; white-space: nowrap; cursor: pointer; --icon-color: currentColor; }
.nh-k-btn:hover { border-color: var(--nh-text); }
.nh-k-btn:focus-visible, .nh-k-pill:focus-visible, .nh-k-toggle > button:focus-visible, .nh-k-link:focus-visible, .nh-k-stat:focus-visible { outline: 2px solid var(--nh-accent); outline-offset: 2px; }
.nh-k-btn--pri { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.nh-k-btn--pri:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }
.nh-k-btn[disabled] { background: var(--nh-field); border-color: var(--nh-field); color: var(--nh-text-quiet); cursor: not-allowed; }
.nh-k-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--nh-ctl-h); min-width: var(--nh-ctl-h); box-sizing: border-box; margin: 0; padding: 0 var(--space-3);
  border: 1px solid var(--nh-chip-br); border-radius: var(--nh-r-pill); background: var(--nh-surface); color: var(--nh-text); font: 500 var(--nh-text-sm) var(--nh-font-body); cursor: pointer; --icon-color: currentColor; }
.nh-k-pill:hover { border-color: var(--nh-accent); }
.nh-k-pill--icon { width: var(--nh-ctl-h); padding: 0; }
.nh-k-toggle { display: inline-flex; height: var(--nh-ctl-h); box-sizing: border-box; gap: 2px; margin: 0; padding: 2px; border: 1px solid var(--nh-chip-br); border-radius: var(--nh-r-pill); background: var(--nh-surface); }
.nh-k-toggle > button { margin: 0; padding: 0 var(--space-3); border: 0; border-radius: var(--nh-r-pill); background: none; color: var(--nh-text-sub); font: 500 var(--nh-text-sm) var(--nh-font-body); white-space: nowrap; cursor: pointer; }
.nh-k-toggle > button[aria-pressed="true"] { background: var(--nh-group-blue); color: var(--nh-accent); font-weight: 600; }
.nh-k-num { font-variant-numeric: tabular-nums; }
.nh-k-link { margin: 0; padding: 0; border: 0; background: none; color: var(--nh-accent); font-family: var(--nh-font-btn); font-size: var(--nh-text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; }
.nh-k-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Menu Filtruj / Sortuj: opcje z liczbą i znacznikiem wyboru ─────────────── */
.nh-sm { position: relative; display: inline-flex; }
.nh-sm .nh-fm-pop { left: auto; right: 0; min-width: min(260px, calc(100vw - 32px)); padding: var(--space-2); }
.nh-sm-v { color: var(--nh-text-sub); font-weight: 400; }
.nh-k-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: var(--space-3); width: 100%; box-sizing: border-box; margin: 0; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--nh-text); font: 400 var(--nh-text-md) var(--nh-font-body); text-align: left; cursor: pointer; }
.nh-k-opt:hover { background: var(--nh-field); }
.nh-k-opt .nh-k-num { color: var(--nh-text-sub); }
.nh-k-opt::after { content: ""; grid-column: 3; }
.nh-k-opt[aria-checked="true"] { font-weight: 600; }
.nh-k-opt[aria-checked="true"]::after { content: "✓"; color: var(--nh-accent); }
.nh-k-fmopts { display: grid; gap: 2px; }

/* ── Stan: równe kolumny wyrównane do lewej, liczba prowadzi do sprawy ──────── */
.nh-k-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.nh-k-stat { display: grid; align-content: start; justify-items: start; gap: 2px; min-width: 0; margin: 0; padding: 0 var(--space-4); border: 0; border-left: 1px solid var(--nh-line-soft); background: none; color: inherit; font: inherit; text-align: left; }
.nh-k-stat:first-child { padding-left: 0; border-left: 0; }
button.nh-k-stat { cursor: pointer; border-radius: 0; }
button.nh-k-stat:hover .nh-k-stat__v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nh-k-stat__l { font-size: var(--nh-text-sm); color: var(--nh-text-sub); }
.nh-k-stat__v { font-family: var(--nh-font-head); font-size: var(--nh-text-xl); font-weight: 500; line-height: 1.3; color: var(--nh-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nh-k-stat__s { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--nh-text-sm); color: var(--nh-text-sub); --icon-color: currentColor; }
.nh-k-stat--alarm .nh-k-stat__v, .nh-k-stat--alarm .nh-k-stat__s { color: var(--nh-miss-text); }
.nh-k-stat--ok .nh-k-stat__v { color: var(--nh-ok-ink); }
.nh-k-meter { display: block; width: 100%; height: 4px; margin: 6px 0 0; border-radius: 2px; background: var(--nh-line); overflow: hidden; }
.nh-k-meter > i { display: block; height: 100%; border-radius: 2px; background: var(--nh-accent); }
.nh-k-signals { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--nh-line-soft); }
.nh-k-signal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--nh-text-sm); }

/* ── Lista: ta sama siatka w każdej liście — treść | akcja stanu | otwórz ───── */
.nh-k-rows { display: grid; margin: 0; padding: 0; }
.nh-k-rows.is-loading { opacity: .6; }
.nh-k-group { margin: 0; padding: var(--space-3) 0 var(--space-1); font-family: var(--nh-font-head); font-size: var(--nh-text-xs); font-weight: 600; letter-spacing: var(--nh-ls-section); text-transform: uppercase; color: var(--nh-text-sub); }
.nh-k-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--nh-line-soft); }
.nh-k-rows > .nh-k-row:first-child, .nh-k-group + .nh-k-row, .nh-k-note + .nh-k-row { border-top: 0; }
.nh-k-row__b { display: grid; gap: 2px; min-width: 0; }
.nh-k-row__t { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); font-size: var(--nh-text-base); font-weight: 600; line-height: 1.4; color: var(--nh-text); }
.nh-k-row__m { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: var(--nh-text-sm); color: var(--nh-text-sub); font-variant-numeric: tabular-nums; }
.nh-k-row__m > span + span:not(.nh-k-flag)::before { content: "·"; margin-right: 6px; }
.nh-k-row__a1 { grid-column: 2; }
.nh-k-row__a2 { grid-column: 3; }
.nh-k-row .nh-k-btn { width: 100%; }
/* Dodatkowa akcja wiersza (a0, np. „Powtórz pokaz” przy rozmowie odegranej) — własne miejsce PRZED kolumnami akcji:
   „akcja stanu” i „otwórz” zostają w tych samych kolumnach w każdym wierszu listy */
.nh-k-row--x { grid-template-columns: minmax(0, 1fr) auto 120px 140px; }
.nh-k-row--x .nh-k-row__a0 { grid-column: 2; }
.nh-k-row--x .nh-k-row__a1 { grid-column: 3; }
.nh-k-row--x .nh-k-row__a2 { grid-column: 4; }
/* Potwierdzenie w wierszu (akcja nadpisuje dane) — pod wierszem, na całą szerokość */
.nh-k-ask { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--nh-warn-bg); color: var(--nh-warn-ink); font-size: var(--nh-text-sm); }
.nh-k-ask > span { flex: 1 1 260px; }
.nh-k-row .nh-k-ask .nh-k-btn { width: auto; }   /* przycisk w potwierdzeniu nie rozciąga się jak przyciski kolumn */
.nh-k-row.is-flash { animation: nh-k-flash 1.6s ease-out; }
@keyframes nh-k-flash { 0%, 30% { background: var(--nh-group-blue); } 100% { background: transparent; } }

/* ── Telefon: cele dotyku 44 px, Stan 2 × 2, akcje pod wierszem ─────────────── */
@media (max-width: 640px) {
  .nh-k-stack { gap: var(--space-5); }
  .nh-k-card__h { padding: var(--space-3) var(--space-4); }
  .nh-k-card__b, .nh-k-card__b--pad { padding: var(--space-3) var(--space-4); }
  .nh-k-card__h .nh-k-tools { width: 100%; }
  .nh-k-btn { min-height: var(--nh-tap-min); }
  .nh-k-pill, .nh-k-toggle, .nh-k-tools .nh-fm-btn { height: var(--nh-tap-min); }
  .nh-k-pill { min-width: var(--nh-tap-min); }
  .nh-k-pill--icon { width: var(--nh-tap-min); }
  .nh-k-tools .nh-fm-chip { height: var(--nh-tap-min); }
  .nh-k-tools .nh-fm-chip-x { min-width: 32px; min-height: 32px; justify-content: center; align-items: center; }
  .nh-k-toggle > button, .nh-k-tools .nh-fm-btn { padding: 0 var(--space-3); }
  .nh-sm-l { display: none; }
  .nh-k-hide-phone { display: none; }
  .nh-k-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nh-k-stat { padding: var(--space-3) 0 var(--space-3) var(--space-4); }
  .nh-k-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .nh-k-stat:nth-child(n+3) { border-top: 1px solid var(--nh-line-soft); }
  .nh-k-stat__v { font-size: var(--nh-text-lg); }
  .nh-k-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nh-k-row__b { grid-column: 1 / -1; }
  .nh-k-row__a1 { grid-column: 1; }
  .nh-k-row__a2 { grid-column: 2; }
  .nh-k-row--solo .nh-k-row__a2 { grid-column: 1 / -1; }
  .nh-k-row--x { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nh-k-row--x .nh-k-row__a0 { grid-column: 1 / -1; }
  .nh-k-row--x .nh-k-row__a1 { grid-column: 1; }
  .nh-k-row--x .nh-k-row__a2 { grid-column: 2; }
  .nh-k-row--x.nh-k-row--solo .nh-k-row__a2 { grid-column: 1 / -1; }
  .nh-k-ask .nh-k-btn { flex: 1 1 auto; }
  .nh-k-row__m { font-size: var(--nh-text-md); }
  /* podpis: „godzina · kto” w pierwszej linii, powód / czas czekania w drugiej — bez kropki na początku zawiniętej linii */
  .nh-k-row__m > span:nth-child(n+3) { flex-basis: 100%; }
  .nh-k-row .nh-k-row__m > span + span:nth-child(n+3)::before { content: none; }   /* mocniejszy niż reguła kropki wyżej (0,3,3 > 0,3,2) — 20.10: słabszy selektor nie działał */
}