/* Elementy domenowe. Kolor kalendarza nigdy nie jest tłem tekstu — tylko kropka
   albo pasek, inaczej paleta kalendarzy zaczyna udawać status. */

.dat-cal__dot {
    display: inline-block;
    flex: none;
    width: var(--cal-dot-size);
    height: var(--cal-dot-size);
    border-radius: var(--radius-full);
    background: var(--dat-cal);
}

.dat-cal__dot--lg { width: var(--cal-dot-size-lg); height: var(--cal-dot-size-lg); }
.dat-cal__dot--round { border-radius: var(--radius-full); }

.dat-member { display: flex; align-items: center; gap: var(--space-3); }
.dat-member__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dat-member__top { display: flex; align-items: center; gap: var(--space-2); }
.dat-member__name { font-size: var(--text-small-size); font-weight: var(--text-title-weight); }
.dat-member__mail { font-family: var(--font-mono); font-size: var(--text-overline-size); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; }

/* Kroj techniczny niesie adresy i wartosci, nie zdania. Regula stoi PO deklaracji
   bazowej, bo przy rownej specyficznosci rozstrzyga kolejnosc w pliku. */
.dat-member__mail--opis { font-family: var(--font-sans); }

/* Kalendarz z wyłączoną synchronizacją musi się różnić od włączonego — inaczej
   lista wygląda jednakowo i nikt nie zauważy, że czegoś nie widać na ekranie. */
/* Konto Google zagniezdzone w karcie domownika. Wlasne tlo naglowka oddziela
   poziom konta od poziomu osoby -- "Usun z gospodarstwa" odbiera czlowiekowi dostep,
   "Odepnij konto" odlacza zrodlo danych, a te dwie decyzje nie moga wygladac
   na rownorzedne. */
.dat-account { display: flex; flex-direction: column; border-top: var(--border-width) solid var(--color-border); }
.dat-account.is-reauth .dat-account__head { background: var(--color-warning-soft); }

.dat-account__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--card-padding);
    background: var(--color-surface-sunken);
}

.dat-account__mail {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--text-overline-size);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dat-account__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--card-padding);
    border-top: var(--border-width) solid var(--color-border);
}

.dat-member__actions { margin-left: auto; flex: none; }

/* Usuniecie domownika nie niszczy danych, tylko odbiera dostep -- nie musi
   krzyczec pelnym wariantem destrukcyjnym, wystarczy kolor. */
.dat-member__remove { color: var(--color-danger); }
.dat-member__remove:hover { background: var(--color-danger-soft); color: var(--color-danger); }

.dat-account__calendar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--card-padding);
    min-height: var(--row-height);
    border-top: var(--border-width) solid var(--color-border);
}

.dat-account__calendar-name { flex: 1; min-width: 0; font-size: var(--text-small-size); }
.dat-account__calendar.is-off .dat-account__calendar-name { color: var(--color-text-muted); text-decoration: line-through; }
.dat-account__calendar.is-off .dat-cal__dot { opacity: .35; }

/* Odpięcie konta jest odwracalne przez ponowne zalogowanie, więc nie musi
   krzyczeć mocniej niż akcja główna strony. */
.dat-account__unlink { color: var(--color-danger); }
.dat-account__unlink:hover { background: var(--color-danger-soft); color: var(--color-danger); }

/* Strona po dodaniu ekranu ma dwie robotki naraz: podac kod do przeniesienia
   na tablet i przeprowadzic przez ustawienie tabletu. Rozdzielone na kolumny,
   bo czyta sie je rownolegle — kod jest pod reka przy kazdym kroku instrukcji. */
.dat-setup { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.dat-setup__main { display: flex; flex-direction: column; gap: var(--space-4); }

/* W kolumnie bocznej na tytul zostaje po plakietce okolo stu pikseli, wiec lamal
   sie na dwie linie. Pusty element o pelnej szerokosci spycha plakietke do wlasnego
   wiersza — inaczej niz `flex-basis: 100%` na niej samej, po ktorym rozciagala sie
   na cala szerokosc i przestawala wygladac jak plakietka. */
.dat-setup__aside .dat-invite__head::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
.dat-setup__aside .dat-invite__expiry { order: 3; }
.dat-setup__aside { position: sticky; top: var(--topbar-height); display: flex; flex-direction: column; gap: var(--space-3); }

/* Kroki jako os: znacznik, kreska i tresc — ta sama forma co `dat-timeline`,
   bo to ten sam rodzaj tresci, tylko zamiast godzin sa numery. Numeracja niesie
   tu informacje: kolejnosci nie da sie zamienic. */
.dat-steps { display: flex; flex-direction: column; margin: 0; padding: var(--card-padding); list-style: none; counter-reset: krok; }
.dat-step { display: flex; gap: var(--space-3); counter-increment: krok; }
.dat-step__marker { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.dat-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent-soft-fg);
    font-size: var(--text-overline-size);
    font-weight: var(--text-overline-weight);
}
.dat-step__number::before { content: counter(krok); }

