/* ═══ ТОКЕНЫ — те же, что в site.css ═══════════════════════ */
:root{
  --honey:#F5A623; --honey-dark:#D97706; --cream:#FFF9E6; --brown:#4A2B16;
  --wing:#DFF4FF; --wing-line:#B9E2F5; --white:#fff;
  --line:#F0E3C2; --muted:#7A6450;
  --ok:#2E8B57; --ok-bg:#EAF7EF; --no:#C8472D; --no-bg:#FDEEE9;
  --font-ui:'PT Sans', Arial, sans-serif; --font-head:'Unbounded', 'PT Sans', sans-serif;
  --radius:18px; --radius-s:12px; --tap:46px;
  --fs-task:1.19rem; --fs-answer:1.13rem; --fs-card:1.8rem;
}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--cream);color:var(--brown);font-family:var(--font-ui);font-size:1rem;line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom,0px)}
button{font-family:inherit;color:inherit}
:focus-visible{outline:3px solid var(--honey-dark);outline-offset:2px}

/* ═══ ШАПКА САЙТА (на сервере заменяется общей из site.css) ═══ */
.site-head{background:var(--white);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.site-head .in{max-width:980px;margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;gap:1.2rem}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--brown);font-family:var(--font-head);font-weight:700;font-size:1.02rem}
.logo svg{width:30px;height:30px}
.site-nav{display:flex;gap:1.1rem;margin-left:auto}
.site-nav a{text-decoration:none;color:var(--brown);font-weight:700;padding:.3rem 0;border-bottom:3px solid transparent}
.site-nav a[aria-current]{border-color:var(--honey)}
@media (max-width:820px){.site-nav{display:none}}

/* ═══ ШАПКА УРОКА ═════════════════════════════════════════ */
.wrap--lesson{max-width:820px;margin:0 auto;padding:0 1rem 7rem}
.top{font-size:.88rem;color:var(--muted);margin:1rem 0 .7rem;font-weight:700}
.top a{color:var(--honey-dark);text-decoration:none}
.lh{position:relative;overflow:hidden;background:var(--white);border:2px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.4rem 1.3rem;display:flex;gap:1rem;align-items:center}
.lh::before{content:"";position:absolute;right:-20px;top:-10px;width:260px;height:180px;opacity:.5;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M14 1h28l14 23-14 23H14L0 24z' fill='none' stroke='%23F5C842' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask:linear-gradient(to left,#000,transparent);mask:linear-gradient(to left,#000,transparent)}
.lh-txt{position:relative;flex:1}
.lh-badge{display:inline-block;background:var(--honey);color:var(--white);font-weight:700;font-size:.8rem;padding:.2rem .7rem;border-radius:999px}
.lh-title{font-family:var(--font-head);font-size:clamp(1.45rem,4vw,1.95rem);line-height:1.15;margin:.5rem 0 .3rem}
.lh-sub{margin:0;color:var(--muted);font-size:1.02rem}
.lh img{position:relative;width:84px;height:84px;object-fit:contain;flex-shrink:0}

/* ═══ ЧИПЫ И ПРОГРЕСС ═════════════════════════════════════ */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:1rem 0 .4rem}
.chip{flex:0 0 auto;width:var(--tap);height:var(--tap);border:2px solid var(--line);background:var(--white);border-radius:50%;
  font-family:var(--font-head);font-weight:700;font-size:.95rem;cursor:pointer;display:grid;place-items:center;padding:0}
.chip.is-done{border-color:var(--honey);background:#FFF1CC}
.chip.is-on{background:var(--brown);border-color:var(--brown);color:var(--cream)}
.prog{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:.4rem 0 .3rem}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--honey),var(--honey-dark));transition:width .3s}
.prog-label{font-size:.85rem;color:var(--muted);font-weight:700}

