/* ============================================================================
   9-telefon/4c-notatki.css — Notatki na telefonie wg zatwierdzonego wyglądu (v15-b5, 02.10.2026)
   ----------------------------------------------------------------------------
   Wzór: scratchpad/pulpit/Notatki.html (widok „Telefon” i „Telefon ↔”). Komputer: 4-widoki/15b-notatki.css.
   Wyłącznie :root[data-ui="mobile"] (telefon poziomo dodatkowo [data-telefon-poziomo]).
   ============================================================================ */
/* --- Okno „Przypomnienie”: arkusz od dołu (wysokość wg treści), szybkie terminy 2 × 2, dni i pola 44 px --- */
:root[data-ui="mobile"] #modal-root .modal-backdrop:has(> .modal.reminder-modal) { place-items: end stretch; }
:root[data-ui="mobile"] #modal-root .modal.reminder-modal { height: auto; max-height: 92dvh; border-radius: var(--arkusz-r) var(--arkusz-r) 0 0; }
:root[data-ui="mobile"] #modal-root .modal.reminder-modal > header { min-height: 0; padding: var(--s-4) var(--s-2) var(--s-3) var(--s-4); }
:root[data-ui="mobile"] .reminder-modal .rcal-day { height: 44px; font-size: var(--t-base); }
:root[data-ui="mobile"] .reminder-modal .rcal-cell { height: 44px; }
:root[data-ui="mobile"] .reminder-modal .rcal-head .icon-button { width: 44px; height: 44px; }
:root[data-ui="mobile"] .reminder-modal .rtime-row :is(select, .combo-input) { height: 44px; min-height: 44px; }
:root[data-ui="mobile"] .reminder-modal .rtime-row > :is(select, .combo) { flex-basis: 96px; width: 96px; }
:root[data-ui="mobile"] .reminder-modal .rquick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-ui="mobile"] .reminder-modal .rquick > .button { height: 44px; font-size: var(--t-base); }
:root[data-ui="mobile"] #modal-root .modal.reminder-modal > footer { flex-wrap: nowrap; }
:root[data-ui="mobile"] #modal-root .modal.reminder-modal > footer > .button { flex: 0 0 auto; min-height: 44px; padding-inline: var(--s-4); }
/* Telefon poziomo: arkusz na całą wysokość, kalendarz z lewej (przewija się w oknie), godzina i szybkie terminy z prawej. */
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.reminder-modal { max-height: 100dvh; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.reminder-modal > header { padding-block: var(--s-1); }
:root[data-ui="mobile"][data-telefon-poziomo] .modal.reminder-modal > .reminder-picker { grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto 1fr; align-items: start; column-gap: var(--s-4); padding-block: var(--s-2); }
:root[data-ui="mobile"][data-telefon-poziomo] .reminder-modal .rcal { grid-row: span 2; }
/* --- Telefon pionowo: JEDEN ekran naraz — Tematy → temat (lista notatek / notatka / udostępnianie). Ekran wybiera
   `data-ekran` na .zn-notes (renderZnNotatki: tematy | temat), „‹” w nagłówku tematu wraca (zadania/notatki-ekran.js).
   Strona przewija się jak inne ekrany telefonu; „+” programu (ui/aplikacja-mobilna.js) = „Nowa notatka”, tylko na ekranie tematu. --- */
:root[data-ui="mobile"] .zn-notes { display: block; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root[data-ui="mobile"] .zn-notes[data-ekran="tematy"] .zn-notes-right, :root[data-ui="mobile"] .zn-notes[data-ekran="temat"] .zn-notes-left { display: none; }
:root[data-ui="mobile"] .zn-notes-left { border-right: 0; }
:root[data-ui="mobile"] .content:has(.zn-notes) { padding-top: var(--s-3); }
:root[data-ui="mobile"] .notes2-head { min-height: 0; padding: var(--s-1) var(--s-1) var(--s-2); border-bottom: 0; }
:root[data-ui="mobile"] .note-topic-name { font-size: var(--t-md); }
:root[data-ui="mobile"] .notes2-lbl { font-size: var(--t-md); }
:root[data-ui="mobile"] .notes2-body { overflow: visible; padding: 0; }
:root[data-ui="mobile"] .notes2-topics { gap: 0; overflow: hidden; border-radius: var(--r); background: var(--surface); }
:root[data-ui="mobile"] .notes2-empty { border-radius: var(--grupa-r); background: var(--surface); }
:root[data-ui="mobile"] .note-topic-row { border-radius: 0; }
:root[data-ui="mobile"] .note-topic-row + .note-topic-row { border-top: 1px solid var(--kreska-wlos); }
:root[data-ui="mobile"] .note-topic-row:hover { background: transparent; }
:root[data-ui="mobile"] .note-topic-row.is-sel { background: var(--accent-soft); }
:root[data-ui="mobile"] .note-topic-main { min-height: 60px; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); }
:root[data-ui="mobile"] .note-topic-sub { font-size: var(--t-sm); }
/* Akcje tematu tylko przy wybranym (przezroczysty kosz dało się trafić palcem przez przypadek). */
:root[data-ui="mobile"] .note-topic-acts { opacity: 1; }
:root[data-ui="mobile"] .note-topic-row:not(.is-sel) .note-topic-acts { visibility: hidden; }
:root[data-ui="mobile"] .note-row .note-topic-acts { visibility: visible; }
:root[data-ui="mobile"] .note-topic-act.is-danger { color: var(--text-muted); }   /* wzór: kosz szary jak ikona udostępniania (czerwony dopiero w pytaniu o usunięcie) */
:root[data-ui="mobile"] .notes2-add { padding: var(--s-3) 0 0; }
:root[data-ui="mobile"] #content .notes2-add > .button { justify-content: flex-start; width: 100%; height: 48px; padding: 0 var(--s-4); border-radius: var(--r); background: var(--surface); color: var(--accent-strong); font-size: var(--t-base); }
/* Ekran tematu: biała grupa z nagłówkiem „‹ Temat”. */
/* Bez overflow: hidden — panel nie może być pojemnikiem przewijania, bo pasek działań notatki przykleja się do ekranu. */
:root[data-ui="mobile"] .note-topic-panel { border-radius: var(--grupa-r); background: var(--surface); }
/* v15 b19 (ZK3): ekran tematu i notatki od krawędzi do krawędzi jak we wzorze (.tresc.nt-t: padding 0, panel bez promienia, białe tło) —
   tytuł notatki ma całą szerokość ekranu i nie jest ucinany. Lista tematów zostaje kartą z odstępem 12 px. */
:root[data-ui="mobile"] .content:has(.zn-notes[data-ekran="temat"]) { padding-top: 0; padding-inline: 0; background: var(--surface); }
:root[data-ui="mobile"] .zn-notes[data-ekran="temat"] .note-topic-panel { border-radius: 0; }
/* Notatka wypełnia ekran między górnym a dolnym paskiem — pasek działań stoi na dole jak we wzorze (nie zaraz pod krótką treścią). */
:root[data-ui="mobile"] .zn-notes[data-ekran="temat"] .note-topic-panel.is-edycja { min-height: calc(100dvh - var(--app-bar-h) - var(--bezpieczna-gora) - var(--tabbar-h)); }
:root[data-ui="mobile"] .note-panel-empty { display: none; }
:root[data-ui="mobile"] .note-panel-head { min-height: 60px; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-bottom-color: var(--kreska-wlos); }
:root[data-ui="mobile"] .note-panel-back { display: inline-flex; }
:root[data-ui="mobile"] .note-panel-title h3 { font-size: var(--t-md); }
:root[data-ui="mobile"] .note-panel-body { overflow: visible; padding: var(--s-2) var(--s-3) var(--s-4); }
:root[data-ui="mobile"] .note-row { border-bottom-color: var(--kreska-wlos); }
:root[data-ui="mobile"] .note-row:hover { background: transparent; }
:root[data-ui="mobile"] #content .note-row-main { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 60px; }
:root[data-ui="mobile"] .note-row-title { flex: none; width: 100%; font-size: var(--t-md); }
:root[data-ui="mobile"] .note-row-sub { font-size: var(--t-sm); }
:root[data-ui="mobile"] .note-panel-body > .note-new-btn { display: none; }
:root[data-ui="mobile"] .note-dz { font-size: var(--t-xs); }
/* Notatka: tytuł 20 px, edytor z „Aa” (formatowanie schowane), pasek działań: Przypomnienie na całą szerokość, pod nim
   „← Notatki” | „Zapisz” — przyklejony nad dolnym paskiem zakładek. */
/* #content: ogólna reguła pól telefonu (ramka, tło) ma wagę (0,7,1) — tytuł notatki zostaje bez ramki jak na komputerze. */
:root[data-ui="mobile"] #content .note-editor2 .note-editor2-head > input.note-editor2-title { min-height: 44px; padding: var(--s-1) 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: var(--t-lg); }
:root[data-ui="mobile"] .note-editor2 .rich-editor { min-height: 220px; border-radius: var(--r); background: var(--surface); }
:root[data-ui="mobile"] #content .note-editor2 .rich-toolbar { flex-wrap: wrap; gap: var(--s-1); overflow: visible; padding: var(--s-1); -webkit-mask-image: none; mask-image: none; }
:root[data-ui="mobile"] #content .note-editor2 .rich-toolbar :is(button, .rich-image-button) { min-width: 44px; height: 44px; border-radius: var(--r-sm); }
:root[data-ui="mobile"] #content .note-editor2 .rich-toolbar :is(select, input.combo-input) { height: 44px; min-height: 44px; }
:root[data-ui="mobile"] .note-editor2 .rich-toolbar .rich-aa-toggle { display: inline-flex; font-weight: var(--w-strong); }
:root[data-ui="mobile"] .note-editor2 .rich-editor:not(.is-format-open) .rich-toolbar > :is([data-rich-command], [data-rich-font-size], [data-rich-image-size], .rich-image-button, [data-action="rich-checklist"], .rich-emoji-wrap, .rich-authors-toggle, .combo:has([data-rich-font-size], [data-rich-image-size])) { display: none; }
:root[data-ui="mobile"] .note-editor2 .task-rich-notes .rich-editable { min-height: 160px; }
/* Ekran notatki nie ma „+”, więc treść kończy się tuż nad paskiem zakładek, a pasek działań przykleja się do jej dołu. */
:root[data-ui="mobile"] .content:has(.note-editor2) { padding-bottom: var(--tabbar-h); }
:root[data-ui="mobile"] .note-editor2-actions { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); padding: var(--s-2) var(--s-3); border-top-color: var(--kreska-wlos); }
:root[data-ui="mobile"] .note-editor2-actions > .spacer { display: none; }
:root[data-ui="mobile"] .note-editor2-actions > .button { width: 100%; min-height: 44px; padding-inline: var(--s-4); }   /* wzór: 44 px, odstęp 0 16 px */
:root[data-ui="mobile"] .note-editor2 label.note-editor2-sub { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }   /* wzór: „Tytuł notatki” 12 px / 600 */
:root[data-ui="mobile"] .note-editor2-actions > .note-remind-btn { grid-column: 1 / -1; }
/* Udostępnianie: przełącznik pod osobą, na całą szerokość, trzy równe pola. */
:root[data-ui="mobile"] .note-share-row { flex-wrap: wrap; gap: var(--s-2); border-bottom-color: var(--kreska-wlos); }
:root[data-ui="mobile"] .note-share-who { flex-basis: 100%; }
:root[data-ui="mobile"] .note-share-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
:root[data-ui="mobile"] .note-share-seg button { min-width: 0; height: 44px; }
:root[data-ui="mobile"] .note-share-back { min-height: 44px; }
/* --- Telefon poziomo (844 × 390): jeden ekran naraz jak pionowo, zwarty nagłówek; w edycji notatki znikają nagłówek tematu,
   podpis „Tytuł notatki” i Dziennik, a pasek działań wraca do jednego rzędu (Przypomnienie · ← Notatki · Zapisz). --- */
