/* Komponentai: virsutine juosta, vaizdai, sarasas, footer. */

/* ---- top bar ---- */
.bar{display:flex;align-items:baseline;gap:14px;padding:18px 0 10px;flex-wrap:wrap}
.mark{font-family:Literata,Georgia,serif;font-weight:600;font-size:17px;letter-spacing:-.01em}
.mark i{font-style:italic;color:var(--pine)}
.mark-lvl{align-self:center;font-variant-numeric:tabular-nums}
/* logotipo ženklas: juostoje prieš .mark, įvade virš antraštės */
.logo{display:block;flex-shrink:0}   /* proporcija 204:186 — viewBox #mark */
.bar .logo{width:24px;height:22px;align-self:center;margin-right:-6px}
.hero .logo{width:61px;height:56px;margin-bottom:22px}
.bar .sp{flex:1}
.bar-item{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar-item b{color:var(--ink);font-weight:500}
.navbtn{font-size:13px;color:var(--muted);padding:3px 0;border-bottom:1px solid transparent}
.navbtn:hover{color:var(--ink);border-bottom-color:var(--rule)}
.navbtn[aria-current="page"]{color:var(--ink);border-bottom-color:var(--pine)}

.meter{height:3px;background:var(--rule);position:relative;overflow:hidden}
.meter span{position:absolute;inset:0 auto 0 0;background:var(--pine);width:0;transition:width .35s ease}
@media (prefers-reduced-motion:reduce){.meter span{transition:none}}

/* statinis įvadas index.html — grįžusiam lankytojui slepiamas iki pirmo render() */
.ret #introStatic{display:none}

/* ---- home ---- */
.hero{padding:22px 0 8px}
.due-figure{font-family:Literata,Georgia,serif;font-size:clamp(56px,17vw,104px);line-height:.92;letter-spacing:-.035em;font-weight:400}
.due-label{font-family:Literata,Georgia,serif;font-size:19px;line-height:1.35;color:var(--muted);margin-top:14px;max-width:30ch}
.note{margin-top:18px;font-size:14px;color:var(--muted)}
.prose{font-size:15px;color:var(--muted);margin-top:12px;max-width:62ch}
.due-label b{color:var(--ink);font-weight:600}

.cta{
  margin-top:30px;display:inline-flex;align-items:center;gap:10px;
  background:var(--pine);color:var(--page);
  padding:14px 26px;border-radius:2px;font-weight:500;font-size:16px;
}
/* .cta ir .next — vienas pagrindinio veiksmo stilius (pušis); skiriasi tik dydžiu */
:root[data-theme="dark"] :is(.cta,.next),
:root:not([data-theme="light"]) :is(.cta,.next){color:#141715}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) :is(.cta,.next){color:#F8F8F4}}
.cta:hover,.next:hover{filter:brightness(1.08)}
.cta kbd{font:inherit;font-size:12px;opacity:.85;border:1px solid currentColor;border-radius:2px;padding:0 4px}
/* :root — kad nusvertų temos spalvos taisykles viršuje (jos 0,3,0) */
:root .cta[disabled]{background:none;color:var(--muted);border:1px solid var(--field);cursor:default;filter:none}

.facts{margin-top:40px;border-top:1px solid var(--rule)}
.fact{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14px}
.fact dt{color:var(--muted)}
.fact dd{font-variant-numeric:tabular-nums}

.setting{margin-top:26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.setting input[type=range]{accent-color:var(--pine);width:150px}
.setting b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
/* ≥44px lietimo plotas, išdėstymas nepasikeičia — neigiama paraštė suvalgo padding */
.setting label{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:-12px 0;cursor:pointer}
.setting input[type=checkbox]{width:18px;height:18px;flex:none;cursor:pointer}
.setting input[type=range]{height:44px;margin:-14px 0}

/* ---- card ---- */
.card{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-top:8px}
.kicker{font-size:13px;color:var(--faint);margin-bottom:20px;display:flex;gap:10px;align-items:center}
.kicker .step{font-variant-numeric:tabular-nums}
.kicker .quit{margin-left:auto;font-size:13px}
.tag{border:1px solid var(--rule);border-radius:2px;padding:1px 7px;font-size:12px;color:var(--muted)}
.tag.new{border-color:var(--pine);color:var(--pine)}

.headword{
  font-family:Literata,Georgia,serif;
  font-size:clamp(38px,9.5vw,60px);line-height:1.05;letter-spacing:-.025em;
  word-break:break-word;
}
.pos{font-family:Literata,Georgia,serif;font-style:italic;color:var(--muted);font-size:17px;margin-top:6px}
.prompt-lt{font-size:clamp(26px,6.5vw,38px);line-height:1.2;font-weight:400}
.wordline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:9px}
.ipa{font-family:Literata,Georgia,serif;font-size:17px;color:var(--muted);white-space:nowrap}
.say{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;
  background:var(--raise);color:var(--muted);flex:none;
}
.say:hover{color:var(--ink);border-color:var(--ink)}
.say.on{color:var(--pine);border-color:var(--pine)}
.say svg{width:15px;height:15px}
.say.sm{width:25px;height:25px}
.say.sm svg{width:11px;height:11px}
/* nematomas ≥44px paspaudimo plotas aplink mažus valdiklius (WCAG 2.5.5) */
.navbtn,.link,.say{position:relative}
.navbtn::after{content:"";position:absolute;inset:-10px -5px}
.link::after{content:"";position:absolute;inset:-12px -6px}
.consent .link::after{inset:-13px -6px}
.setting .link::after{inset:-11px -8px}
.say::after{content:"";position:absolute;inset:-6px}
.say.sm::after{inset:-11px}
.study-lt{margin-top:22px}
.revealed{font-family:Literata,Georgia,serif;font-size:clamp(28px,7vw,40px);line-height:1.1;letter-spacing:-.02em;margin-top:4px}
.sentence{font-family:Literata,Georgia,serif;font-size:21px;line-height:1.55;margin-top:22px;max-width:40ch}
.sentence u{text-decoration:none;border-bottom:2px solid var(--pine);padding-bottom:1px}
.blank{display:inline-block;min-width:5.5em;border-bottom:2px solid var(--ink);vertical-align:baseline}
.hint{font-size:15px;color:var(--muted);margin-top:14px}

.answer{margin-top:28px}
.typed{
  width:100%;background:none;border:none;border-bottom:2px solid var(--field);
  font-family:Literata,Georgia,serif;font-size:27px;padding:6px 0;
}
/* fokusas: linija pastorėja iki 3px ir tampa --pine (WCAG 2.4.7) */
.typed:focus{outline:none;border-bottom-color:var(--pine);box-shadow:0 1px 0 var(--pine)}
.typed::placeholder,.search::placeholder{color:var(--faint)}
.typed:disabled{opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.typed.ok{border-bottom-color:var(--pine)}
.revealed u.miss{text-decoration:none;color:var(--oxide);border-bottom:3px solid var(--oxide)}

.choices{display:grid;gap:8px;margin-top:26px}
.choice{
  text-align:left;border:1px solid var(--rule);border-radius:2px;
  padding:13px 15px;background:var(--raise);box-shadow:var(--shadow);
  display:flex;gap:12px;align-items:baseline;
}
.choice:hover{border-color:var(--ink)}
.choice .n{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;min-width:12px}
.choice.right{border-color:var(--pine);background:var(--pine-soft)}
.choice.wrong{border-color:var(--oxide);background:var(--oxide-soft)}
.choice[disabled]{cursor:default}
/* ✓ / ✗ — kad teisingas ir klaidingas skirtųsi ne tik spalva (WCAG 1.4.1) */
.choice .res{margin-left:auto;font-weight:600}
.choice.right .res{color:var(--pine)}
.choice.wrong .res{color:var(--oxide)}

.verdict{margin-top:24px;font-size:15px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.verdict .ok{color:var(--pine);font-weight:500}
.verdict.lead{margin-top:22px}
.verdict.lead .ok,.verdict.lead .no{font-family:Literata,Georgia,serif;font-size:22px;font-weight:500;letter-spacing:-.01em}
.verdict .no{color:var(--oxide);font-weight:500}
.verdict .sol{font-family:Literata,Georgia,serif;font-size:19px}
.typed.yours{border-bottom-color:var(--oxide);color:var(--muted);min-height:1.5em}
.typed.yours mark{background:var(--oxide-soft);color:var(--oxide);border-radius:2px;padding:0 1px}


.rowbtns{display:flex;gap:18px;align-items:center;margin-top:26px;flex-wrap:wrap}
.link{font-size:14px;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:1px}
.link:hover{color:var(--ink);border-bottom-color:var(--ink)}
a.link{text-decoration:none}
.next{background:var(--pine);color:var(--page);padding:12px 24px;border-radius:2px;font-weight:500}
.next .when{font-weight:400;opacity:.85}
.next kbd{font:inherit;font-size:12px;opacity:.75;margin-left:8px}

/* ---- atsarginė kopija ---- */
.nudge{margin-top:28px;font-size:14px;color:var(--muted)}
#impMsg p{margin-top:14px;color:var(--ink)}
.raw{margin-top:34px;border-top:1px solid var(--rule);padding-top:14px}
.raw summary{font-size:14px;color:var(--muted);cursor:pointer;padding:12px 0;width:max-content}
.raw summary:hover{color:var(--ink)}
.raw .rowbtns{margin-top:12px}
/* pradžios ekrano nustatymai — suskleisti po dienos užduotimi */
.prefs summary{width:auto}
.prefs-now{color:var(--faint)}
.prefs .setting:first-of-type{margin-top:12px}
.prefs .setting:last-child{margin-bottom:14px}

/* ---- done ---- */
.done h1,.done-h{font-family:Literata,Georgia,serif;font-size:clamp(32px,8vw,46px);line-height:1.1;letter-spacing:-.02em;font-weight:400}
.intro-title{font-family:Literata,Georgia,serif;font-size:clamp(30px,7.5vw,48px);line-height:1.12;letter-spacing:-.025em;font-weight:400;max-width:17ch}
.steps{list-style:none;counter-reset:s;margin:34px 0 30px;border-top:1px solid var(--rule)}
.steps li{counter-increment:s;padding:14px 0 14px 38px;border-bottom:1px solid var(--rule);position:relative;font-size:15.5px;color:var(--muted);max-width:56ch}
.steps li::before{content:counter(s);position:absolute;left:0;top:14px;font-family:Literata,Georgia,serif;font-size:15px;color:var(--pine)}
.steps li b{color:var(--ink);font-weight:500}
.code{
  width:100%;height:110px;margin-top:20px;resize:vertical;
  background:var(--raise);border:1px solid var(--field);border-radius:2px;
  padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.5;color:var(--muted);
}
.code:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 1px var(--pine)}
.section-lead{margin-top:32px;font-size:15px;font-weight:400;color:var(--muted)}
/* ---- pabaiga: šiandienos žodžiai ---- */
.grew{margin-top:30px;font-size:15px;color:var(--muted)}
.grew b{color:var(--ink);font-weight:500}
.today{list-style:none;margin-top:10px;border-top:1px solid var(--rule)}
.today li{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:14px;padding:12px 0 11px;border-bottom:1px solid var(--rule)}
.today .tw{font-family:Literata,Georgia,serif;font-size:clamp(26px,6.4vw,34px);line-height:1.15;letter-spacing:-.02em}
/* pušies taškas — kaip kartojamas žodis sąraše; lapas lieka tik išmoktiems (21+ d.) */
.today .tw::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pine);margin-right:12px;vertical-align:.32em}
.today .tt{flex:1;min-width:0;font-size:15px;color:var(--muted)}
.today.again .tw::before{background:linear-gradient(90deg,var(--pine) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--pine)}
.today.again .tw{font-size:clamp(22px,5.4vw,28px)}
h2.grew{font-weight:400}
.grew + h2.grew{margin-top:18px}
.today .say{align-self:center}
.done .due-label{max-width:none;font-size:17px}
.lvls{display:grid;gap:8px;margin:12px 0 14px}
.lvl{
  display:flex;align-items:center;gap:15px;text-align:left;
  border:1px solid var(--rule);border-radius:2px;background:var(--raise);
  padding:12px 15px;box-shadow:var(--shadow);
}
.lvl:hover{border-color:var(--ink)}
.lvl.sel{border-color:var(--pine);background:var(--pine-soft)}
.lvl-code{font-family:Literata,Georgia,serif;font-size:21px;min-width:34px;letter-spacing:-.01em}
.lvl.sel .lvl-code{color:var(--pine)}
.lvl-body{flex:1;min-width:0;display:flex;flex-direction:column}
.lvl-title{font-size:15px;font-weight:500}
.lvl-hint{font-size:13px;color:var(--muted)}
.lvl-n{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.tab{
  border:1px solid var(--rule);border-radius:2px;padding:5px 13px;
  font-size:13.5px;color:var(--muted);background:var(--raise);
}
.tab:hover{color:var(--ink);border-color:var(--ink)}
.tab{position:relative}
.tab::after{content:"";position:absolute;inset:-7px -2px}
.tab.sel{border-color:var(--pine);color:var(--pine);background:var(--pine-soft)}

/* ---- list ---- */
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted);margin:0 0 12px}
.legend .dot{margin-right:6px}
.search{appearance:none;width:100%;background:var(--raise);border:1px solid var(--field);border-radius:2px;padding:10px 12px;margin-bottom:6px}
.listline{display:flex;gap:11px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--rule)}
.listline .w{font-family:Literata,Georgia,serif;font-size:18px;min-width:0}
/* vertimas lūžta, o ne nukerpamas daugtaškiu — siaurame ekrane neprarandama informacija (WCAG 1.4.10) */
.listline .t{color:var(--muted);font-size:14px;flex:1;min-width:0;overflow-wrap:break-word}
.listline .st{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
/* nepradėtas — tuščias apskritimas (--field ≥3:1), mokomas — pušies žiedas, kartojamas — pušis, išmoktas — lapas */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:none;box-shadow:inset 0 0 0 1px var(--field);margin-right:7px;vertical-align:middle}
.dot.learning{background:linear-gradient(90deg,var(--pine) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--pine)}
.dot.young{background:var(--pine);box-shadow:none}
.dot.mature{background:var(--leaf);box-shadow:none}

