/* ============================================================================
   15-menu-dodaj-etap.css — menu „Dodaj etap” na telefonie jako DOLNY ARKUSZ (GUI-FIX-A, 18.10.2026; wzór: artefakt `.ui-mn.dol` + `.ui-zas`)
   ----------------------------------------------------------------------------
   Komputer i tablet: bez zmian (panel pod przyciskiem, położenie liczy menu-i-wybieraki.js → zmienne --project-stage-menu-*).
   Telefon: panel przy dolnej krawędzi, 8 px od boków, nad strefą bezpieczną; za nim zasłona (klik w nią zamyka menu —
   10-events.js: kliknięcie w sam znacznik menu = poza panelem). Pozycje 52 px (cel dotyku). Tylko :root[data-ui="mobile"], zero !important.
   Dotyczy karty projektu na liście i okna Projekt (jedno wspólne `renderProjectStageMenu`).
   ============================================================================ */

/* zasłona za arkuszem: pseudo-element otwartego menu, nad treścią, pod panelem */
:root[data-ui="mobile"] .project-stage-menu[open]::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-menu-nad-trescia) - 1); background: color-mix(in srgb, var(--zaslona-kolor) 45%, transparent); }

/* arkusz: pozycjonowanie z JS (--project-stage-menu-top/left/width) jest tu świadomie pomijane */
:root[data-ui="mobile"] .project-stage-menu-panel { top: auto; right: var(--s-2); bottom: calc(var(--s-2) + var(--bezpieczny-dol)); left: var(--s-2); width: auto; min-width: 0; max-height: 60dvh; gap: 0; padding: var(--s-2); border-radius: var(--r-lg); box-shadow: var(--cien-3); }
/* uchwyt arkusza */
:root[data-ui="mobile"] .project-stage-menu-panel::before { content: ""; flex: none; align-self: center; width: 40px; height: 4px; margin-bottom: var(--s-2); border-radius: 2px; background: var(--line-strong); }
:root[data-ui="mobile"] .project-stage-menu-panel .project-stage-menu-action { min-height: 52px; font-size: var(--t-md); }
:root[data-ui="mobile"] .project-stage-menu-panel .project-stage-menu-sep { margin-block: var(--s-1); }

/* telefon poziomo: niski ekran — pozycje 44 px, arkusz do 80% wysokości i wąski (520 px), na środku, żeby nie rozciągał się na cały szeroki ekran */
:root[data-ui="mobile"][data-telefon-poziomo] .project-stage-menu-panel { right: auto; left: 50%; width: min(520px, calc(100% - var(--s-4))); max-height: 80dvh; transform: translateX(-50%); }
:root[data-ui="mobile"][data-telefon-poziomo] .project-stage-menu-panel .project-stage-menu-action { min-height: 44px; }