/* ═══ ЗАДАНИЕ ═════════════════════════════════════════════ */
.task{background:var(--white);border:2px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.3rem;margin-top:.8rem;scroll-margin-top:1rem}
.task-num{font-family:var(--font-head);font-size:.8rem;color:var(--honey-dark)}
.task-title{font-family:var(--font-head);font-size:1.22rem;margin:.2rem 0 .4rem;line-height:1.25}
.instr{margin:0 0 1.1rem;font-size:1.05rem;color:var(--muted)}
.ru{font-size:var(--fs-answer)}

/* правило Биззи */
.rule{background:var(--wing);border:2px solid var(--wing-line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.rule p{margin:.2rem 0 .7rem;font-size:1.08rem}
.rule table{border-collapse:collapse;width:100%;margin:.4rem 0 .8rem;font-size:1.1rem;background:var(--white);border-radius:var(--radius-s);overflow:hidden}
.rule td{padding:.55rem .75rem;border-bottom:1px solid var(--wing-line)}
.rule tr:last-child td{border-bottom:none}
.rule td.arr{color:var(--honey-dark);font-weight:700;width:1.5rem;text-align:center}
.rule td.en{color:var(--muted);font-size:.95rem}
.rule b.h{color:var(--honey-dark)}
/* окончания: красная капсула */
.end{display:inline-block;background:#FDE2DE;color:#D62828;font-weight:700;border:1.5px solid #F4B4AA;
  border-radius:999px;padding:0 .38em;margin-left:.06em;line-height:1.3;white-space:nowrap}
/* последняя буква в правилах: заглавная, красная, жирная — <span class='ll'>Й</span> */
.ll{color:#D62828;font-weight:700}
.rule-note{background:var(--white);border-left:5px solid var(--honey);border-radius:0 var(--radius-s) var(--radius-s) 0;padding:.6rem .85rem;margin:.55rem 0 0;font-size:1rem}
.rule-note.warn{border-left-color:var(--no)}
.tablewrap{overflow-x:auto}

/* карточки */
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.7rem}
.fcard{position:relative;min-height:120px;border:2px solid var(--line);border-radius:var(--radius);background:var(--cream);
  cursor:pointer;padding:.9rem .8rem;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.fcard .w{font-size:1.35rem;font-weight:700}
.fcard .c{font-size:1.35rem;font-weight:700;color:var(--honey-dark)}
.fcard .en{font-size:.92rem;color:var(--muted)}
.fcard .back{display:none}
.fcard.is-flipped{background:var(--white);border-color:var(--honey)}
.fcard.is-flipped .front{display:none}.fcard.is-flipped .back{display:block}
.spk{position:absolute;top:.4rem;right:.4rem;width:34px;height:34px;border:none;border-radius:10px;background:var(--wing);cursor:pointer;font-size:.95rem}
.spk:hover{background:var(--honey);color:var(--white)}

/* список пунктов */
.items{list-style:none;margin:0;padding:0;counter-reset:it}
.item{position:relative;padding:.9rem 0 .9rem 1.9rem;border-bottom:1px dashed var(--line);counter-increment:it}
.item::before{content:counter(it) ".";position:absolute;left:0;top:1.05rem;color:var(--honey-dark);font-family:var(--font-head);font-size:.85rem}
.item:last-child{border-bottom:none}
.q{font-size:var(--fs-task);font-weight:700;margin-bottom:.55rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline}
.q.gapline{display:block}
.nw{white-space:nowrap}
/* письмо с образцом (Pro): без автопроверки */
.wr{font-family:inherit;font-size:1.05rem;color:var(--brown);width:100%;min-height:6.5rem;border:2px solid var(--line);border-radius:var(--radius-s);padding:.6rem .75rem;background:#FFFDF6;resize:vertical}
.wr:focus{outline:none;border-color:var(--honey)}
.sample{display:none;margin-top:.55rem;padding:.65rem .85rem;border-radius:var(--radius-s);background:var(--wing);border:2px solid var(--wing-line);font-size:1rem}
.sample.show{display:block}
.sample b{font-family:var(--font-head);font-size:.8rem;color:var(--honey-dark);display:block;margin-bottom:.2rem}
/* чтение */
.read{background:var(--cream);border-left:6px solid var(--honey);border-radius:0 var(--radius-s) var(--radius-s) 0;padding:1rem 1.1rem;font-size:1.1rem;line-height:1.7}
.read p{margin:0 0 .8rem}.read p:last-child{margin:0}
/* короткие пункты в несколько столбиков: cols:2 у задания */
@media (min-width:600px){
  .items--cols{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));column-gap:1.2rem}
  .items--cols .item{padding:.6rem 0 .6rem 1.9rem}
  .items--cols .item::before{top:.8rem}
  .items--cols .gapline input.field{min-width:0;width:6.2rem}
}
/* корзины: разложи слова по столбикам */
.pool{display:flex;flex-wrap:wrap;gap:.45rem;min-height:52px;padding:.45rem;border:2px dashed var(--line);border-radius:var(--radius-s);margin-bottom:.7rem;background:#FFFDF6}
.pool:empty::before{content:"All words are sorted — press Check";color:#B8A68A;align-self:center;padding-left:.3rem}
.baskets{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:.5rem}
.bk{border:2px solid var(--line);border-radius:var(--radius-s);padding:.5rem;min-height:130px;background:var(--white);cursor:pointer;display:flex;flex-direction:column;gap:.35rem}
.bk h4{margin:0 0 .2rem;font-family:var(--font-head);font-size:.82rem;color:var(--honey-dark);line-height:1.25}
.bk.ready{border-color:var(--honey-dark);background:#FFF8E1}
.bk .piece{padding:.3rem .55rem;min-height:38px;font-size:1rem;text-align:left}
.piece.sel{border-color:var(--honey-dark);background:#FFF1CC}
/* картинки: слова — /assets/lex/<транслит>.jpg; сцены урока (-wide) — img/ рядом с уроком */
.pic{margin:0 0 .8rem;width:170px;aspect-ratio:1/1;border-radius:var(--radius-s);overflow:hidden;background:var(--cream);border:2px solid var(--line)}
.pic--wide{width:100%;max-width:640px;aspect-ratio:14/9}
.pic.cpic{width:100%;margin:0 0 .45rem;border-width:0;border-radius:10px}
.pic.cpic.pic--missing{border:2px dashed var(--line)}
.fcard.has-pic{justify-content:flex-start}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic figcaption{display:none}
.pic--missing{border-style:dashed;display:grid;place-items:center}
.pic--missing img{display:none}
.pic--missing figcaption{display:block;font-size:.82rem;color:var(--muted);padding:.5rem;text-align:center;word-break:break-all}
/* таблица правила на телефоне: русские слова в строку, пояснение — под ними */
@media (max-width:767px){
  .rule table,.rule tbody{display:block}
  .rule tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .35rem;padding:.5rem .55rem;border-bottom:1px solid var(--wing-line)}
  .rule tr:last-child{border-bottom:none}
  .rule td{border:none;padding:0}
  .rule td.arr:empty{display:none}
  .rule{padding:.85rem .6rem}
  .rule table{font-size:.95rem}
  .rule td .end{padding:0 .28em}
  .rule td.arr{width:auto}
  .rule td.en{flex-basis:100%;padding-top:.2rem}
}
@media (max-width:767px){.pic:not(.pic--wide){width:140px}}
/* связный текст с пропусками */
.passage{background:var(--cream);border-left:6px solid var(--honey);border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:1rem 1.1rem;font-size:var(--fs-answer);line-height:2.35}
.passage{line-height:1.9}
/* пропуск: поле, под ним подсказка — занимает место одного слова */
.passage .gp{display:inline-flex;flex-direction:column;vertical-align:top;margin:.1rem .1rem .35rem;line-height:1.2}
.passage .field{min-width:0;width:6.6rem;padding:.15rem .45rem;min-height:36px;font-size:1.05rem}
.passage .h{color:var(--honey-dark);font-size:.8rem;padding-left:.3rem;margin-top:.12rem}
.passage .inl{display:none;color:#1f6a41;font-size:.85rem;font-weight:700;padding-left:.3rem}
.passage .inl.show{display:block}
.src{color:var(--muted);font-size:.92rem;font-style:italic;margin:.5rem 0 0}
.passage-title{font-family:var(--font-head);font-size:1.02rem;margin:0 0 .5rem}
.en-line{color:var(--muted);font-size:1rem;margin-bottom:.25rem}
.from{color:var(--muted);font-size:1.02rem;margin-bottom:.3rem}
.q .en{font-weight:400;color:var(--muted);font-size:1rem}
.hint{color:var(--honey-dark);font-weight:700}

.pieces{display:flex;flex-wrap:wrap;gap:.5rem}
.piece{border:2px solid var(--line);background:#FFFDF6;border-radius:var(--radius-s);padding:.5rem .9rem;min-height:var(--tap);
  font-size:var(--fs-answer);font-weight:700;cursor:pointer;transition:border-color .12s,background .12s}
.piece:hover:not(:disabled){border-color:var(--honey)}
.piece.right{border-color:var(--ok);background:var(--ok-bg)}
.piece.wrong{border-color:var(--no);background:var(--no-bg)}
.piece:disabled{cursor:default}
.piece.dim{opacity:.45}

.why{display:none;margin-top:.55rem;padding:.55rem .8rem;border-radius:var(--radius-s);font-size:1rem}
.why.show{display:block}
.why.ok{background:var(--ok-bg);color:#1f6a41}
.why.no{background:var(--no-bg);color:#8f2f1b}

/* ввод */
.field{font-family:inherit;font-size:var(--fs-answer);font-weight:700;color:var(--brown);border:2px solid var(--line);border-radius:var(--radius-s);
  padding:.5rem .75rem;min-height:var(--tap);background:#FFFDF6;min-width:9rem;max-width:100%}
.field.wide{width:100%}
.field:focus{outline:none;border-color:var(--honey)}
.field.right{border-color:var(--ok);background:var(--ok-bg)}
.field.wrong{border-color:var(--no);background:var(--no-bg)}
select.field{cursor:pointer}
.gapline{font-size:var(--fs-task);line-height:2.3}
.gapline .field{min-width:7.5rem;padding:.25rem .6rem;min-height:40px}
/* выпадающий список в пропуске: шире, чтобы помещались «во вре́мя», «в тече́ние» */
.gapline select.field{min-width:10rem;width:auto;max-width:100%}

/* сборка */
.build{min-height:54px;border:2px dashed var(--line);border-radius:var(--radius-s);padding:.45rem;display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.6rem;background:#FFFDF6}
.build:empty::before{content:"Tap the words in order";color:#B8A68A;align-self:center;padding-left:.3rem}
.build.right{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.build.wrong{border-style:solid;border-color:var(--no);background:var(--no-bg)}
.build .piece{background:var(--wing);border-color:var(--wing-line)}

/* соединить пары */
.match{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1rem}
.match .col{display:flex;flex-direction:column;gap:.55rem}
.match .piece{width:100%;text-align:left}
.match .piece.sel{border-color:var(--honey-dark);background:#FFF1CC}

/* найти ошибку */
.sent{display:flex;flex-wrap:wrap;gap:.35rem}
.sent .piece{padding:.35rem .6rem;min-height:40px;background:var(--white)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1.1rem}
.btn{border:none;border-radius:var(--radius-s);padding:.65rem 1.2rem;min-height:var(--tap);font-weight:700;font-size:1.02rem;cursor:pointer}
.btn--primary{background:linear-gradient(135deg,var(--honey),var(--honey-dark));color:var(--white)}
.btn--dark{background:var(--brown);color:var(--cream)}
.btn--ghost{background:var(--white);border:2px solid var(--line)}
.btn:disabled{opacity:.4;cursor:default}
.score{font-weight:700;color:var(--muted)}
.score b{color:var(--ok)}
.model{display:none;margin-top:.45rem;font-size:1rem;color:#1f6a41}
.model.show{display:block}
.model span{color:var(--muted);font-size:.85rem;margin-right:.35rem}

/* навигация */
.nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px));z-index:20}
.nav .in{max-width:820px;margin:0 auto;display:flex;justify-content:space-between;gap:.7rem}

/* итог */
.result{text-align:center}
.result .big{font-family:var(--font-head);font-size:3rem;color:var(--honey-dark);margin:.4rem 0}
.result table{margin:1rem auto;border-collapse:collapse;text-align:left;font-size:1rem}
.result td{padding:.35rem .8rem;border-bottom:1px dashed var(--line)}
.result td:last-child{text-align:right;font-weight:700}
.result .actions{justify-content:space-between}
.bubble{display:inline-block;background:var(--wing);border:2px solid var(--wing-line);border-radius:18px;padding:.6rem 1rem;font-weight:700;font-size:1.1rem}

/* клавиатура */
.kbd-toggle{position:fixed;right:1rem;bottom:calc(4.6rem + env(safe-area-inset-bottom,0px));z-index:21;border:none;border-radius:999px;
  background:var(--brown);color:var(--cream);font-weight:700;padding:.55rem .95rem;min-height:var(--tap);cursor:pointer;display:none}
.kbd-toggle.show{display:block}
.kbd{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#F4EAD2;border-top:2px solid var(--line);padding:.5rem .4rem calc(.5rem + env(safe-area-inset-bottom,0px));display:none}
.kbd.show{display:block}
.kbd .row{display:flex;justify-content:center;gap:.25rem;margin:.25rem 0}
.kbd button{flex:1 1 0;max-width:46px;min-height:44px;border:none;border-radius:8px;background:var(--white);font-size:1.12rem;font-weight:700;cursor:pointer;box-shadow:0 1px 0 #d9c9a4}
.kbd button.w{max-width:120px;flex:2 1 0;font-size:.9rem}

@media (max-width:1023px){
  :root{font-size:17.5px;--fs-task:1.28rem;--fs-answer:1.28rem}
  .lh-title{font-size:1.7rem}
  .chip{font-size:1rem}
}
@media (max-width:767px){
  :root{font-size:18px}
  .lh img{display:none}
  .match{gap:.5rem}
  .fcards{grid-template-columns:1fr 1fr}
  .nav .btn{flex:1 1 0}
  .task{padding:1.1rem .9rem}
  .gapline select.field{font-size:1rem;padding:.25rem .4rem}
  .passage{padding:.8rem .75rem;font-size:1.12rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.lnk{text-decoration:none;display:inline-flex;align-items:center;color:inherit}
.btn--primary.lnk{color:var(--white)}

/* подвал сайта на странице урока */
.site-foot{border-top:1px solid #F0E2C5;background:#fff;margin-top:2rem;padding:1.1rem 0 5.5rem;font:400 14px/1.5 'PT Sans',Arial,sans-serif;color:#6B4B35}
.site-foot .in{max-width:64rem;margin:0 auto;padding:0 1rem;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.site-foot nav a{color:#3A1E0C;text-decoration:none;font-weight:700;font-size:13px}
.site-foot nav a:hover{text-decoration:underline}
.site-head .logo img{border-radius:6px}

/* ── поля ввода шире; два столбца — только если места хватает ── */
.items--cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,27rem),1fr))}
.gapline input.field,
.items--cols .gapline input.field{width:auto;min-width:9rem;max-width:100%}
.gapline select.field{min-width:11rem}
@media (max-width:1000px){
  .items--cols{grid-template-columns:1fr}
  .gapline input.field,.items--cols .gapline input.field{min-width:8rem}
}