/* trainer.css · the trainer «Тетрадь» (slice «Урок»): one task per screen, the check button under the thumb.
   Phone first (360-599), then 600 and 1024. Colours only from the tokens of tetrad.css. */

.trw{padding-top:8px;padding-bottom:8px}
.trw-h{margin:0 0 12px}
.trw-h .h3{margin:0}
.trw-guest{margin-bottom:12px}

.tr{position:relative;max-width:860px}
.tr-top{display:grid;gap:4px;margin:0 0 10px}
.tr-count{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font:600 16px/1.3 var(--f-text);color:var(--ink-2)}
.tr-xp{display:inline-flex;align-items:center;gap:4px;font:800 18px/1 var(--f-head);color:var(--ink);white-space:nowrap}
.tr-xp .ico{width:22px;height:22px;fill:var(--marker);stroke:var(--ink);stroke-width:1.6}
.tr-xp small{font:500 16px/1 var(--f-text);color:var(--pencil);margin-left:2px}
.tr-cells{margin:2px 0 0}
.tr-cells i.is-lock{background:var(--paper-lo);border-style:dashed}

/* the sheet with the task */
.tr-sheet{padding-top:18px;padding-bottom:16px}
.tr-body{min-height:180px}
.tr-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 6px;font:600 16px/1.3 var(--f-text);color:var(--pencil)}
.tr-meta b{font:700 24px/1 var(--f-hand);color:var(--pen-ink)}
.tr-q{margin:0 0 12px;white-space:pre-line}
.tr-q:focus{outline:none}
.tr-q:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.tr-fig{margin:0 0 14px;max-width:640px}
.tr-fig img{display:block;width:100%;height:auto;border:4px solid var(--sheet);box-shadow:var(--sh-1);background:var(--paper-lo)}
.tr-howto{margin:0 0 14px}
.tr-ans{margin:0}
.tr-msg{display:grid;justify-items:start;gap:10px;padding:8px 0}
.tr-msg .ico-l{color:var(--blue)}

