/* Pulpit moderacji - strona /moderacja.
   Podpiety NA KONCU listy arkuszy: w tym projekcie wygrywa nizszy plik,
   a pulpit ma prawo nadpisac ogolne reguly .biz i .tiles.

   Jeden uklad, ktory zmienia sie z szerokoscia okna:
     - telefon: pasek stanu, kolejki, potem LENTA ZDARZEN (co sie dzialo),
       na koncu liczby i ustawienia - czyta sie z gory na dol jak dziennik;
     - laptop (od 900px): PULPIT - lampki w rzedzie, kolejki w rzedzie,
       nizej trzy kolumny: ludzie, kanal i lenta z prawej.
   To ten sam kod, nie dwie strony - inaczej jedna z nich zaczela by
   klamac po pierwszej zmianie, ktorej nikt nie przeniosl do drugiej.

   Kolory bierzemy z tokenow portalu (--paper, --card, --ink, --yl...),
   wiec pulpit dziala w jasnym i ciemnym motywie bez osobnych regul. */

/* Tylko gora i dol. Skrot "padding: 22px 0 40px" zerowal boczne odstepy
   z .wrap - a ten arkusz jest podpiety nizej, wiec wygrywal. Strona na
   telefonie stala wtedy tresc przy samej krawedzi ekranu.
   To ta sama grabia, o ktorej mowi CLAUDE.md: wygrywa nizszy plik. */
.puls{padding-block:22px 40px}

.puls-gora{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:6px}
.puls-gora h1{font-size:clamp(26px,6vw,36px)}
 /* Bez text-transform: skrot wersji ma zostac taki, jaki jest w git -
    "74B761F" nie da sie wkleic do git show. */
.puls-gora .wers{font-family:var(--f-cond);letter-spacing:.04em;
  font-weight:600;font-size:12px;color:var(--ink2);border:1px solid var(--line);
  padding:3px 8px;white-space:nowrap}
.puls-gora .lead{flex:1 0 100%;color:var(--ink2);margin:0;max-width:70ch;font-size:15px}

/* ---------------------------------------------------- pasek stanu (jedno zdanie) */
.stanpas{display:flex;align-items:center;gap:9px;margin:16px 0 0;padding:11px 14px;
  background:var(--card);border:1px solid var(--line);border-left-width:4px;
  font-size:14.5px;font-weight:600;line-height:1.35}
.stanpas.s-dobrze{border-left-color:var(--green)}
.stanpas.s-uwaga{border-left-color:var(--yl)}
.stanpas.s-zle{border-left-color:var(--red)}
.stanpas.s-nie-wiem{border-left-color:var(--ink2)}

