/* ==========================================================================
   Uklad aplikacji. Wszystko na tokenach z master-styl.css: zadnych
   literalow koloru, zadnych wlasnych zaokraglen. Widoki maja czytac sie
   jak jedna aplikacja, nie jak zbior stron.
   ========================================================================== */

body{ margin:0; background:var(--papier); color:var(--atrament);
      font:var(--tekst-wartosc); }

.a-uklad{ display:grid; grid-template-columns:calc(var(--u) * 64) 1fr;
          min-height:100vh; }
/* atrybut hidden musi wygrac z display:grid klasy, inaczej ukryta powloka
   dalej zajmuje cala wysokosc i spycha logowanie pod ekran */
.a-uklad[hidden], .a-logowanie[hidden]{ display:none; }
/* strona nigdy nie przewija sie w poziomie; jednopikselowe zaokraglenie
   siatki nie ma prawa dolozyc paska */
.a-uklad{ overflow-x:clip; }
.a-tresc{ min-inline-size:0; display:grid; grid-template-rows:auto 1fr;
          align-content:start; }
.a-srodek{ padding:var(--odstep-6); display:grid; gap:var(--odstep-4);
           align-content:start; max-inline-size:1180px; inline-size:100%;
           box-sizing:border-box; }
.a-naglowkowa{ display:grid; gap:var(--odstep-3); }
@media (max-width: 900px){
  .a-uklad{ grid-template-columns:1fr; }
  .a-menu-kolumna{ display:none; }
}

/* --- logowanie ---------------------------------------------------------- */
.a-logowanie{ min-height:100vh; display:grid; place-items:center;
              padding:var(--odstep-6); box-sizing:border-box; }
.a-karta-logowania{ inline-size:min(100%, 420px); display:grid; gap:var(--odstep-4);
   padding:var(--odstep-6); background:var(--plyta); border:1px solid var(--kreska);
   border-radius:var(--promien-2); }
.a-karta-logowania h1{ margin:0; font:var(--tekst-naglowek); color:var(--atrament-2); text-wrap:balance; }
.a-karta-logowania .a-pod{ margin:0; font:var(--tekst-pomoc); color:var(--atrament-2); }
.a-rozdzielacz{ display:flex; align-items:center; gap:var(--odstep-3);
   font:var(--tekst-pomoc); color:var(--atrament-3); }
.a-rozdzielacz::before,.a-rozdzielacz::after{ content:""; flex:1; block-size:1px;
   background:var(--kreska); }
.a-blad{ font:var(--tekst-pomoc); color:var(--alarm); }

/* --- listy: zadania, elementy ------------------------------------------ */
.a-wiersze{ display:grid; border:1px solid var(--kreska); border-radius:var(--promien-2);
   background:var(--plyta); overflow:hidden; }
.a-wiersz{ display:grid; grid-template-columns:1fr auto; gap:var(--odstep-3);
   align-items:center; padding:var(--odstep-3) var(--odstep-4);
   border-block-end:1px solid var(--kreska); text-align:start;
   background:transparent; color:inherit; font:inherit; border-inline:0; border-block-start:0;
   cursor:pointer; inline-size:100%; box-sizing:border-box;
   transition:background-color .15s ease-out; }