/* v15 b19 (ZN3): lista tematów w poziomie jak we wzorze — biała karta od krawędzi do krawędzi, nagłówek 52 px z kreską, wiersze jak na komputerze. */
:root[data-ui="mobile"][data-telefon-poziomo] .content:has(.zn-notes[data-ekran="tematy"]) { padding: 0; background: var(--surface); }
:root[data-ui="mobile"][data-telefon-poziomo] .zn-notes[data-ekran="tematy"] .notes2-head { min-height: 52px; padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
:root[data-ui="mobile"][data-telefon-poziomo] .zn-notes[data-ekran="tematy"] .notes2-body { padding: var(--s-2); }
:root[data-ui="mobile"][data-telefon-poziomo] .notes2-topics { gap: 2px; border-radius: 0; background: transparent; }
:root[data-ui="mobile"][data-telefon-poziomo] .note-topic-row { border-radius: var(--r-sm); }
:root[data-ui="mobile"][data-telefon-poziomo] .note-topic-row + .note-topic-row { border-top: 0; }
:root[data-ui="mobile"][data-telefon-poziomo] .note-topic-main { min-height: 56px; padding: var(--s-2) var(--s-3); }
:root[data-ui="mobile"][data-telefon-poziomo] .note-topic-name { font-size: var(--t-base); }
:root[data-ui="mobile"][data-telefon-poziomo] .note-topic-sub { font-size: var(--t-xs); }
:root[data-ui="mobile"][data-telefon-poziomo] .notes2-add { padding: var(--s-2) var(--s-1) var(--s-1); }
:root[data-ui="mobile"][data-telefon-poziomo] #content .notes2-add > .button { justify-content: center; height: 44px; background: var(--accent-soft); }
:root[data-ui="mobile"][data-telefon-poziomo] .note-panel-head { min-height: 52px; }
:root[data-ui="mobile"][data-telefon-poziomo] .note-topic-panel.is-edycja .note-panel-head,
:root[data-ui="mobile"][data-telefon-poziomo] .note-editor2-sub,
:root[data-ui="mobile"][data-telefon-poziomo] .note-editor2 .note-dz { display: none; }
:root[data-ui="mobile"][data-telefon-poziomo] .note-editor2-audit { margin: var(--s-1) 0 var(--s-2); }
:root[data-ui="mobile"][data-telefon-poziomo] .note-editor2 .rich-editor { min-height: 180px; }
:root[data-ui="mobile"][data-telefon-poziomo] .note-editor2 .task-rich-notes .rich-editable { min-height: 110px; }
:root[data-ui="mobile"][data-telefon-poziomo] .note-editor2-actions { display: flex; padding: var(--s-1) var(--s-4) var(--s-2); }
:root[data-ui="mobile"][data-telefon-poziomo] .zn-notes[data-ekran="temat"] .note-panel-body { padding: var(--s-2) var(--s-4) var(--s-3); }   /* wzór: boki 16 px */
:root[data-ui="mobile"][data-telefon-poziomo] .note-editor2-actions > .spacer { display: block; }
:root[data-ui="mobile"][data-telefon-poziomo] .note-editor2-actions > .button { width: auto; min-height: 44px; }
/* ZK3 (v15 b19): tekst notatki w spoczynku jak we wzorze (14 px); 16 px wraca tylko w polu, w którym się pisze — iPhone nie powiększa
   wtedy strony (ten sam sposób co lista zakresu osi w 7-zadania-tablica-kalendarz.css; kanon telefonu czyta --pole-dotyk). */
:root[data-ui="mobile"] .note-editor2 [contenteditable="true"]:not(:focus) { --pole-dotyk: var(--t-base); }