/* ---------------------------------------------------------------
   Máma online — kvíz "jakou práci z domova můžeš nabízet"
   Barvy a typografie podle design.md (verze 2, cihlová #A0554E)
   --------------------------------------------------------------- */

:root{
  --accent:#A0554E;
  --accent-soft:#F3E4E1;
  --deep:#683833;
  --sand:#F1E8DC;
  --ink:#221E22;
  --ink-soft:#6B5F58;
  --paper:#FDFAF6;
  --line:#2B2B2B;
  --radius:40px;
  --radius-sm:24px;
  --maxw:620px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);text-underline-offset:3px}

/* ---- rámec stránky ---- */
.frame{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 22px;
}

.topbar{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:26px 0 8px;
}
.brand{font-weight:800;font-size:19px;letter-spacing:-.5px}
.brand em{color:var(--accent);font-style:normal}
.brand-sub{font-size:13px;color:var(--ink-soft);letter-spacing:.5px}

.stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0 40px;position:relative}

.footpage{
  padding:18px 0 26px;
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
}
.footpage a{color:var(--ink-soft)}

/* ---- obrazovky ---- */
.screen{animation:screen-in .5s cubic-bezier(.2,.7,.3,1) both}
.screen[hidden]{display:none}

@keyframes screen-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---- typografie ---- */
.eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.h1{
  font-weight:800;
  font-size:clamp(30px, 7.4vw, 44px);
  line-height:1.15;
  letter-spacing:-.5px;
  margin-bottom:16px;
}
.h2{
  font-weight:700;
  font-size:clamp(23px, 5.6vw, 30px);
  line-height:1.22;
  letter-spacing:-.5px;
  margin-bottom:8px;
}
.h3{
  font-weight:700;
  font-size:18px;
  letter-spacing:-.3px;
  margin-bottom:10px;
}
.accent{color:var(--accent)}
.lead{font-size:17px;color:var(--ink);margin-bottom:26px}

/* ---- avatar na úvodu ---- */
.portrait{
  width:min(224px, 60%);
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center top;
  border-radius:28px;
  border:1.5px solid #EADFD3;
  background:var(--sand);
  margin-bottom:20px;
  display:block;
}

/* ---- podpisová linka (tvoje cesta) ---- */
.motif{width:186px;margin-bottom:26px}
.motif svg{width:100%;height:auto;overflow:visible}
.motif__path{
  stroke-dasharray:340;
  stroke-dashoffset:340;
  animation:motif-draw 1.7s cubic-bezier(.4,0,.2,1) .1s forwards;
}
@keyframes motif-draw{to{stroke-dashoffset:0}}

.motif__dot,.motif__dot--end{
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  animation:motif-pop .45s ease forwards;
}
.motif__dot--1{animation-delay:.8s}
.motif__dot--2{animation-delay:1.15s}
.motif__dot--end{animation:motif-pop .5s cubic-bezier(.2,1.5,.4,1) 1.55s forwards}
@keyframes motif-pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

@keyframes draw{to{stroke-dashoffset:0}}

/* ---- formulář ---- */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field__label{font-size:14px;font-weight:600;color:var(--ink-soft)}
.field input{
  font:inherit;
  padding:14px 16px;
  border:1.5px solid #E4D9CE;
  border-radius:16px;
  background:#fff;
  color:var(--ink);
  transition:border-color .18s;
}
.field input:focus{outline:none;border-color:var(--accent)}
.field input::placeholder{color:#B7AEA4}

.check{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.45;
}
.check input{
  flex:0 0 auto;
  width:20px;height:20px;
  margin-top:2px;
  accent-color:var(--accent);
}

.form__error{
  color:var(--deep);
  font-size:14px;
  font-weight:600;
  background:var(--accent-soft);
  padding:10px 14px;
  border-radius:12px;
}
.form__note{font-size:12.5px;color:var(--ink-soft);line-height:1.5}

/* ---- tlačítka ---- */
.btn{
  font:inherit;
  font-weight:700;
  letter-spacing:-.2px;
  border:none;
  border-radius:16px;
  padding:15px 26px;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  transition:transform .12s ease, background .18s ease, opacity .18s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--paper)}
