/* Дополнения к тетради: проверки, подсказки, прогресс, схемы. */
:root{
  --ok:#2f8a5c;
  --ok-bg:rgba(47,138,92,.1);
  --bad-bg:rgba(194,69,47,.09);
}

.nav .count{
  margin-left:auto;flex:none;font-family:"Caveat",cursive;font-size:20px;color:var(--pencil);
  background:rgba(47,58,86,.07);border-radius:99px;padding:1px 12px;white-space:nowrap;
}
.nav .count b{color:var(--ok);font-weight:600}

/* обложка: план дня */
.day{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.day li{border-bottom:1px solid var(--line)}
.day a{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:baseline;padding:11px 4px;color:var(--ink);text-decoration:none;
       transition:transform .25s var(--ease),color .2s var(--ease)}
.day a:hover{transform:translateX(6px);color:var(--red)}
.day .tm{font-family:"Caveat",cursive;font-size:21px;color:var(--red)}
.day .mn{font-size:13.5px;color:var(--ink-faint);white-space:nowrap}
.day .dn{color:var(--ok);font-family:"Caveat",cursive;font-size:19px;white-space:nowrap}

.bar{height:8px;border-radius:99px;background:rgba(31,36,48,.07);overflow:hidden;margin:18px 0 6px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e0b44a,var(--ok));border-radius:99px;transition:width .6s var(--ease)}
.bar-note{margin:0;font-size:14px;color:var(--ink-soft)}

/* шапка предмета */
.subj-meta{margin:0 0 4px;color:var(--ink-faint);font-size:14px}
.asked{margin:0 0 16px;padding:10px 14px;border-radius:10px;background:rgba(31,36,48,.04);font-size:15.5px}
.asked b{font-weight:600}

/* задача */
.task{padding:18px 0 20px;border-top:1px dashed var(--line)}
.task:first-of-type{border-top:0}
.task-h{display:flex;gap:12px;align-items:baseline;margin:0 0 8px}
.task-h .num{margin-top:2px}
.task-h .ttl{font-family:"Caveat",cursive;font-size:23px;color:var(--pencil);line-height:1.2}
.task-h .st{margin-left:auto;font-family:"Caveat",cursive;font-size:19px;color:var(--ink-faint);white-space:nowrap}
.task.done .task-h .st{color:var(--ok)}
.cond{margin:0 0 12px;font-size:16.5px}
.big{font-size:19px;letter-spacing:.01em;margin:4px 0 14px;text-align:center}
sup{font-size:.68em;line-height:0}

/* проверка: варианты */
.opts{display:grid;gap:8px;margin:0 0 6px}
.opt{font:inherit;font-size:15.5px;text-align:left;cursor:pointer;min-height:46px;
     padding:10px 14px;border-radius:11px;border:1.5px solid var(--line);background:var(--paper-2);color:var(--ink);
     transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease-spring)}
.opt:hover{border-color:var(--pencil);transform:translateY(-1px)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.wrong{border-color:var(--red);background:var(--bad-bg)}
.opt[disabled]{cursor:default;transform:none}

/* проверка: числа */
.nums{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 6px}
.nums label{display:flex;align-items:center;gap:8px;font-size:16px}
.nums input{font:inherit;font-size:17px;width:110px;min-height:44px;padding:6px 10px;border-radius:10px;
            border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.nums input:focus{outline:none;border-color:var(--pencil)}
.nums input.right{border-color:var(--ok);background:var(--ok-bg)}
.nums input.wrong{border-color:var(--red);background:var(--bad-bg)}
.nums .u{color:var(--ink-soft);font-size:15px}
.go{font:inherit;font-size:15px;min-height:44px;padding:6px 18px;border-radius:99px;border:0;cursor:pointer;
    background:var(--pencil);color:var(--paper-2);transition:transform .2s var(--ease-spring),opacity .2s var(--ease)}
.go:hover{transform:translateY(-1px);opacity:.92}

/* проверка: порядок */
.pool,.line{display:flex;flex-wrap:wrap;gap:8px;min-height:46px;margin:0 0 8px}
.line{padding:8px;border-radius:12px;border:1.5px dashed var(--line)}
.chip{font:inherit;font-size:15px;min-height:42px;padding:6px 14px;border-radius:99px;cursor:pointer;
      border:1.5px solid var(--pencil);background:var(--paper-2);color:var(--pencil);
      transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease-spring)}
.chip:hover{transform:translateY(-1px)}
.line .chip{background:var(--pencil);color:var(--paper-2)}
.line.right{border-color:var(--ok);background:var(--ok-bg)}
.line.wrong{border-color:var(--red);background:var(--bad-bg)}
.line:empty::before{content:"нажимай по порядку";color:var(--ink-faint);font-size:14px;padding:10px 6px}

/* проверка: самопроверка */
.self{list-style:none;margin:0 0 6px;padding:0}
.self li{margin:0 0 6px}
.self label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:15.5px;padding:6px 4px;border-radius:8px}
.self input{width:20px;height:20px;margin-top:2px;accent-color:var(--ok);flex:none}

