/* Portál týmu. Barvy a písma jsou shodné s prezentací zaškolení (onboarding/prezentace.html)
   — je to pro člověka jeden produkt, ne dvě různé appky.

   Cílový uživatel je technik s telefonem v ruce, často venku a často v rukavicích:
   velké dotykové cíle, vysoký kontrast, žádné jemné šedé na šedé. */

:root{
  color-scheme:light;
  --navy:#0D2A4E; --navy-deep:#0a1f3b;
  --cyan:#1A8FD9; --cyan-bright:#47BFFF; --cyan-light:#8AD7FF;
  --teal:#2EBED2; --orange:#FAB82D;
  --paper:#E9F2FA; --card:#fff; --line:#d3e3f2;
  --ink:#0D2A4E; --body:#24384f; --muted:#546D8A;
  --chyba-bg:#FEF2F4; --chyba-line:#E5A0AE; --chyba-ink:#B01732;
  --head:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
  --text:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  --r:18px;
}

*{box-sizing:border-box}

/* Musí být `!important` a musí to být tady nahoře. `hidden` je jen atribut, který
   prohlížeč překládá na `display:none` ve svém výchozím stylu — jakékoliv naše
   `display:flex` níž ho přebije. Bez tohohle svítily všechny tři kroky přihlášení
   pod sebou naráz a po přihlášení zůstal login viset nad portálem. */
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.znacka,.btn,.dlazdice-nazev{font-family:var(--head)}
h1{font-size:clamp(1.5rem,4.5vw,2rem);color:var(--ink);margin:0 0 .35rem;line-height:1.2}
h2{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem;font-weight:700}
.lead{margin:0 0 1.5rem;color:var(--muted)}

/* ——— značka ——————————————————————————————————————————————————— */
.znacka{
  display:flex;align-items:center;gap:.55rem;
  font-weight:800;letter-spacing:-.01em;color:var(--ink);
  font-size:1.05rem;
}
.znacka--mala{font-size:.95rem}
.znacka-kapka{
  width:1.35rem;height:1.35rem;border-radius:50% 50% 50% 4px;
  transform:rotate(-45deg);
  background:linear-gradient(140deg,var(--cyan-bright),var(--cyan));
  flex:none;
}

/* ——— přihlášení ——————————————————————————————————————————————— */
.vstup{
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.25rem;padding:1.25rem;
  background:
    radial-gradient(80rem 40rem at 50% -20%, #fff 0%, transparent 60%),
    var(--paper);
}
.vstup-karta{
  width:min(26rem,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.75rem 1.5rem 1.5rem;
  box-shadow:0 1px 2px rgba(13,42,78,.05), 0 16px 40px -24px rgba(13,42,78,.35);
}
.vstup-karta .znacka{margin-bottom:1.5rem}

.krok{display:flex;flex-direction:column}
label{
  font-weight:700;color:var(--ink);font-size:.9rem;
  margin:0 0 .35rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
}
.napoveda{font-weight:400;color:var(--muted);font-size:.82rem}

select,input{
  width:100%;
  font:inherit;font-size:1.05rem;
  padding:.85rem .9rem;
  margin:0 0 1.1rem;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fff;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23546D8A' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center;
  padding-right:2.6rem;
}
input[type=password]{letter-spacing:.35em}
input[type=password]::placeholder{letter-spacing:.35em}
select:focus-visible,input:focus-visible{
  outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(26,143,217,.16);
}

.btn{
  font-size:1.05rem;font-weight:700;
  padding:.95rem 1rem;
  border:0;border-radius:12px;
  background:var(--cyan);color:#fff;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
.btn:hover{background:#1780c4}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:#9dc4de;cursor:progress}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

.odkaz{
  margin-top:.9rem;
  background:none;border:0;
  color:var(--cyan);font:inherit;font-size:.95rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;padding:.4rem;
  /* 44 px je minimum, které se dá trefit palcem. Samotný `padding:.4rem` dělal
     výšku 36 px — a tenhle odkaz mačká člověk, který se zrovna nemůže přihlásit,
     často jednou rukou na stavbě. Flex je tu kvůli svislému vycentrování textu. */
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
}
.odkaz:hover{color:var(--navy)}

.chyba{
  margin:0 0 1rem;padding:.7rem .85rem;
  background:var(--chyba-bg);border:1px solid var(--chyba-line);border-radius:10px;
  color:var(--chyba-ink);font-size:.93rem;font-weight:600;
}

.pata{color:var(--muted);font-size:.88rem;text-align:center;margin:0}

/* ——— portál ———————————————————————————————————————————————————— */
.hlava{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem clamp(1rem,4vw,2.5rem);
  background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;
}
.hlava-vpravo{display:flex;align-items:center;gap:.9rem}
.kdo-jsem{color:var(--muted);font-size:.92rem;font-weight:600}
.odhlasit{
  background:none;border:1.5px solid var(--line);border-radius:9px;
  color:var(--muted);font:inherit;font-size:.88rem;font-weight:600;
  padding:.4rem .75rem;cursor:pointer;
}
.odhlasit:hover{border-color:var(--cyan);color:var(--cyan)}

.obsah{
  max-width:64rem;margin:0 auto;
  padding:clamp(1.5rem,5vw,2.75rem) clamp(1rem,4vw,2.5rem) 1rem;
}
.sekce{margin-top:2.25rem}
.sekce[hidden]{display:none}

.dlazdice{
  display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
}

.dlazdice-polozka{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.1rem 1.15rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  text-decoration:none;color:inherit;
  transition:border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.dlazdice-polozka:hover{
  border-color:var(--cyan-light);
  transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(13,42,78,.45);
}
.dlazdice-polozka:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

.dlazdice-nazev{
  font-weight:700;color:var(--ink);font-size:1.06rem;
  display:flex;align-items:center;gap:.45rem;
}
.dlazdice-proc{color:var(--muted);font-size:.92rem;line-height:1.45}
.sipka{color:var(--cyan);font-weight:700}

/* „Začni tady" má nést pořadí — nový člověk jde 1 → 2 → 3, ne kam ho napadne. */
#sekce-zacni .dlazdice-polozka{
  border-left:4px solid var(--cyan);
}
#sekce-zacni .cislo{
  display:inline-grid;place-items:center;
  width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--cyan);color:#fff;
  font-size:.85rem;font-weight:700;flex:none;
}

.pata--portal{
  max-width:64rem;margin:0 auto;
  padding:2rem clamp(1rem,4vw,2.5rem) 3rem;
  text-align:left;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .dlazdice-polozka:hover{transform:none}
}