/* Konsola agenta Martyny (sprawa #26, etap 1). Wchodzi PO hub.css i zmienia wylacznie tozsamosc
   wizualna: kolor akcentu, czyli pierscien i twarz awatara. Uklad, typografia, czern i karta
   zostaja te same, bo to ta sama konsola - inna glowa.

   Kolor: #0AF5E3 to limonka czajki (#E3F50A) z przestawionymi kanalami. Ta sama jasnosc i sila
   na czerni, ten sam charakter palety, a pierscien od pierwszego spojrzenia mowi, u ktorej
   glowy sie jest. Jeden akcent na strone, bez gradientow - jak w systemie projektowym. */
:root { --akcent: #0AF5E3; }

/* Twarz awatara ma kolory wpisane w SVG jako atrybuty prezentacji (hub.html i martyna.html maja
   ten sam znacznik). Regula CSS bije atrybut prezentacji, wiec podmiana jest tutaj, a nie w HTML -
   inaczej dwa pliki HTML rozjechalyby sie przy pierwszej poprawce awatara. */
#aw-pierscien { stroke: var(--akcent); }
#aw-brwi line { stroke: var(--akcent); }
#aw-oko-l, #aw-oko-p, #aw-usta, #aw-pytanie { fill: var(--akcent); }

/* Miejsca, w ktorych hub.css ma limonke wpisana na sztywno jako przezroczysta poswiata
   (var() nie dziala w rgba()), wiec powtarzamy je w kolorze Martyny. */
#hub-slash .slash-poz.aktywna, #hub-slash .slash-poz:hover { background: rgba(10, 245, 227, .12); }
.hub-rozmowa .m.status .hub-plik:hover { background: rgba(10, 245, 227, .08); }
.hub-live.wlaczony { background: rgba(10, 245, 227, .10); }
@keyframes live-puls {
  0% { box-shadow: 0 0 0 0 rgba(10, 245, 227, .45); }
  70% { box-shadow: 0 0 0 10px rgba(10, 245, 227, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 245, 227, 0); }
}

/* Podpis glowy w pasku: jedno slowo, zeby po zrzucie ekranu bylo wiadomo, ktora to konsola. */
.hub-glowa { font-family: Anton, Impact, sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--akcent); }

/* DO ZROBIENIA (sprawa #26, etap opcjonalny D). Lista zadan tej glowy w prawej kolumnie konsoli.
   Siedzi w martyna.css, a nie w hub.css, bo to jedyna rzecz, ktora konsola Martyny ma, a konsola
   Huba nie - u Huba ta sama lista jest zakladka w panelu. Zero nowych kolorow: karta, ramka
   i var(--akcent), wiec sekcja wyglada jak reszta konsoli. */
/* Kolumna z hub.css zostaje bez zmian (flex, do gory, wysrodkowana) - karta bierze jej cala
   szerokosc i rosnie z lista do wysokosci ekranu, dalej przewija sie w srodku. */
.mz { width: 100%; background: var(--karta); border: 1px solid var(--ramka); border-radius: 12px; padding: 12px 14px; max-height: calc(100vh - 140px); display: flex; flex-direction: column; }
.mz-tytul { margin: 0 0 10px; font-family: Anton, Impact, sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--drugi); font-weight: 400; }
.mz-licznik { color: var(--akcent); }
.mz-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mz-lista li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.35; color: var(--tekst); }
/* Odhaczanie klikiem: kwadrat z ramka, ktory przy najechaniu dostaje akcent. Zadnego natywnego
   checkboxa - ten na czerni jest biala plama i psuje cala kolumne. */
.mz-ptak { flex: none; width: 15px; height: 15px; margin-top: 2px; border: 1px solid var(--ramka); border-radius: 4px; background: transparent; color: transparent; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.mz-ptak:hover { border-color: var(--akcent); color: var(--akcent); }
.mz-tresc { min-width: 0; flex: 1; }
.mz-kiedy { display: block; font-size: 11px; color: var(--drugi); }
.mz-lista li.spozniona .mz-kiedy { color: var(--blad); }
.mz-lista li.dzis .mz-kiedy { color: var(--akcent); }
.mz-pusto { color: var(--drugi); font-size: 12.5px; font-style: italic; }
@media (max-width: 860px) { .mz { display: none; } }