/* Kreska laczy znaczniki w ciag. Ostatni krok jej nie dostaje, bo nie ma juz
   do czego prowadzic. */
.dat-step__line { flex: 1; width: var(--cal-bar-width); border-radius: var(--radius-full); background: var(--color-border); }
.dat-step:last-child .dat-step__line { background: transparent; }

.dat-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-4); }
.dat-step:last-child .dat-step__body { padding-bottom: 0; }
.dat-step__title { font-size: var(--text-small-size); font-weight: var(--text-title-weight); }
.dat-step__text { font-size: var(--text-overline-size); line-height: var(--text-small-lh); color: var(--color-text-secondary); }
.dat-step__note { font-size: var(--text-overline-size); color: var(--color-text-muted); }

/* Strona odpytuje serwer co trzy sekundy i sama przeskoczy na liste ekranow.
   Bez tego wiersza czekanie wyglada jak bezczynnosc. */
.dat-setup__waiting { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-overline-size); color: var(--color-text-muted); }
.dat-setup__pulse {
    flex: none;
    width: var(--badge-dot);
    height: var(--badge-dot);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    animation: dat-puls var(--duration-puls) var(--ease-out) infinite;
}

@keyframes dat-puls {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
    .dat-setup__pulse { animation: none; }
}

/* Zaproszenie i kod parowania to ta sama sytuacja: cos, co trzeba przekazac dalej,
   zanim wygasnie. Referencja daje temu wlasna powierzchnie — dotad `dat-invite` bylo
   golym flexem, wiec kod wisial na tle strony obok karty z instrukcja i strona
   wygladala na zlozona z dwoch niepasujacych kawalkow. */
.dat-invite {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--card-padding);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
}

/* W waskiej kolumnie plakietka waznosci nie miesci sie obok tytulu i lamalaby go
   na trzy linie — wtedy schodzi do wlasnego wiersza. */
.dat-invite__head { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.dat-invite__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent-soft-fg);
}
.dat-invite__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }

/* Kod przepisuje sie wzrokiem z ekranu na tablet trzymany w drugiej rece, wiec
   zostaje duzy — ale dostaje ramke, zeby bylo widac, gdzie sie zaczyna i konczy. */
.dat-invite__code {
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--text-display-size);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--code-tracking);
    text-align: center;
}

.dat-invite__link { display: flex; align-items: center; gap: var(--space-2); }
.dat-invite__url {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-overline-size);
    word-break: break-all;
}

/* Kod QR zdejmuje przepisywanie adresu, ale nie jest trescia tej strony — kod jest.
   Stad wlasny wiersz pod kreska i szerokosc, ktora go nie czyni bohaterem. */
/* Kod QR zostaje jasny w obu motywach i dostaje wlasny margines. Cicha strefa
   wokol wzoru jest czescia standardu, nie ozdoba: bez niej aparat gubi krawedz,
   a wzor postawiony wprost na ciemnym tle panelu czyta sie jeszcze gorzej. */
.dat-invite__qr {
    align-self: center;
    display: flex;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--qr-surface);
}
.dat-invite__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border);
    font-size: var(--text-overline-size);
    color: var(--color-text-muted);
}
.dat-invite__expiry {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--badge-height);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: var(--text-overline-size);
    font-weight: var(--text-overline-weight);
}

/* Ekran w panelu to wiersz o jednym pytaniu: czy ten tablet zyje. Uklad idzie za
   `.dat-list__item` z referencji — okragla ikona, para tytul/opis, a po prawej stan
   i akcje. Nazwy zaczynaja sie od `dat-device`, bo `dat-screen` nalezy do widoku
   na samym tablecie. */
.dat-device__text { flex: 1; min-width: 0; }

/* Kod przepisuje sie z ekranu na tablet, wiec musi byc czytelny — ale przestal byc
   najwiekszym elementem wiersza, bo nie jest wazniejszy od nazwy ekranu. Cyfry
   tabelaryczne trzymaja szerokosc znaku, zeby dwa kody pod soba staly w tej samej siatce.
   Obwodka zamiast tla: `surface-sunken` w motywie ciemnym rozni sie od powierzchni karty
   o tyle, ze plakietka po prostu znikala. */
