/* shared/wyglad.css — JEDEN plik kolorów i menu dla wszystkich stron LF (nowy wygląd, etap 1).
 *
 * Plan: LISTFORGE/SAAS/PLAN_nowy_wyglad.md (§2 model układu, §6 bramka odbioru, §7 kolory-DANE).
 * Tokeny 1:1 z SHARED/UI_DESIGN_SYSTEM.md — jasny domyślny w :root, ciemny pod [data-theme="dark"]
 * (pamięć `lf_theme`, ustawia ją shared/menu.js przed pierwszym malowaniem). Wartości zmieniasz
 * TAM, nie tu — parytet pilnuje tests/test_saas_nowy_wyglad.py (test_parytet_tokenow_z_ssot).
 *
 * Czego tu NIE ma (świadomie): szachownicy przezroczystości (`--checker*` = DANE, nie wygląd —
 * w jasnym motywie białe ubranie by zniknęło), palet teł i barwienia zdjęć, kolorów tożsamości
 * ogłoszenia. Typografii i zaokrągleń stron (etap 1 = kolory + menu).
 */

:root {
  --bg:        #E7EBF2;
  --surface-1: #FFFFFF;
  --surface-2: #F5F7FB;
  --surface-3: #EAEEF5;
  --text:      #141926;
  --muted:     #5A6474;
  --faint:     #8791A2;
  --border:    rgba(18,26,48,.11);
  --border-2:  rgba(18,26,48,.22);
  --inset:     rgba(255,255,255,.85);
  --accent:      #2F6BEB;
  --accent-hover:#265FD6;
  --on-accent:   #FFFFFF;
  --accent-soft: rgba(47,107,235,.11);
  --accent-glow: rgba(47,107,235,.26);
  --green:  #0FA65A;
  --danger: #DE3B3B;
  --accent-text: #2356C4;
  --green-text:  #08703D;
  --danger-text: #B82626;
  --on-danger:   #000000;
  --warn-text:   #876208;
  --shadow: 0 1px 2px rgba(18,26,48,.06), 0 10px 26px rgba(18,26,48,.09);
  color-scheme: light;

  /* Układ z menu (plan §2 „JEDEN model układu”): właścicielem wysokości jest <body>;
     potomek liczony dotąd od ekranu bierze --wys-ekranu ALBO 100% rodzica — nigdy oba.
     --menu-h = 0 tam, gdzie menu się NIE rysuje (logowanie, ramka wtyczki, ?embed=) — inaczej
     boczne panele i kotwice odejmowałyby wysokość menu, którego nie ma. Wartość niżej, pod .lf-z-menu. */
  --menu-h: 0px;
  --wys-ekranu: calc(100dvh - var(--menu-h));

  /* ── Warstwa zgodności: dawne nazwy wspólne dla stron (sonda 2026-09-30) → tokeny. ──
     Nazwy SSOT (--bg --text --accent --border --green) strona NIE definiuje sama — inaczej
     jej wartość przykryje token. Kolor NAPISU z akcentu/czerwieni/zieleni = osobne tokeny *-text. */
  --bg2:          var(--surface-1);
  --bg3:          var(--surface-2);
  --bg-panel:     var(--surface-1);
  --bg-hover:     var(--surface-3);
  --text-muted:   var(--muted);
  --text-dim:     var(--muted);
  --text-2:       var(--muted);
  --border-light: var(--border-2);
  --red:          var(--danger-text);
  --orange:       var(--warn-text);
}

:root[data-theme="dark"] {
  --bg:        #0B0B0E;
  --surface-1: #16171C;
  --surface-2: #1E2027;
  --surface-3: #282A33;
  --text:      #F4F5F7;
  --muted:     #9298A4;
  --faint:     #686D78;
  --border:    rgba(255,255,255,.10);
  --border-2:  rgba(255,255,255,.20);
  --inset:     rgba(255,255,255,.07);
  --accent:      #4C9DFF;
  --accent-hover:#6BB0FF;
  --on-accent:   #0B0B0E;
  --accent-soft: rgba(76,157,255,.16);
  --accent-glow: rgba(76,157,255,.32);
  --green:  #3FCF7F;
  --danger: #FF6B6B;
  --accent-text: #6BB0FF;
  --green-text:  #3FCF7F;
  --danger-text: #FF6B6B;
  --on-danger:   #0B0B0E;
  --warn-text:   #BD8A0B;
  --shadow: 0 2px 6px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* Podpowiedź w polu (placeholder): domyślna szarość przeglądarki #757575 daje 3,5–4,3:1 na naszych
   powierzchniach (bramka 2026-10-01) — --muted ma ≥ 4,93 na każdej. SSOT: --faint NIGDY na podpowiedzi. */
::placeholder { color: var(--muted); opacity: 1; }

/* ── Miejsce na menu: body jest właścicielem wysokości (box-sizing: border-box — padding mieści się
   w min-height/height 100vh, nie dokłada przewijania). Strona z własnym odstępem u góry podaje go
   zmienną --strona-odstep-gora, bo ta reguła nadpisuje padding-top z `body { padding: … }`. ── */
html.lf-z-menu {
  --menu-h: calc(56px + env(safe-area-inset-top, 0px));
  scroll-padding-top: calc(var(--menu-h) + 12px);
}
html.lf-z-menu body {
  padding-top: calc(var(--menu-h) + var(--strona-odstep-gora, 0px));
  box-sizing: border-box;
}

/* ── Menu (shared/menu.js). Klasy z przedrostkiem lf-m-, żeby nie zderzyć się z klasami stron.
   ⚠️ Kolor pozycji selektorem `#lf-menu .lf-m-link` — w prototypie `#lf-menu a { color: inherit }`
   przebił `.lf-m-link` (waga id) i pozycje były ciemne zamiast przygaszonych. ── */
#lf-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--menu-h); box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-1); color: var(--text);
  border-bottom: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--inset);
  font: 400 14px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Otwarta lista menu (na telefonie cały ekran) NAD paskami i panelami stron (z-index 100–1000: zaznaczenie Importu,
   Galerii, Przepisywania) — inaczej pasek zaznaczenia leży na menu i dalej przyjmuje „Usuń” (panel P5, Sol). Pod oknami
   (9000+), paskiem postępu (9950), powiadomieniami i banerem dysku. Zamknięte menu zostaje 50. Studio ustawia
   --menu-z-otwarte: 50 — jego kontrakt (bg-flow R12 d) trzyma menu POD szufladą i oknami Photo Match zawsze. */