footer{padding:16px 0 26px;font-size:12.5px;color:var(--faint);border-top:1px solid var(--rule)}
/* ≥24px paspaudimo plotas (WCAG 2.5.8) */
footer .link{display:inline-block;padding:5px 0 3px;font-size:12.5px}
.sync{display:inline-flex;align-items:center;gap:6px}
.sync i{width:6px;height:6px;border-radius:50%;background:var(--faint);display:inline-block;font-style:normal}
.sync.on i{background:var(--pine)}

/* ---- sutikimo juosta ----
   sticky, ne fixed: užima vietą sraute, tad slinkus iki galo neuždengia footer */
.consent{
  position:sticky;bottom:0;z-index:10;
  background:var(--raise);border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
}
.consent-in{
  max-width:640px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:18px;
}
.consent p{font-size:13.5px;line-height:1.45;color:var(--muted);flex:1}
.consent p b{color:var(--ink);font-weight:500}
.consent p .link{font-size:inherit;white-space:nowrap}
.consent-btns{display:flex;gap:8px;flex-shrink:0}
/* abu mygtukai vienodi — atsisakyti turi būti taip pat lengva kaip sutikti */
.consent-btns button{
  border:1px solid var(--ink);border-radius:2px;
  padding:11px 18px;font-size:14px;font-weight:500;
}
.consent-btns button:hover{background:var(--ink);color:var(--page)}

