/* Panel poczty host6. Jeden arkusz, bez zaleznosci.
   Rzecz do pracy, nie do ogladania: gesto, czytelnie, bez animacji. */

:root {
  --tlo:      #f6f6f4;
  --papier:   #ffffff;
  --tekst:    #1c1c1a;
  --przygasly:#6b6b66;
  --kreska:   #d8d8d2;
  --akcent:   #1f5c8b;
  --dobrze:   #1f6b3a;
  --zle:      #96331f;
  --uwaga:    #7a5b12;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: .7rem 1.2rem;
  background: var(--papier);
  border-bottom: 1px solid var(--kreska);
}
header nav { display: flex; gap: 1rem; flex: 1 1 auto; }
header a { color: var(--akcent); text-decoration: none; }
header a:hover { text-decoration: underline; }
header .kto { display: flex; align-items: center; gap: .6rem; color: var(--przygasly); font-size: .9em; }

main { max-width: 68rem; margin: 0 auto; padding: 1.2rem; }
h1 { font-size: 1.35rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; color: var(--przygasly); font-weight: 600; }

table { width: 100%; border-collapse: collapse; background: var(--papier); margin-bottom: .5rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--kreska); vertical-align: top; }
th { font-size: .8em; text-transform: uppercase; letter-spacing: .04em; color: var(--przygasly); font-weight: 600; }
tr.pod td { background: #fbfbf9; border-bottom: 2px solid var(--kreska); padding-top: .3rem; }

form.wiersz { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .15rem .8rem .15rem 0; }
form.waskie { display: flex; flex-direction: column; gap: .6rem; max-width: 22rem; background: var(--papier);
              padding: 1rem; border: 1px solid var(--kreska); }
form.waskie label { display: flex; flex-direction: column; gap: .2rem; font-size: .9em; color: var(--przygasly); }

input, select, button {
  font: inherit; padding: .32rem .5rem; border: 1px solid var(--kreska);
  background: var(--papier); color: var(--tekst);
}
button { background: var(--akcent); color: #fff; border-color: var(--akcent); cursor: pointer; }
button:hover { filter: brightness(1.12); }
button.drobny { padding: .18rem .45rem; font-size: .85em; background: var(--papier); color: var(--akcent); }
button.drobny:hover { background: var(--akcent); color: #fff; }

.komunikat { padding: .6rem .8rem; margin-bottom: .8rem; border-left: 4px solid var(--przygasly); background: var(--papier); }
.komunikat.ok   { border-color: var(--dobrze); }
.komunikat.blad { border-color: var(--zle); }
.komunikat.haslo { border-color: var(--uwaga); }
.komunikat code { font-size: 1.15em; background: #f0efe8; padding: .15rem .4rem; user-select: all; }

.kafle { display: flex; flex-wrap: wrap; gap: .8rem; }
.kafel { background: var(--papier); border: 1px solid var(--kreska); padding: .7rem 1.1rem; min-width: 7rem; }
.kafel .liczba { display: block; font-size: 1.7rem; line-height: 1.1; }
.kafel span:last-child { color: var(--przygasly); font-size: .85em; }

.drobne { color: var(--przygasly); font-size: .87em; }

footer { max-width: 68rem; margin: 2rem auto 1rem; padding: 0 1.2rem; color: var(--przygasly); font-size: .82em; }

@media (max-width: 40rem) {
  header { flex-direction: column; align-items: flex-start; }
  table, tr, td, th { display: block; }
  th { display: none; }
  td { border: none; padding: .2rem .6rem; }
  tr { border-bottom: 1px solid var(--kreska); padding: .5rem 0; display: block; }
}