#lf-menu:has(details[open]) { z-index: var(--menu-z-otwarte, 8000); }
#lf-menu * { box-sizing: border-box; }
#lf-menu a { text-decoration: none; }
#lf-menu .lf-m-logo {
  display: flex; align-items: center; gap: 9px; margin-right: 18px; flex: none;
  font-weight: 700; letter-spacing: -.02em; font-size: 16px; color: var(--text);
}
#lf-menu .lf-m-znak { display: block; width: 24px; height: 24px; flex: none; }
#lf-menu .lf-m-poz { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
#lf-menu .lf-m-prawa { display: flex; align-items: center; gap: 2px; flex: none; }
#lf-menu .lf-m-link {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; margin: 0;
  border-radius: 9px; border: 0; background: none; cursor: pointer; list-style: none;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap;
}
#lf-menu .lf-m-link:hover { color: var(--text); background: var(--surface-2); }
#lf-menu .lf-m-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#lf-menu .lf-m-link.aktywny { color: var(--text); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
#lf-menu .lf-m-grupa { position: relative; }
#lf-menu .lf-m-grupa > summary::-webkit-details-marker { display: none; }
#lf-menu .lf-m-grupa > summary::after { content: "▾"; font-size: 11px; opacity: .7; }
#lf-menu .lf-m-lista {
  position: absolute; top: 42px; left: 0; min-width: 270px; padding: 6px; z-index: 1;
  border-radius: 14px; background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow);
}
#lf-menu .lf-m-prawa .lf-m-lista { left: auto; right: 0; }
#lf-menu .lf-m-lista a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--text); }
#lf-menu .lf-m-lista a:hover, #lf-menu .lf-m-lista a.aktywny { background: var(--surface-3); }
#lf-menu .lf-m-lista b { display: block; font-size: 14px; font-weight: 600; }
#lf-menu .lf-m-lista span { display: block; font-size: 12.5px; color: var(--muted); }
#lf-menu .lf-m-ikona { display: inline-flex; }
#lf-menu .lf-m-slonce { display: none; }
:root[data-theme="dark"] #lf-menu .lf-m-slonce { display: inline; }
:root[data-theme="dark"] #lf-menu .lf-m-ksiezyc { display: none; }

/* telefon: menu chowa się pod przyciskiem „Menu” (jak makieta KON-04) */
#lf-menu .lf-m-telefon { display: none; margin-left: auto; }
#lf-menu .lf-m-telefon > summary {
  list-style: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-3);
  color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer;
}
#lf-menu .lf-m-telefon > summary::-webkit-details-marker { display: none; }
#lf-menu .lf-m-telefon-lista {
  position: fixed; top: var(--menu-h); left: 0; right: 0; bottom: 0; overflow-y: auto;
  padding: 12px 16px 24px; background: var(--bg);
}
#lf-menu .lf-m-telefon-lista a, #lf-menu .lf-m-telefon-lista button {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 12px; border-radius: 12px; border: 0; border-bottom: 1px solid var(--border);
  background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer;
}
#lf-menu .lf-m-telefon-lista a.aktywny { background: var(--accent-soft); }
#lf-menu .lf-m-telefon-lista small { font-weight: 400; color: var(--muted); font-size: 13px; }
/* Podpis bieżącej pozycji na podświetleniu: --muted na --accent-soft nad --bg = 4,38:1 w jasnym (skaner P4,
   2026-10-02 — dotąd niezmierzone, bo tylko Start miał spis „menu telefonu”, a pozycja Start nie ma podpisu). */
#lf-menu .lf-m-telefon-lista a.aktywny small { color: var(--text); }
#lf-menu .lf-m-eyebrow {
  display: block; padding: 18px 12px 6px; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 860px) {
  #lf-menu .lf-m-poz, #lf-menu .lf-m-prawa { display: none; }
  #lf-menu .lf-m-telefon { display: block; }
}
/* Cele menu ≥ 44 px pod palcem na KAŻDEJ stronie (P5, plan §4f: dotąd tylko Studio) — tylko dotyk,
   więc myszą menu zostaje 36–40 px i układ komputera się nie przesuwa. */
@media (pointer: coarse), (hover: none) {
  #lf-menu .lf-m-link, #lf-menu .lf-m-logo, #lf-menu .lf-m-telefon > summary { min-height: 44px; min-width: 44px; justify-content: center; }
}