/* ответ проверки */
.fb{margin:8px 0 0;padding:10px 14px;border-radius:10px;font-size:15px;line-height:1.5;display:none}
.fb.show{display:block;animation:unfold .35s var(--ease)}
.fb.good{background:var(--ok-bg);color:#245f41}
.fb.bad{background:var(--bad-bg);color:#8b2f1f}

/* подсказка и решение */
.tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.tools .reveal{min-height:40px}
.pane{display:none;margin-top:12px}
.pane.open{display:block;animation:unfold .35s var(--ease)}
.hint{padding:10px 14px;border-radius:10px;background:rgba(224,180,74,.14);font-size:15.5px}
.hint::before{content:"подсказка";display:block;font-family:"Caveat",cursive;font-size:19px;color:#9a6b00;margin-bottom:2px}
.write{margin:12px 0 0;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);font-size:15.5px}
.write::before{content:"что написать в тетрадь";display:block;font-family:"Caveat",cursive;font-size:19px;color:var(--red);margin-bottom:4px}

/* шпаргалка формул */
.formulas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 16px}
.formulas div{padding:8px 12px;border-radius:10px;background:rgba(47,95,208,.06);border:1px solid rgba(47,95,208,.14);font-size:15.5px;text-align:center}
.formulas small{display:block;color:var(--ink-faint);font-size:12.5px}

/* рисунок пирамиды */
.fig{display:block;width:100%;max-width:360px;margin:6px auto 12px}
.fig line{stroke:var(--pencil);stroke-width:2.2;stroke-linecap:round}
.fig .dash{stroke-dasharray:7 6;stroke-width:1.8}
.fig .thin{stroke-width:1.4}
.fig circle{fill:var(--pencil)}
.fig text{font-family:"Literata",Georgia,serif;font-style:italic;font-size:17px;fill:var(--ink)}

/* схема сюжета */
.route{list-style:none;margin:0;padding:0;position:relative}
.route::before{content:"";position:absolute;left:13px;top:10px;bottom:10px;width:2px;background:rgba(194,69,47,.3)}
.route li{position:relative;padding:0 0 16px 42px}
.route li::before{content:"";position:absolute;left:7px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--paper-2);border:2px solid var(--red)}
.route li.town::before{background:var(--red)}
.route b{display:block;font-weight:600;font-size:16.5px}
.route span{display:block;font-size:15px;color:var(--ink-soft);line-height:1.55}
.route em{font-style:normal;font-family:"Caveat",cursive;font-size:19px;color:var(--red)}

.model{margin:12px 0 0;padding:12px 16px;border-radius:10px;background:rgba(31,36,48,.035);font-size:16px;line-height:1.7}
.model::before{content:"образец — перескажи своими словами";display:block;font-family:"Caveat",cursive;font-size:19px;color:var(--pencil);margin-bottom:4px}

.submit{margin:0;padding-left:22px}
.submit li{margin:0 0 10px;font-size:16px}
.submit li small{display:block;color:var(--ink-soft);font-size:14px}

@media (max-width:720px){
  .big{font-size:17px}
  .nums input{width:96px}
  .day a{grid-template-columns:54px 1fr;row-gap:0}
  .day .mn,.day .dn{grid-column:2}
  .nav .count{position:sticky;right:-14px;background:#f1ece0;box-shadow:-10px 0 12px 2px #f3eee3}
  .task-h .ttl{font-size:21px}
}

@media print{
  .nav,.tools,.opts,.nums,.pool,.line,.self,.fb{display:none!important}
  .pane{display:block!important}
}

.reveal[aria-expanded="true"]{background:var(--pencil);color:var(--paper-2)}
.again{font:inherit;font-size:14px;background:none;border:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer;padding:4px 2px}
.q{margin:0 0 10px;font-size:16.5px}