/* ==========================================================================
   Pomoc w panelu (audyt pierwszego kontaktu, 23.09.2026): kółko „?” przy tytule strony,
   przy funkcjach w podręcznym menu obszaru i na kafelkach pulpitu; drobne poprawki
   z tego samego audytu (siatka obszarów, nagłówek pulpitu na telefonie).
   ========================================================================== */

/* --- kółko „?”: jeden wygląd wszędzie */
.hlp {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); color: var(--muted);
    font: 600 12px/1 var(--font); text-decoration: none; cursor: help;
}
.hlp:hover, .hlp:focus-visible { border-color: var(--brand); color: var(--brand-dark); background: var(--info-bg); text-decoration: none; }

/* Przy tytule strony: h1 zostaje blokiem, kółko stoi w tej samej linii dzięki inline-block. */
.page-head h1, .p2-hd h1, .dash-hd h1 { display: inline-block; }
.hlp-page { margin-left: 8px; vertical-align: middle; position: relative; top: -2px; }

/* Podręczne menu obszaru: wiersz = odnośnik funkcji + kółko, bo odnośnika w odnośniku nie ma. */
.sb-nav .fly .fr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.sb-nav .fly .fr > a:first-child { min-width: 0; }
.sb-nav .fly a.hlp { display: inline-flex; padding: 0; width: 20px; height: 20px; margin-right: 4px; font-size: 12px; grid-template-columns: none; }
.sb-nav .fly h4 { display: flex; align-items: center; gap: 6px; }
.sb-nav .fly a.hlp-h4 { width: 16px; height: 16px; font-size: 10px; margin: 0; }

/* Kafelek obszaru na pulpicie: kółko przy nazwie obszaru i przy każdej funkcji. */
.area-card .ih .hlp { margin-left: auto; width: 18px; height: 18px; font-size: 11px; }
.area-card li { display: flex; align-items: center; gap: 6px; }
.area-card li > a:first-child { flex: 1; }
.area-card li .hlp { width: 16px; height: 16px; font-size: 10px; opacity: .55; }
.area-card li:hover .hlp { opacity: 1; }

/* Podpowiedź karty z odnośnikiem „Więcej w instrukcji”. */
.p2-hint a { font-weight: 600; color: var(--brand-dark); white-space: nowrap; }

/* Zdanie „po co” pod punktem checklisty startu. */
.checklist a { flex-wrap: wrap; }
.checklist a .why { flex-basis: 100%; padding-left: 27px; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: -2px; }
.checklist a.done .why { display: none; }

/* Kafelek „Co jeszcze pokaże pulpit” na nowym kontrakcie. */
.p2-more .in { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 22px; }
.p2-more .in div { font-size: 13px; color: var(--ink-2); line-height: 1.45; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.p2-more .in div b { display: block; color: var(--ink); }
.p2-more .in div a { font-weight: 600; color: var(--brand-dark); }

/* Siatka obszarów liczy się od szerokości KONTENERA, nie okna: przy oknie 1400-1700 px
   sześć kolumn wchodziło w kolumnę o szerokości ok. 950 px i łamało nazwy w środku wyrazu. */
.p2-areas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 480px) { .p2-areas { grid-template-columns: 1fr; } }

/* Nagłówek pulpitu na telefonie: cztery przyciski w jednym rzędzie zamiast dwóch. */
@media (max-width: 600px) {
    .pulpit-dash .hd-acts { gap: 6px; }
    .pulpit-dash .hd-acts .btn { padding: 6px 10px; font-size: 12.5px; }
}

/* Strona błędu i ekrany logowania: odnośniki do strony i instrukcji w stopce karty. */
.auth-links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; }
.auth-links a { color: var(--muted); }
.auth-links a:hover { color: var(--brand-dark); }