.dat-device__code {
    flex: none;
    padding: 0 var(--space-2);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-subtitle-size);
    font-variant-numeric: tabular-nums;
}

/* Stan i akcje trzymaja sie prawej krawedzi jako jedna grupa. Bez tego kod siadal
   tuz przy nazwie, a odznaka odlatywala na druga strone wiersza — dwie informacje
   o tym samym ekranie w dwoch koncach, jakby nie mialy ze soba nic wspolnego. */
.dat-device__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.dat-device__remove { display: flex; }

/* Ustawienia ekranu: podglad obok listy skorek, a na waskim ekranie pod nia. */
.dat-screen-settings { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; }

/* Proporcje tabletu, zeby podglad klamal o ukladzie jak najmniej. Jednostki `vw`
   i `vh` wewnatrz ramki odnosza sie do niej samej, wiec skala zgadza sie sama. */
.dat-screen-preview { width: 100%; aspect-ratio: 16 / 10; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }

.dat-choice { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); cursor: pointer; }
.dat-choice:hover { background: var(--color-surface-sunken); }
.dat-choice__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dat-choice__name { font-size: var(--text-small-size); font-weight: var(--text-title-weight); }
.dat-choice__desc { font-size: var(--text-overline-size); color: var(--color-text-muted); }

@media (max-width: 860px) {
    .dat-screen-settings { grid-template-columns: 1fr; }

    /* Na waskim ekranie kolumny staja sie kolejnoscia: najpierw kod, potem kroki.
       Przyklejanie traci sens, gdy nie ma obok czego trzymac. */
    .dat-setup { grid-template-columns: 1fr; }
    .dat-setup__aside { position: static; }

    /* Na telefonie kod, stan i dwie akcje nie mieszcza sie obok nazwy. Schodza pod
       nia w calosci, zaczynajac od lewej krawedzi tekstu — nie od krawedzi karty,
       zeby wiersz dalej czytalo sie jako jedna pozycja, a nie dwie. */
    .dat-list__item:has(.dat-device__actions) { flex-wrap: wrap; }
    .dat-device__text { flex: 1 1 100%; }
    .dat-device__actions { flex-wrap: wrap; margin-left: 0; width: 100%; }
    .dat-device__actions .dat-btn { margin-left: auto; }
    .dat-device__remove { margin-left: 0; }
}

/* Edytor ukladu: strefy obok siebie, klocki jako wiersze do przeciagania.
   Wyglad idzie za lista pozycji z referencji, bo to ta sama forma tresci. */
.dat-uklad { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); }
.dat-uklad__strefa { display: flex; flex-direction: column; gap: var(--space-2); }
.dat-uklad__naglowek { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-overline-size); font-weight: var(--text-overline-weight); letter-spacing: var(--text-overline-tracking); text-transform: uppercase; color: var(--color-text-muted); }
.dat-uklad__limit { font-weight: var(--text-body-weight); text-transform: none; letter-spacing: 0; }

.dat-uklad__lista {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: var(--control-height-lg);
    margin: 0;
    padding: var(--space-2);
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    list-style: none;
}

.dat-uklad__klocek {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

/* Chwyt jest jedynym uchwytem przeciagania — kursor ma to mowic, bo reszta
   wiersza (a zwlaszcza przyciski opcji) na przeciaganie nie reaguje. */
.dat-uklad__uchwyt { cursor: grab; }

.dat-uklad__nazwa { font-size: var(--text-small-size); }

.dat-uklad__opcje { display: flex; gap: var(--space-1); margin-left: auto; }
/* display:flex powyzej ma ta sama specyficznosc co domyslne [hidden] przegladarki
   i regula autorska by je przebila — bez tego wpisu przeciagniety klocek do strefy
   poziomej albo biblioteki pokazywalby kontrolki mimo ustawionego atrybutu hidden. */
.dat-uklad__opcje[hidden] { display: none; }
.dat-uklad__ustawienia[hidden] { display: none; }
.dat-uklad__stan { font-size: var(--text-overline-size); color: var(--color-text-muted); }
.dat-uklad__opcja,
.dat-uklad__ustawienia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    padding: 0;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

/* Wybrane justowanie i wlaczony separator maja wygladac inaczej bez klikania —
   inaczej stan klocka byłby niewidoczny do momentu odswiezenia podgladu. */
.dat-uklad__opcja.is-wybrany { border-color: var(--color-border-strong); background: var(--color-surface-sunken); color: var(--color-text); }