/* Общий вид страниц-тренажёров: тетрадь в клетку. Подключается из sto.html, vyrazheniya.html, zadachi.html, vremya.html, umnozhenie.html */
:root{
  --desk:#efe9dc;--paper:#fffdf6;--grid:#e2eaf3;--margin:#f0b3b3;
  --text:#262a33;--muted:#8a909b;--ink:#1d3c78;--line:#c8d3e1;--accent:#2a64c9;
  --ok:#2c7a34;--ok-bg:#e6f3e7;--bad:#c42b2b;--bad-bg:#fbe9e9;--empty:#b7791f;--empty-bg:#fff4dc;
  --star:#f0a91b;--star-off:#e4dccb;--ribbon:#e07b2e;--ribbon2:#3f7fcf;
  --pad-l:76px;--pad-r:40px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--text);font:16px/1.45 "Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif}
[hidden]{display:none!important}
.sheet{position:relative;max-width:1000px;margin:28px auto;padding:20px var(--pad-r) 30px var(--pad-l);background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:20px 20px;
  border-radius:6px;box-shadow:0 1px 2px rgba(60,45,20,.08),0 10px 30px rgba(60,45,20,.10)}
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:56px;width:2px;background:var(--margin)}

/* меню разделов вверху каждой страницы */
.sections{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 14px;font-size:15px}
.sections a{color:var(--accent);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.sections a:hover{border-bottom-color:rgba(42,100,201,.35)}
.sections a[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}

.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.tabs button{font:inherit;font-size:16px;cursor:pointer;color:#4b505b;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 16px}
.tabs button:hover{border-color:#9fb0c7}
.tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
button:focus-visible,a:focus-visible{outline:3px solid rgba(42,100,201,.35);outline-offset:2px}

h1{margin:0;font-size:34px;line-height:1.15;color:var(--ink)}
h2{margin:0 0 10px;font-size:22px;color:var(--ink)}
.sub{margin:6px 0 18px;font-size:17px;color:#4b505b}
.panel{display:none}
.panel.on{display:block}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 16px}
.tip{margin:0 0 16px;padding:10px 14px;max-width:46em;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;font-size:16px}
.note{margin-top:22px;font-size:14px;color:#5c6270;max-width:52em}

.btn,.seg button,.chip{font:inherit;font-size:15px;cursor:pointer;color:var(--text)}
.btn{padding:9px 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff}
.btn:hover{border-color:#9fb0c7}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;font-size:17px;padding:11px 22px}
.btn.primary:hover{background:#2257b3}
.btn.small{padding:5px 10px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:default}
.seg{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.seg button{border:0;background:transparent;padding:9px 14px}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff;font-weight:600}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.chip{padding:6px 12px;border-radius:999px;border:1.5px solid #e3c98a;background:#fff8e6}
.chip:hover{border-color:#c9a24a}

/* игра: шапка с прогрессом, задание, сообщение-проверка */
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:#4b505b;font-size:15px}
.task{margin:6px 0 2px;font-size:26px;line-height:1.3}
.task b{color:var(--ink);white-space:nowrap}
.msg{margin:10px 0 0;padding:10px 14px;border-radius:10px;font-size:17px;display:none}
.msg.ok{display:block;background:var(--ok-bg);color:#1f5c26}
.msg.bad{display:block;background:var(--bad-bg);color:#8f1f1f}
.msg.info{display:block;background:#eef3fb;color:#26467e}
.stars{font-size:24px;letter-spacing:1px;color:var(--star)}
.stars .off{color:var(--star-off)}

/* лист с примерами: окошки для чисел и кнопки знаков */
.ws{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:6px 14px}
.wi{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding:8px 8px;border-radius:10px}
.wi .n{min-width:1.6em;font-size:12px;color:var(--muted)}
.wi .q{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;font-size:23px;line-height:1.2;font-variant-numeric:tabular-nums}
.wi .q span{white-space:nowrap}
.num{width:2.6em;height:1.55em;padding:0 .1em;font:inherit;font-weight:600;line-height:1;text-align:center;color:var(--ink);background:#fff;
  border:2px solid var(--line);border-radius:9px;-webkit-appearance:none;appearance:none}
.num:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,100,201,.18)}
.wi .h{grid-column:1/-1;display:none;margin-top:4px;font-size:14px;color:var(--bad);text-align:right}
.wi.bad .h{display:block}
.wi.ok{background:var(--ok-bg)} .wi.ok .num{border-color:var(--ok);color:var(--ok)}
.wi.bad{background:var(--bad-bg)} .wi.bad .num{border-color:var(--bad);color:var(--bad)}
.wi.empty .num{border-style:dashed;border-color:var(--empty);background:var(--empty-bg)}
.signs{display:inline-flex;gap:4px}
.signs button{font:inherit;font-size:20px;font-weight:700;width:1.75em;height:1.6em;padding:0;border:2px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);cursor:pointer}
.signs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.wi.ok .signs button[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}
.wi.bad .signs button[aria-pressed="true"]{background:var(--bad);border-color:var(--bad)}
.wi.empty .signs button{border-style:dashed;border-color:var(--empty)}
.wsbar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;margin:18px calc(-1*var(--pad-r)) -30px calc(-1*var(--pad-l));
  padding:12px var(--pad-r) 12px var(--pad-l);background:rgba(255,253,246,.97);border-top:1px solid var(--line)}
.wsbar .status{flex:1 1 auto;min-width:0}

@media (max-width:700px){
  :root{--pad-l:14px;--pad-r:14px}
  .sheet{margin:0;border-radius:0;padding-top:14px;box-shadow:none}
  .sheet::before{display:none}
  h1{font-size:27px} .sub{font-size:15px} .tip{font-size:15px}
  .sections{font-size:14px;gap:2px 12px}
  .tabs button{font-size:15px;padding:7px 12px}
  .card{padding:14px 12px}
  .task{font-size:22px}
  .wi .q{font-size:21px}
  .btn.primary{padding:10px 16px}
}
@media (max-width:400px){
  :root{--pad-l:10px;--pad-r:10px}
  .tabs{gap:5px} .tabs button{font-size:14px;padding:6px 10px}
  .ws{grid-template-columns:1fr}
}
@media print{
  body{background:#fff}
  .sheet{max-width:none;margin:0;padding:0;background:none;box-shadow:none}
  .sheet::before,.sections,.tabs,.wsbar,.note,.btn{display:none!important}
}

/* умныйшкольник.рф: ссылка на главную в меню разделов */
.sections a.home{color:var(--ink);font-weight:600;margin-right:6px}