.btn--primary:hover{background:#8f4a44}
.btn--primary[disabled]{opacity:.55;cursor:progress}
.btn--ghost{background:transparent;color:var(--ink-soft);padding-left:6px;padding-right:6px}
.btn--ghost:hover{color:var(--ink)}

/* ---- progres ---- */
.progress{height:2px;background:var(--sand);border-radius:2px;overflow:hidden;margin-bottom:22px}
.progress__bar{display:block;height:100%;width:0;background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.q-count{font-size:13px;color:var(--ink-soft);font-weight:600;margin-bottom:12px}
.q-hint{font-size:14px;color:var(--ink-soft);margin-bottom:18px}
.h2 + .options{margin-top:20px}

/* ---- možnosti odpovědí ---- */
.options{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.opt{
  display:flex;
  align-items:center;
  gap:13px;
  width:100%;
  text-align:left;
  font:inherit;
  font-weight:500;
  padding:15px 17px;
  background:#fff;
  border:1.5px solid #E4D9CE;
  border-radius:18px;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .16s, background .16s, transform .1s;
}
.opt:hover{border-color:#CDBFB2}
.opt:active{transform:scale(.99)}
.opt.is-selected{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.opt__tick{
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:50%;
  border:1.5px solid #CDBFB2;
  display:grid;place-items:center;
  transition:border-color .16s, background .16s;
}
.opt.is-selected .opt__tick{background:var(--accent);border-color:var(--accent)}
.opt.is-selected .opt__tick::after{
  content:"";
  width:8px;height:8px;border-radius:50%;background:var(--paper);
}
.opt--multi .opt__tick{border-radius:7px}
.opt--multi.is-selected .opt__tick::after{border-radius:2px}

.other-field{margin-top:2px}
.other-field input{
  width:100%;
  font:inherit;
  padding:13px 16px;
  border:1.5px solid var(--accent);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
}
.other-field input:focus{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.other-field input::placeholder{color:#B7AEA4}

.q-nav{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* ---- počítání ---- */
.screen--calc{align-items:center;text-align:center;min-height:52dvh;justify-content:center}
.motif--calc{width:156px;margin-bottom:22px}
.motif__path--loop{
  stroke-dasharray:340;
  animation:motif-loop 1.9s ease-in-out infinite;
}
@keyframes motif-loop{
  0%{stroke-dashoffset:340}
  58%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-340}
}
.motif--calc .motif__dot--end{opacity:.9;animation:none}
.calc-text{font-weight:700;font-size:19px;letter-spacing:-.3px}

/* ---- výsledek ---- */
.screen--result{gap:0}
.result-label{font-size:15px;color:var(--ink-soft);margin-bottom:4px}
.result-name{
  font-weight:800;
  font-size:clamp(28px, 7vw, 40px);
  line-height:1.1;
  letter-spacing:-.5px;
}
.result-line{width:min(260px,70%);margin:10px 0 22px}
.result-line svg{width:100%;height:auto;overflow:visible}
.draw-underline{stroke-dasharray:240;stroke-dashoffset:240;animation:draw .8s ease .2s forwards}
.result-why{font-size:17px;margin-bottom:26px}

.card{
  background:#fff;
  border:1.5px solid #EADFD3;
  border-radius:var(--radius-sm);
  padding:22px 20px;
  margin-bottom:16px;
}
.card--soft{background:var(--sand);border-color:transparent}

.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:14px}
.steps li{
  counter-increment:s;
  display:flex;
  gap:13px;
  font-size:15.5px;
}
.steps li::before{
  content:counter(s);
  flex:0 0 auto;
  width:26px;height:26px;
  border-radius:50%;
  border:1.5px solid var(--accent);
  color:var(--accent);
  font-weight:700;
  font-size:13px;
  display:grid;place-items:center;
}

.cta{
  background:var(--deep);
  color:var(--paper);
  border-radius:var(--radius-sm);
  padding:26px 22px;
  margin:10px 0 20px;
}
.cta .h3{color:var(--paper)}
.cta p{font-size:15.5px;margin-bottom:18px;opacity:.95}
.cta .btn--primary{background:var(--paper);color:var(--deep);width:100%}
.cta .btn--primary:hover{background:#fff}

.result-foot{font-size:13px;color:var(--ink-soft);line-height:1.6;text-align:center;margin-top:6px}
.result-foot a{color:var(--ink-soft)}

/* ---- pohyb vypnutý pro citlivé uživatele ---- */
@media (prefers-reduced-motion:reduce){
  .screen,.draw,.draw-underline,.progress__bar,
  .motif__path,.motif__path--loop,.motif__dot,.motif__dot--end{animation:none!important;transition:none!important}
  .draw,.draw-underline,.motif__path,.motif__path--loop{stroke-dashoffset:0!important}
  .motif__dot,.motif__dot--end{opacity:1!important;transform:none!important}
}

/* ---- větší displeje ---- */
@media (min-width:560px){
  body{font-size:18px}
  .stage{padding:36px 0 56px}
}