/* Lapsewatch — vizuální identita
   Petrolová akcentní barva, neutrály posunuté do zelena.
   Semantické barvy (zelená/jantarová/červená) jsou vyhrazené výhradně
   pro stav kontrol — nikdy se nepoužívají jako akcent. */

:root{
  --ground:#F1F4F2;
  --surface:#FFFFFF;
  --surface-2:#E7ECE9;
  --line:#D2DAD6;
  --line-soft:#E3E8E5;
  --ink:#101C1B;
  --ink-2:#3D4B48;
  --ink-3:#6C7B77;
  --accent:#0F5257;
  --accent-2:#0C767E;
  --accent-wash:#E3EEEE;
  --on-accent:#FFFFFF;
  --ok:#256B4C;   --ok-bg:#DCEDE3;
  --warn:#8E5A00; --warn-bg:#F7EAD0;
  --crit:#A02B23; --crit-bg:#F6DEDA;
  --shadow:0 1px 2px rgba(16,28,27,.05), 0 10px 30px -16px rgba(16,28,27,.25);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0B1211;
    --surface:#121C1B;
    --surface-2:#182422;
    --line:#273634;
    --line-soft:#1D2B29;
    --ink:#E9EFEC;
    --ink-2:#B0BFBA;
    --ink-3:#7F918C;
    --accent:#4FC3C9;
    --accent-2:#7DDDE2;
    --accent-wash:#11292B;
    --on-accent:#062020;
    --ok:#6FD3A2;   --ok-bg:#113023;
    --warn:#E5B252; --warn-bg:#31270F;
    --crit:#F08D83; --crit-bg:#351A17;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1060px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem);}
.col{max-width:64ch;}

h1,h2,h3{
  font-family:Archivo, ui-sans-serif, system-ui, sans-serif;
  margin:0;line-height:1.12;letter-spacing:-.028em;text-wrap:balance;
}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:700;letter-spacing:-.035em;}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;}
h3{font-size:1.05rem;font-weight:600;letter-spacing:-.012em;line-height:1.3;}
p{margin:0;}
a{color:var(--accent-2);text-underline-offset:3px;}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent-2);outline-offset:3px;border-radius:3px;
}

.mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;}
.break{word-break:break-all;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- hlavička ---------- */
.top{border-bottom:1px solid var(--line-soft);background:var(--surface);}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem;}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);}
.mark{
  width:25px;height:25px;flex:none;border-radius:5px;background:var(--accent);
  display:grid;place-items:center;color:var(--on-accent);
  font-family:Archivo,sans-serif;font-weight:700;font-size:.82rem;
}
.brandname{font-family:Archivo,sans-serif;font-weight:600;letter-spacing:-.02em;font-size:1.02rem;}
.beta{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ---------- hero ---------- */
.hero{padding:clamp(2.8rem,7vw,5rem) 0 clamp(2.2rem,5vw,3.4rem);}
.hero-inner{display:flex;flex-direction:column;gap:1.1rem;max-width:44rem;}
.dek{font-size:clamp(1rem,1.8vw,1.15rem);color:var(--ink-2);max-width:56ch;}

.checker{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem;}
.checker input{
  flex:1 1 min(300px,100%);
  font-family:"IBM Plex Mono",monospace;font-size:.95rem;
  padding:.78rem .95rem;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink);
}
.checker input::placeholder{color:var(--ink-3);}
.checker button{
  font-family:Archivo,sans-serif;font-weight:600;font-size:.95rem;
  padding:.78rem 1.3rem;border:none;border-radius:8px;cursor:pointer;
  background:var(--accent);color:var(--on-accent);
}
.checker button:hover{background:var(--accent-2);}
.cta-note{font-size:.82rem;color:var(--ink-3);}
.chyba{
  background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit);
  border-radius:8px;padding:.75rem .95rem;font-size:.92rem;
}

/* ---------- výsledky ---------- */
.vysledky{padding-bottom:clamp(2.4rem,5vw,3.6rem);}
.res-title{margin-bottom:.25rem;}
.res-sub{
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-3);
  margin-bottom:1.3rem;
}
.karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:.9rem;}
.karta{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;
  box-shadow:var(--shadow);
}
.karta-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  padding:.2rem .58rem;border-radius:99px;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.chip.ok{color:var(--ok);background:var(--ok-bg);}
.chip.warn{color:var(--warn);background:var(--warn-bg);}
.chip.crit{color:var(--crit);background:var(--crit-bg);}

.karta dl{
  margin:0;display:grid;grid-template-columns:auto 1fr;gap:.28rem .8rem;
  font-size:.86rem;align-items:baseline;
}
.karta dt{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
.karta dd{margin:0;color:var(--ink);overflow-wrap:anywhere;}

.pozn{font-size:.86rem;color:var(--ink-2);}
.pozn-mala{font-size:.79rem;color:var(--ink-3);line-height:1.5;}

.res-cta{
  margin-top:1.2rem;background:var(--accent-wash);border:1px solid var(--accent);
  border-radius:10px;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;
  align-items:flex-start;
}
.btn{
  display:inline-block;margin-top:.3rem;text-decoration:none;
  font-family:Archivo,sans-serif;font-weight:600;font-size:.92rem;
  padding:.65rem 1.15rem;border-radius:7px;
  background:var(--accent);color:var(--on-accent);
}
.btn:hover{background:var(--accent-2);}

/* ---------- textové pásy ---------- */
.band{padding:clamp(2.6rem,5.5vw,4rem) 0;border-top:1px solid var(--line-soft);}
.band.alt{background:var(--surface);}
.band h2{margin-bottom:1rem;}
.band .col{display:flex;flex-direction:column;gap:.85rem;}
.band .col p{color:var(--ink-2);}
.band .col p.lead{color:var(--ink);}

.ctyri{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1.4rem 1.8rem;}
.ctyri h3{margin-bottom:.35rem;}
.ctyri p{color:var(--ink-2);font-size:.92rem;}

/* ---------- ukázka e-mailu ---------- */
.mail{
  border:1px solid var(--line);border-radius:9px;overflow:hidden;
  background:var(--surface);max-width:50ch;margin:.4rem 0;
}
.mail-head{
  padding:.65rem .9rem;border-bottom:1px solid var(--line-soft);background:var(--surface-2);
  display:flex;flex-direction:column;gap:.12rem;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-3);
}
.mail-head b{color:var(--ink-2);font-weight:500;}
.mail-body{padding:1rem;display:flex;flex-direction:column;gap:.6rem;
  font-size:.88rem;color:var(--ink-2);}

/* ---------- patička ---------- */
.paticka{
  border-top:1px solid var(--line-soft);padding:2rem 0 3rem;
  font-size:.8rem;color:var(--ink-3);
}