/* choice and multi: big option buttons */
.opts{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.opt{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:56px;padding:9px 12px;
  border:2px solid var(--line-2);border-radius:var(--r-hand);background:var(--sheet);color:var(--ink);font:500 17px/1.35 var(--f-text);
  text-align:left;cursor:pointer;transition:border-color .12s,background-color .12s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.opt:hover{border-color:var(--ink)}
.opt-k{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--line-2);border-radius:50%;font:700 16px/1 var(--f-head);color:var(--pencil)}
.opt.is-multi .opt-k{border-radius:7px}
.opt[aria-checked="true"]{border-color:var(--blue);background:var(--blue-soft)}
.opt[aria-checked="true"] .opt-k{border-color:var(--blue);background:var(--blue);color:var(--sheet)}
.opt.is-right{border-color:var(--ok);background:var(--ok-soft)}
.opt.is-right .opt-k{border-color:var(--ok);background:var(--ok);color:var(--sheet)}
.opt-r{color:var(--ok);width:26px;height:26px;stroke-width:2.6}
.opt.is-wrong{border-color:var(--pen)}
.opt.is-wrong .opt-t{text-decoration:underline wavy var(--pen);text-decoration-thickness:1.5px;text-underline-offset:5px}
.opt[aria-disabled="true"]{cursor:default}
.opt[aria-disabled="true"]:hover{border-color:var(--line-2)}
.opt.is-right[aria-disabled="true"]:hover{border-color:var(--ok)}

/* number */
.num-row{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:6px 12px}
.tr-num{flex:1 1 auto;width:auto;min-width:0;max-width:260px}
.num-unit{flex:none;max-width:45%;overflow-wrap:anywhere}
.tr-num[readonly]{border-bottom-style:dashed}
.num-unit{padding-bottom:10px;font:700 30px/1 var(--f-hand);color:var(--ink-2);white-space:nowrap}
/* the sign key: an iPhone's number keyboard has no minus */
.tr-sign{flex:none;width:52px;min-width:52px;min-height:52px;padding:0;font:700 28px/1 var(--f-text);align-self:flex-end}
.tr-wave{margin:6px 0 0}

/* match: two columns of cards */
.mt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.mt-col{display:grid;gap:8px;align-content:start;min-width:0}
.mt-i{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;width:100%;min-width:0;min-height:56px;
  padding:8px 8px;border:2px solid var(--line-2);border-radius:10px;background:var(--sheet);color:var(--ink);font:500 16px/1.3 var(--f-text);
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mt-i:hover{border-color:var(--ink)}
.mt-i.is-act{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.mt-i.is-paired{background:var(--paper);border-color:var(--ink-2)}
.mt-k{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:14px;background:var(--paper-lo);font:700 16px/1 var(--f-head);color:var(--ink-2)}
.mt-t{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.mt-tag{position:absolute;right:6px;top:4px;font:700 21px/1 var(--f-hand);color:var(--blue);white-space:nowrap}
.mt-col:first-child .mt-i.is-paired{padding-right:36px}
.mt-col+.mt-col .mt-i.is-paired{box-shadow:inset 0 0 0 1px var(--ink-2)}
.mt-i[aria-disabled="true"]{cursor:default}
.tr-reset{margin:6px 0 0}

/* ionic: the equation and the bank of chips */
.io-eq{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;border:2px dashed var(--line-2);border-radius:12px;background:var(--sheet)}
.io-zone{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 140px;min-height:56px;padding:4px 6px;border-radius:9px;cursor:pointer}
.io-zone.is-act{background:var(--marker-soft);box-shadow:inset 0 0 0 2px var(--marker)}
.io-arrow{flex:none;font:700 26px/1 var(--f-text);color:var(--ink)}
.io-plus{color:var(--pencil);font-weight:700}
.io-ph{color:var(--pencil);font-size:16px}
.tok{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:6px 14px;border:2px solid var(--ink);border-radius:999px;
  background:var(--sheet);color:var(--ink);font:600 18px/1 var(--f-text);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tok:hover{background:var(--marker-soft)}
.tok.is-in{background:var(--blue-soft);border-color:var(--blue)}
.tok.is-used{opacity:.35;cursor:default}
.io-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 10px}
.io-side .chip{padding-left:10px;padding-right:10px}
.io-side .chip .ico{width:18px;height:18px}
.io-bank{display:flex;flex-wrap:wrap;gap:8px}

/* coef: cells in front of the formulas */
.cf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 8px;font:600 20px/1.3 var(--f-text);color:var(--ink)}
.cf-term{display:inline-flex;align-items:flex-end;gap:2px}
.cf-in{width:46px;min-height:52px;padding:2px 4px;text-align:center;font-size:30px}
.cf-f{padding-bottom:8px}
.cf-op{padding-bottom:8px;color:var(--ink-2)}

/* self check */
.self-wait{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px;border:2px dashed var(--line-2);border-radius:12px;color:var(--ink-2)}
.self-wait .ico-l{flex:none;width:28px;height:28px;color:var(--blue)}
.self-dots{flex:1;align-self:flex-end;height:22px;border-bottom:2.5px dotted var(--line-2)}
.self-ans{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 12px;padding:10px 14px;border:2px solid var(--blue);border-radius:12px;background:var(--sheet)}
.self-ans-l{font-weight:600;color:var(--ink-2)}
.tr-ask{margin:0;color:var(--ink-2)}

/* marks, feedback, hints, solution */
.tr-mk{margin:12px 0 0}
.tr-fb{min-height:4px}
.tr-fb.is-stale{opacity:.45}
.tr-fb .fb>span:not(.xp-plus){flex:1 1 auto;min-width:0}
.ink-answer.is-long{font-size:25px;line-height:1.2}
.tr-note{margin:8px 0 0;font-size:16px;color:var(--pencil)}
.tr-hints{display:grid;gap:10px;margin:16px 0 0}
.tr-hint{position:relative;padding:10px 14px 12px;background:var(--sticker);border-radius:2px 2px 14px 2px;box-shadow:var(--sh-1);font-size:16px;line-height:1.45}
.tr-hint b{display:inline-block;margin:0 10px 2px 0;font:700 22px/1.1 var(--f-hand);color:var(--ink)}
.tr-hint span{display:block}
.tr-cost{font-size:16px;color:var(--ink-2)}
.tr-sol{margin:18px 0 0;padding-top:14px;border-top:2px dashed var(--line-2)}
.tr-sol .h4{margin:0 0 8px}
.tr-sol ol{margin:0 0 10px;padding-left:1.3em}
.tr-sol li{margin:0 0 6px}
.tr-sol li::marker{color:var(--pen-ink);font-weight:700}
.tr-sol-a{font-weight:600}
.tr-sol-v{display:flex;align-items:center;gap:8px;margin:8px 0 0}
.tr-sol-v a{display:inline-flex;align-items:center;min-height:44px}

/* tools under the task and the links */
.tr-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 0;padding-top:14px;border-top:1.5px dashed var(--line-2)}
.tr-tools .btn{min-width:0;padding-left:10px;padding-right:10px}
.tr-tools .btn span{min-width:0;overflow-wrap:normal}
.tr-tools [data-tr="similar"]{grid-column:1 / -1}
.tr-tools.is-one .btn{grid-column:1 / -1}
.tr-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;margin:6px 0 0}
.tr-minute{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:600}
.tr-minute .ico{width:20px;height:20px}
.tr-report{min-height:48px;padding-left:0;padding-right:0;color:var(--pencil);font-weight:500}

/* the bar at the bottom: under the thumb on a phone */
.tr-bar{position:sticky;bottom:0;z-index:20;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:8px;
  margin:12px calc(-1 * var(--gut)) 0;padding:10px var(--gut) calc(10px + var(--safe-b));background:var(--paper);border-top:1.5px solid var(--line-2)}
.tr-main{display:flex;gap:8px;min-width:0}
.tr-main .btn{flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px}
.tr-wrong .ico{color:var(--pen)}
.tr-nav{border:2px solid var(--line-2)}
.tr-nav[disabled]{opacity:.35}
body.has-bnav .tr-bar{bottom:calc(var(--bnav-h) + var(--safe-b))}
.hints-on .tr-bar{position:relative;bottom:auto}           /* a tour scrolls the buttons above its sticker */

/* results */
.tr-res{display:grid;gap:12px}
.tr-res .h3{margin:0}
.tr-res .h3:focus{outline:none}
.tr-res .meter{margin:4px 0}
.tr-res-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tr-res-l li{display:flex;align-items:flex-start;gap:10px}
.tr-res-l .ico{color:var(--blue);margin-top:1px}
.tr-res .howto{margin:0}
.tr-res-acts{margin-top:4px}
.tr-lock{display:flex;align-items:flex-start;gap:14px;padding:14px;border:2px dashed var(--ink-2);border-radius:12px;background:var(--sheet)}
.tr-lock .ico-l{flex:none;color:var(--ink-2)}
.tr-lock p{margin:0 0 8px}

/* 1-4 grade: everything a size bigger; big font from the student's settings */
.t-young .opt,.t-young .mt-i{font-size:20px}
.t-young .tok{font-size:21px}
.t-young .self-wait,.t-young .tr-hint{font-size:18px}
.is-big .t-task{font-size:20px}
.is-big .opt,.is-big .mt-i{font-size:19px}
.is-big .tr-hint,.is-big .tr-sol{font-size:18px}

/* 360 px phones: whole words in the cards of pairs and in the tool buttons (no «выделитс|я») */
@media (max-width:379px){
  .tr-sheet{padding-left:calc(var(--mw) + 8px);padding-right:10px}
  .mt{gap:6px}
  .mt-col{gap:6px}
  .mt-i{gap:4px;padding:8px 6px}
  .mt-k{min-width:24px;padding:0 4px}
  .tr-tools .btn{gap:6px;padding-left:8px;padding-right:8px}
}

@media (min-width:600px){
  .opts.is-many{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mt{gap:12px 28px}
  .tr-mk.on-margin{margin:0}
  .tr-bar{margin:16px 0 0;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--sheet);box-shadow:var(--sh-1)}
  .tr-main .btn{flex:0 1 280px}
  .tr-main{justify-content:center}
  .tr-tools{display:flex;flex-wrap:wrap}
  .tr-tools .btn{flex:0 0 auto}
}
@media (min-width:1024px){
  body.has-bnav .tr-bar{bottom:0}
  .tr-bar{bottom:12px}
}