.a-wiersz:last-child{ border-block-end:0; }
.a-wiersz:hover{ background:var(--marka-mgla); }
.a-wiersz:focus-visible{ outline:2px solid var(--marka); outline-offset:-2px; }
.a-wiersz-glowne{ display:grid; gap:2px; min-inline-size:0; }
.a-wiersz-tytul{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-wiersz-opis{ font:var(--tekst-pomoc); color:var(--atrament-2); overflow:hidden;
   text-overflow:ellipsis; white-space:nowrap; }
.a-wiersz-bok{ display:flex; gap:var(--odstep-2); align-items:center; flex-wrap:wrap;
   justify-content:end; }
.a-znak{ font:var(--tekst-etykieta); padding:2px var(--odstep-2);
   border-radius:var(--promien-1); border:1px solid var(--kreska); color:var(--atrament-2);
   white-space:nowrap; }
.a-znak[data-ton="alarm"]{ border-color:var(--alarm); color:var(--alarm); }
.a-znak[data-ton="marka"]{ border-color:var(--marka); color:var(--marka-ciemna); }
.a-pusto{ padding:var(--odstep-6); text-align:center; color:var(--atrament-2);
   font:var(--tekst-pomoc); }
.a-wiecej{ display:flex; justify-content:center; padding:var(--odstep-3); }

/* --- naglowek listy ------------------------------------------------------ */
.a-opis{ margin:0; font:var(--tekst-pomoc); color:var(--atrament-2); max-inline-size:74ch; }

/* --- mapa procesu (przeniesiona z mapa.html) ---------------------------- */
.m-plansza{ display:flex; align-items:stretch; gap:0; overflow-x:auto;
            padding-block:var(--odstep-4); }
.m-krok{ flex:none; inline-size:calc(var(--u) * 44); display:grid; gap:var(--odstep-2);
         align-content:start; padding:var(--odstep-3); background:var(--plyta);
         border:1px solid var(--kreska); border-radius:var(--promien-2); }
.m-krok[data-stan="biezacy"]{ border-color:var(--marka); border-width:2px;
         box-shadow:var(--cien-lista); }
.m-krok[data-stan="odwiedzony"]{ background:var(--marka-mgla); border-color:var(--marka); }
.m-krok[data-stan="przyszly"]{ opacity:.72; border-style:dashed; }
.m-krok-nazwa{ font:var(--tekst-wartosc); font-weight:600; }
.m-krok-znacznik{ font:var(--tekst-pomoc); color:var(--atrament-2); }
.m-krok[data-stan="biezacy"] .m-krok-znacznik{ color:var(--marka-ciemna); font-weight:600; }
.m-lacznik{ flex:none; inline-size:calc(var(--u) * 10); display:grid; place-items:center;
            color:var(--kreska-2); }
.m-lacznik svg{ inline-size:100%; block-size:calc(var(--u) * 6); }
.m-lacznik[data-przebyty="tak"]{ color:var(--marka); }
.m-tabela{ inline-size:100%; border-collapse:collapse; font:var(--tekst-pomoc); }
.m-tabela th,.m-tabela td{ text-align:start; padding:var(--odstep-2);
           border-block-end:1px solid var(--kreska); vertical-align:top; }
.m-tabela th{ color:var(--atrament-2); font:var(--tekst-etykieta); }
.m-niedostepna{ color:var(--atrament-3); }
.a-przewijane{ overflow-x:auto; }

@media (prefers-reduced-motion: reduce){
  .a-wiersz{ transition:none; }
}

/* --- gorny rzad: pasek widoku i profil ---------------------------------- */
.a-gora{ display:flex; align-items:stretch; border-block-end:1px solid var(--kreska);
   background:var(--plyta); }
.a-gora-pasek{ flex:1; min-inline-size:0; border-block-end:0; }
.a-profil{ position:relative; display:flex; align-items:center; padding-inline:var(--odstep-3);
   border-inline-start:1px solid var(--kreska); }
.a-profil-guzik{ display:flex; align-items:center; gap:var(--odstep-2); padding:var(--odstep-2);
   background:transparent; border:0; border-radius:var(--promien-2); color:var(--atrament);
   font:var(--tekst-wartosc); cursor:pointer; min-block-size:44px; }
.a-profil-guzik:hover{ background:var(--plyta-2); }
.a-profil-guzik:focus-visible{ outline:2px solid var(--marka); outline-offset:2px; }
.a-profil-inicjaly{ inline-size:32px; block-size:32px; border-radius:var(--promien-pelny);
   display:grid; place-items:center; background:var(--marka); color:var(--plyta);
   font:var(--tekst-etykieta); font-weight:700; letter-spacing:.02em; }
.a-profil-nazwa{ white-space:nowrap; }
@media (max-width: 900px){ .a-profil-nazwa{ display:none; } }
/* ta sama pulapka co przy powloce: display:grid klasy wygrywa z [hidden] */
.a-profil-menu[hidden]{ display:none; }
.a-profil-menu{ position:absolute; inset-block-start:calc(100% - var(--odstep-1));
   inset-inline-end:var(--odstep-3); min-inline-size:260px; z-index:20;
   background:var(--plyta); border:1px solid var(--kreska); border-radius:var(--promien-2);
   box-shadow:var(--cien-okno); display:grid; }
.a-profil-kim{ padding:var(--odstep-3) var(--odstep-4); border-block-end:1px solid var(--kreska); }
.a-profil-kim-nazwa{ font-weight:600; }
.a-profil-kim-login{ font:var(--tekst-pomoc); color:var(--atrament-2); overflow:hidden;
   text-overflow:ellipsis; }
.a-profil-sekcja{ padding:var(--odstep-3) var(--odstep-4); display:grid; gap:var(--odstep-2); }
.a-profil-sekcja + .a-profil-sekcja{ border-block-start:1px solid var(--kreska); }
.a-profil-etykieta{ font:var(--tekst-etykieta); color:var(--atrament-2); }
.a-segmenty{ display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--kreska-2);
   border-radius:var(--promien-1); overflow:hidden; }
.a-segment{ padding:var(--odstep-2); background:var(--plyta); border:0; color:var(--atrament);
   font:var(--tekst-pomoc); cursor:pointer; min-block-size:36px; }
.a-segment + .a-segment{ border-inline-start:1px solid var(--kreska-2); }
.a-segment:hover{ background:var(--plyta-2); }
.a-segment[aria-checked="true"]{ background:var(--marka); color:var(--plyta); font-weight:600; }
.a-segment:focus-visible{ outline:2px solid var(--marka); outline-offset:-2px; }

/* --- lista procesu jako tabela ------------------------------------------ */
.a-widoki{ inline-size:fit-content; margin-block-end:var(--odstep-2); }
.a-widoki .a-segment{ padding-inline:var(--odstep-4); }
.a-widoki .a-segment[aria-selected="true"]{ background:var(--marka); color:var(--plyta); font-weight:600; }
.a-lista{ border:1px solid var(--kreska); border-radius:var(--promien-2); background:var(--plyta); }
.a-tabela{ font:var(--tekst-wartosc); }
.a-tabela th{ white-space:nowrap; background:var(--plyta-2); }
.a-tabela td, .a-tabela th{ padding:var(--odstep-2) var(--odstep-3); }
.a-tabela [data-wyrownanie="do-prawej"]{ text-align:end; font:var(--tekst-liczba); }
.a-tabela-wiersz{ cursor:pointer; transition:background-color .15s ease-out; }
.a-tabela-wiersz:hover{ background:var(--marka-mgla); }
.a-tabela-wiersz:focus-visible{ outline:2px solid var(--marka); outline-offset:-2px; }
.a-tabela-sygnatura{ font:var(--tekst-liczba); color:var(--atrament-2); white-space:nowrap; }
.a-tabela-cicho{ color:var(--atrament-2); white-space:nowrap; font:var(--tekst-pomoc); }
.a-komentarze{ display:grid; gap:var(--odstep-3); }
.a-podglad-wersji{ margin-block-start:var(--odstep-4); }
.a-podglad-naglowek{ font:var(--tekst-etykieta); color:var(--atrament-2); margin-block:var(--odstep-3) var(--odstep-2); }
@media (prefers-reduced-motion: reduce){ .a-tabela-wiersz{ transition:none; } }