/* ==========================================================================
   Master of Managers - demo próbne: ekran logowania (index.html) w stylu
   mapy MoM - karta-projekcja w kratkę nad czarną platformą z kopułą
   (wariant 1 z 02.11). Ładowany PO platforma.css i nadpisuje go tylko pod
   klasą .lm na <body>, więc monitoring.html wygląda jak dawniej.

   Styl mapy: komiksowy wektor - gruby czarny kontur, płaskie wypełnienie,
   jeden ciemniejszy ton jako cień z twardą krawędzią; kule z cieniem od
   prawej i blikiem od lewej; szare tło z fakturą papieru; pismo Shantell
   Sans, napisy Georgia. Bez rozmyć i bez ciężkich animacji: cienie są
   twarde (bez promienia rozmycia), ruch tylko przez transform/opacity.
   Zawsze jasny motyw - mapa nie ma nocnej wersji.
   ========================================================================== */

/* --- kolory i pismo ------------------------------------------------------- */
.lm{
  --tusz:#0a0a08;
  --tusz-2:#2b2924;            /* tekst drugorzędny: 13:1 na papierze, 8:1 na szarym tle */
  --papier:#fbfaf7;
  --papier-2:#efebe1;
  --szary:#c9cbcf;
  --zolty:#f2c230;     --zolty-cien:#c99a12;    --zolty-jasny:#fbe7a1;
  --czerwony:#d93a24;  --czerwony-cien:#a8281a; --czerwony-jasny:#f6c3b9;
  --zielony:#2e9c4a;   --zielony-cien:#1f7034;  --zielony-jasny:#bfe3c6;
  --niebieski:#2f6fd0; --niebieski-cien:#1f4fa8;--niebieski-jasny:#c4d8f5;
  --ekran:#eaf6fc;     --ekran-kratka:#c3e4f4;  --ekran-kreska:#3fb7e0;
  --f-pismo:"Shantell Sans",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --f-napis:Georgia,"Times New Roman",serif;
  --gruby:3px;                  /* kontur tuszem */

  /* nadpisane zmienne platforma.css - stały jasny motyw */
  --bg:var(--papier); --bg-soft:var(--papier-2); --bg-el:#ffffff; --bg-el-2:var(--papier-2);
  --line:rgba(10,10,8,.28); --obwodka-mocna:var(--tusz);
  --text:var(--tusz); --text-2:var(--tusz-2); --muted:var(--tusz-2); --na-akcencie:#ffffff;
  --ok:#17582b;  --ok-tlo:#d7f0dc;
  --uwaga:#5c3d00; --uwaga-tlo:#ffe58a;
  --zle:#8f1c14; --zle-tlo:#fde1dc;
  color-scheme:light;
}
html:has(body.lm){background:var(--szary,#c9cbcf);color-scheme:light}

/* szare tło z fakturą papieru (ta sama turbulencja co .scena w app/styl.css,
   ale bez mieszania warstw - jedna kafelka 240 px, rysowana raz) */
body.lm{
  font-family:var(--f-pismo);color:var(--tusz);line-height:1.45;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .11' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 -.16'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(60% 55% at 50% 38%,#d9dbde 0,rgba(217,219,222,0) 75%),
    var(--szary);
  background-attachment:scroll;
}
.lm :focus-visible{outline:3px solid var(--niebieski);outline-offset:3px;border-radius:8px}

/* --- układ: najpierw telefon (390 px) ------------------------------------
   Pierwszy ekran (.lm-ekran) to siatka na całą wysokość okna: znak, karta,
   platforma, stopka. Rząd platformy bierze to, co zostaje (najmniej 120 px,
   najwięcej 300 px), a rysunek skaluje się do niego - dzięki temu formularz,
   promień i cała platforma mieszczą się bez przewijania także na 1366×768.
   Karteczka trybu próbnego jest pod pierwszym ekranem (na szerokim w rogu). */
.lm .lm-scena{
  position:relative;overflow:hidden;min-height:100svh;display:block;
  padding:max(14px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
}
.lm .lm-ekran{
  width:100%;max-width:410px;margin:0 auto;
  height:calc(100svh - max(14px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)));
  min-height:min-content;      /* gdy karta urośnie (komunikat, limit urządzeń) - strona się przewija, nic nie nachodzi */
  display:grid;grid-template-rows:auto auto minmax(120px,300px) auto;justify-items:center;align-content:center;row-gap:14px;
}
.lm .atrapa{margin:22px auto 0}
@media (min-width:1000px){
  .lm .lm-scena{padding:16px 24px}
  .lm .lm-ekran{height:calc(100svh - 32px);grid-template-rows:auto minmax(120px,300px);row-gap:0}
}

/* --- znak Master of Managers ---------------------------------------------- */
.lm .znak{gap:12px;align-self:center}
.lm .znak__logo{width:56px;height:56px;border-radius:50%;border:var(--gruby) solid var(--tusz);background:var(--papier);
  box-shadow:3px 3px 0 var(--tusz)}
.lm .znak__napis{font:700 1.4rem/1.05 var(--f-napis);color:var(--tusz);letter-spacing:.005em}
.lm .znak__pod{font:600 .78rem/1.3 var(--f-pismo);letter-spacing:.14em;text-transform:uppercase;color:var(--tusz-2);margin-top:3px}
@media (min-width:1000px){
  .lm .znak{position:absolute;top:20px;left:24px}
  .lm .znak__logo{width:72px;height:72px}
  .lm .znak__napis{font-size:1.75rem}
}

/* --- karta (formularz) ---------------------------------------------------- */
.lm .karta{
  position:relative;width:100%;max-width:410px;
  background:var(--papier);border:var(--gruby) solid var(--tusz);border-radius:20px;
  padding:22px 18px 20px;box-shadow:6px 6px 0 var(--tusz);
}
@media (min-width:480px){.lm .karta{padding:24px 28px 20px}}
.lm .lm-karta{
  z-index:1;
  background-color:var(--ekran);
  background-image:linear-gradient(var(--ekran-kratka) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--ekran-kratka) 1.5px,transparent 1.5px);
  background-size:22px 22px;background-position:-2px -2px;
  box-shadow:6px 6px 0 #1d6fa5;
}
.lm .lm-karta::before{   /* pasek "ekranu" projekcji u góry karty */
  content:"";position:absolute;left:18px;right:18px;top:-3px;height:7px;background:var(--ekran-kreska);
  border:var(--gruby) solid var(--tusz);border-top:0;border-radius:0 0 8px 8px;
}
.lm .karta h1{font:700 1.5rem/1.15 var(--f-pismo);letter-spacing:-.01em;margin-bottom:6px}
.lm .karta .podtytul{color:var(--tusz-2);font-size:.98rem;margin-bottom:14px}

/* zakładki - dwie pigułki w tuszu, wybrana żółta jak kula środka mapy */
.lm .zakladki{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;background:none;border-radius:0;margin-bottom:16px}
.lm .zakladki button{
  min-height:48px;padding:8px 10px;border:2.5px solid var(--tusz);border-radius:999px;background:#fff;color:var(--tusz-2);
  font:600 .95rem/1.1 var(--f-pismo);cursor:pointer;box-shadow:none;transition:transform .12s,box-shadow .12s;
}
.lm .zakladki button[aria-selected="true"]{background:var(--zolty);color:var(--tusz);box-shadow:3px 3px 0 var(--tusz)}

/* pola - duże pod kciuk; 17 px, żeby iPhone nie powiększał strony */
.lm .pole{gap:4px;margin-bottom:12px}
.lm .pole label{font:600 .98rem var(--f-pismo);color:var(--tusz)}
.lm .pole input{
  min-height:54px;padding:12px 14px;font:400 1.0625rem var(--f-pismo);color:var(--tusz);
  background:#fff;border:2.5px solid var(--tusz);border-radius:14px;
  scroll-margin-top:90px;scroll-margin-bottom:150px;   /* przy przewinięciu do pola zostaje miejsce na przycisk nad klawiaturą */
}
.lm .pole input:focus{outline:none;border-color:var(--tusz);box-shadow:4px 4px 0 var(--niebieski)}
.lm .pole__haslo input{padding-right:92px}
.lm .pole__pokaz{right:6px;min-height:42px;min-width:72px;padding:6px 10px;border-radius:10px;
  font:600 .9rem var(--f-pismo);color:var(--tusz);text-decoration:underline;text-underline-offset:3px}
.lm .pole__podpowiedz{font-size:.88rem;color:var(--tusz-2)}

/* przyciski: żółta pigułka z twardym cieniem; wciśnięcie "dociska" ją do cienia */
.lm .przycisk{
  min-height:56px;padding:12px 18px;margin-top:4px;
  border:var(--gruby) solid var(--tusz);border-radius:999px;background:var(--zolty);color:var(--tusz);
  font:700 1.12rem/1.1 var(--f-pismo);box-shadow:4px 4px 0 var(--tusz);
  transition:transform .1s,box-shadow .1s;
}
.lm .przycisk:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tusz)}
.lm .przycisk[disabled]{opacity:1;background:var(--zolty-jasny)}
.lm .przycisk--jasny{background:#fff;color:var(--tusz);border-color:var(--tusz)}
.lm .przycisk--maly{min-height:42px;width:auto;padding:6px 14px;font-size:.95rem;box-shadow:2px 2px 0 var(--tusz);margin-top:0}
.lm .link{color:var(--tusz-2);font:600 .95rem var(--f-pismo);min-height:40px;text-decoration-thickness:2px}
.lm .stos{gap:12px}
.lm .miedzy{margin-top:8px}
.lm #widok-formularz .miedzy .link{min-height:36px}

/* komunikaty - ramka w tuszu, kolor tła mówi o rodzaju */
.lm .komunikat{border:2.5px solid var(--tusz);border-radius:14px;padding:10px 14px;font-size:.98rem;margin-bottom:16px}
.lm .komunikat--zle{background:var(--zle-tlo);color:var(--zle);border-color:var(--tusz)}
.lm .komunikat--ok{background:var(--ok-tlo);color:var(--ok);border-color:var(--tusz)}
.lm .komunikat--info{background:var(--niebieski-jasny);color:#10294f}

/* urządzenia */
.lm .urzadzenie{border:2.5px solid var(--tusz);border-radius:14px;background:#fff}
.lm .urzadzenie__nazwa{font-weight:600}
.lm .urzadzenie__kiedy{color:var(--tusz-2);font-size:.85rem}
.lm .znaczek{background:var(--zielony-jasny);color:#123f20;border:1.5px solid var(--tusz)}

/* tryb próbny - żółta karteczka */
.lm .atrapa{
  max-width:410px;font:400 .88rem/1.45 var(--f-pismo);color:var(--tusz);background:var(--uwaga-tlo);
  border:2.5px solid var(--tusz);border-radius:6px;padding:10px 14px;box-shadow:4px 4px 0 var(--zolty-cien);
  transform:rotate(-.8deg);
}
.lm .atrapa b{font-weight:700}
.lm .atrapa .link{color:var(--tusz);min-height:0}
.lm .atrapa code{font-size:.82rem}
@media (min-width:1000px){
  .lm .atrapa{position:absolute;top:20px;right:24px;width:280px;margin:0;transform:rotate(1.5deg);z-index:3}
}

.lm .stopka{font-size:.88rem;color:var(--tusz-2);max-width:410px;text-align:center}
@media (min-width:1000px){   /* stopka w lewym dolnym rogu - cała wysokość zostaje dla karty i platformy */
  .lm .stopka{position:absolute;left:24px;bottom:16px;max-width:260px;text-align:left}
}

/* --- platforma z kopułą i promień projekcji -------------------------------- */
.lm .lm-podest{display:block;overflow:visible;width:100%;height:100%;min-height:0;margin-top:-3px}
.lm .ludzik path,.lm .ludzik circle{fill:var(--papier);stroke:var(--tusz);stroke-width:46;stroke-linejoin:round}
.lm-promien{fill:#7fd0ee;opacity:.38;animation:lm-tetno 3.2s ease-in-out infinite alternate}
.lm-promien-brzeg{fill:none;stroke:#1d6fa5;stroke-width:2;stroke-dasharray:6 7}
@keyframes lm-tetno{from{opacity:.26}to{opacity:.46}}
.lm-cialo{fill:#1c1c24}
.lm-cialo-cien{fill:#07070a}
.lm-gora{fill:#141419}
.lm-siatka{fill:none;stroke:#f4f1e9;stroke-width:1.3;opacity:.85}
.lm-obrys{fill:none;stroke:var(--tusz);stroke-width:4;stroke-linejoin:round}
.lm-podloga{fill:#c9d63a;stroke:var(--tusz);stroke-width:2}
.lm-szklo{fill:#f7d2ad}
.lm-szklo-cien{fill:#e9b285}
.lm-blik{fill:none;stroke:#d9307e;stroke-width:5;stroke-linecap:round}
.lm-rant{fill:none;stroke:#d9307e;stroke-width:4;stroke-linecap:round}

@media (prefers-reduced-motion:reduce){
  .lm *,.lm *::before,.lm *::after{animation:none !important;transition:none !important}
}