.kropka{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.kropka.ok{background:var(--green)}
.kropka.warn{background:var(--yl)}
.kropka.bad{background:var(--red)}
.kropka.nw{background:var(--ink2)}

/* ---------------------------------------------------- siatka */
.puls-siatka{display:grid;gap:12px;margin-top:12px}

.puls-siatka .pole-kafle{order:1}
.puls-siatka .pole-zdarzenia{order:2}
.puls-siatka .pole-lampy{order:3}
.puls-siatka .pole-ludzie{order:4}
.puls-siatka .pole-kanal{order:5}
.puls-siatka .pole-popyt{order:6}

.tyt{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;font-size:11.5px;color:var(--ink2);margin:0 0 8px}

/* ---------------------------------------------------- lampki */
.lampy{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.lampa{background:var(--card);padding:11px 13px;min-width:0}
.lampa .n{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:10.5px;color:var(--ink2)}
.lampa .w{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:14px;
  font-weight:600;overflow-wrap:anywhere}
.lampa .d{font-size:11.5px;color:var(--ink2);margin-top:3px;overflow-wrap:anywhere}

/* ---------------------------------------------------- kolejki */
.kafle{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.kafle .kafel{background:var(--card);border:1px solid var(--line);padding:11px 12px;
  display:block;color:var(--ink)}
.kafle .kafel b{display:block;font-family:var(--f-display);font-weight:800;font-size:26px;
  line-height:1;letter-spacing:-.03em}
.kafle .kafel span{display:block;font-family:var(--f-cond);text-transform:uppercase;
  letter-spacing:.09em;font-weight:600;font-size:10.5px;color:var(--ink2);margin-top:6px}
/* Zero jest spokojnie szare. Jedynka zapala kafelek - nie trzeba sie wpatrywac. */
.kafle .kafel.pilne{border-color:var(--ink);border-width:2px;padding:10px 11px}
.kafle .kafel.pilne b{color:var(--ink)}
.kafle .kafel.pilne::after{content:"";display:block;height:3px;background:var(--yl);
  margin-top:8px}
.kafle .kafel:hover{border-color:var(--ink)}

/* ---------------------------------------------------- bloki z liczbami */
.puls .blok{background:var(--card);border:1px solid var(--line);padding:13px 14px;min-width:0}
.puls .blok h4{font-family:var(--f-display);font-size:15px;margin:0 0 9px;letter-spacing:-.01em}
.wiersz{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-top:1px solid var(--line);font-size:14px}
.wiersz:first-of-type{border-top:0}
.wiersz .k{color:var(--ink2)}
.wiersz .v{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.mbtn{display:inline-block;margin-top:11px;font-family:var(--f-display);font-weight:700;
  font-size:13px;background:var(--yl);color:#16171A;padding:9px 15px;border:2px solid var(--ink)}
.mbtn.duch{background:transparent;color:var(--ink);border-color:var(--line)}
.mbtn:hover{border-color:var(--ink)}

/* ---------------------------------------------------- lenta zdarzen */
.zdarzenia{display:grid}
.zd{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:start;
  padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.zd:first-child{border-top:0}
.zd .czas{grid-row:1 / span 2;font-family:var(--f-cond);font-weight:600;font-size:12px;
  color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px;
  min-width:64px}
.zd .co{font-weight:600;overflow-wrap:anywhere}
.zd .kto{color:var(--ink2);font-size:13px;overflow-wrap:anywhere}
.zd .kto a{border-bottom:1px solid var(--yl)}
.zd .ik{display:none}
.puls .pusto{color:var(--ink2);font-size:14px;margin:4px 0 0}

/* ---------------------------------------------------- ustawienia na dole */
.pasek{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;padding:12px 14px;
  background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--ink2)}
.pasek .tyt{margin:0;align-self:center}
.pasek span{white-space:nowrap;overflow-wrap:anywhere}
.pasek b{color:var(--ink);font-weight:700}
.pasek .uwaga b{border-bottom:2px solid var(--yl)}
.pasek .katalog{white-space:normal;font-family:var(--f-cond);letter-spacing:.02em}

/* ---------------------------------------------------- laptop: pulpit */
@media (min-width:900px){
  /* Lenta zdarzen jest najdluzsza, wiec zajmuje cala prawa kolumne, a liczby
     stoja jedne pod drugimi z lewej. Przy trzech kolumnach w jednym rzedzie
     pod krotkimi blokami zostawala pusta dziura na pol ekranu. */
  .puls-siatka{grid-template-columns:1fr 1.1fr;
    grid-template-areas:
      "lampy  lampy"
      "kafle  kafle"
      "ludzie zdarzenia"
      "kanal  zdarzenia"
      "popyt  zdarzenia";
    align-items:start}
  .puls-siatka .pole-lampy{grid-area:lampy}
  .puls-siatka .pole-kafle{grid-area:kafle}
  .puls-siatka .pole-ludzie{grid-area:ludzie}
  .puls-siatka .pole-kanal{grid-area:kanal}
  .puls-siatka .pole-popyt{grid-area:popyt}
  .puls-siatka .pole-zdarzenia{grid-area:zdarzenia}

  .lampy{grid-template-columns:repeat(4,1fr)}
  .kafle{grid-template-columns:repeat(5,1fr)}

  /* Przy szerokim oknie wraca kolumna ze znacznikiem rodzaju zdarzenia -
     na telefonie zajmowala miejsce potrzebne na tresc. */
  .zd{grid-template-columns:auto auto 1fr}
  .zd .czas{grid-row:1 / span 2}
  .zd .ik{display:grid;place-items:center;grid-row:1 / span 2;width:30px;height:30px;
    background:var(--paper);border:1px solid var(--line);font-family:var(--f-cond);
    font-weight:700;font-size:10px;letter-spacing:.04em;color:var(--ink2)}
}

/* Podtytul w bloku "po co firmy siegaja" - wiersze pod nim licza inna
   rzecz niz te nad nim (stan zamiast checi), wiec potrzebuja przegrody. */
.blok .wiersz-tyt{border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.blok .wiersz-tyt .k{font-weight:700;color:var(--ink)}
.blok h4 small{font-weight:400;color:var(--ink2);text-transform:none;letter-spacing:0}