@media (max-width:560px){
  .listline .ipa{display:none}
  /* „nepradėtas“ kartojasi beveik kiekvienoje eilutėje — siaurame ekrane užtenka taško */
  .listline .st.none{display:none}
}

@media (max-width:560px){
  .consent-in{flex-direction:column;align-items:stretch;gap:12px}
  .consent-btns button{flex:1}
  /* kortelės veiksmai prilipę apačioje, kur pasiekia nykštys — nereikia slinkti po kiekvieno atsakymo */
  .act{
    position:sticky;bottom:0;z-index:5;margin:14px calc(var(--gut) * -1) 0;
    padding:0 var(--gut) calc(14px + env(safe-area-inset-bottom));
    background:var(--page);box-shadow:0 -1px 0 var(--rule);
  }
  .act > :first-child{margin-top:14px}
  .act .next{flex:1 1 auto;justify-content:center}
}
/* kortelės metu sutikimo juosta lieka po poraštės ir neuždengia atsakymų ar fokuso (WCAG 2.4.11) */
body[data-view="card"] .consent{position:static}
/* lietimo ekrane klavišų užuominos nereikalingos */
@media (hover:none){.cta kbd,.next kbd,.choice .n,.keys-only{display:none}}

@media (max-width:420px){
  /* antraštė telpa į vieną eilutę; serija rodoma pabaigos ekrane */
  .bar{gap:12px}
  #barStreak{display:none}
  .consent-in{padding:12px 16px}
}