/* Оформление тренажёров 1–16 и 17–25 в стиле главной и теории. Подключается после bank.css, site.css и pages.css. */
main.tr{max-width:var(--x-w);padding-top:8px;padding-bottom:0}
.tr .pg-hero{padding-bottom:6px}
.tr .pg-hero h1{font-size:clamp(32px,4.2vw,54px);line-height:1.06;margin:18px 0 0;letter-spacing:-.5px}
.tr .pg-hero h1 em{font-style:italic;color:var(--x-cocoa)}
.tr .tabs{margin-top:22px;border-color:var(--x-ln);border-radius:14px}
.tr .tabs a{padding:9px 16px;border-radius:10px;font-size:14.5px}
.tr .tabs a.cur{background:var(--x-cocoa)}

.tr-sec{margin-top:30px}
.tr-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tr-h h2{font:700 clamp(22px,2.4vw,28px)/1.15 var(--x-serif);color:var(--x-ink)}
.tr-h .x-hand{font-size:22px}

/* блоки: цветные плитки, как разделы теории */
.tr-blocks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tr-blocks.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.tr-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:128px;padding:16px 16px 14px;border-radius:20px;border:2px solid transparent;cursor:pointer;color:var(--x-ink);font:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}
.tr-tile:hover{transform:translateY(-2px) rotate(-.5deg)}
.tr-tile b{font:700 34px/1 var(--x-serif);color:var(--x-cocoa)}
.tr-tile span{font-size:12.5px;color:var(--x-ink2);margin-top:2px}
.tr-tile strong{margin-top:auto;padding-top:10px;font-size:15px;line-height:1.25;max-width:72%}
.tr-tile img{position:absolute;right:-8px;bottom:-8px;width:64px;height:auto;pointer-events:none}
.tr-tile[aria-pressed="true"]{border-color:var(--x-cocoa);box-shadow:0 14px 28px -16px rgba(70,40,20,.45)}
.tr-tile[aria-pressed="true"]::after{content:'✓';position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:var(--x-cocoa);color:var(--x-cream);display:grid;place-items:center;font-size:13px;font-weight:800}
.tr-tile.c0{background:var(--x-sf);border-color:var(--x-ln)}
.tr-tile.c0[aria-pressed="true"]{border-color:var(--x-cocoa)}
.tr-tile.c1{background:#F1E3D3}.tr-tile.c2{background:#EAF1E6}.tr-tile.c3{background:#FCEFC9}.tr-tile.c4{background:#F3E6EF}.tr-tile.c5{background:#E9E2D8}

/* номера заданий по порядку */
.tr-nums{display:flex;flex-wrap:wrap;gap:8px}
.nchip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;min-height:52px;padding:6px 12px;border-radius:14px;border:1.5px solid var(--x-ln);background:var(--x-sf);color:var(--x-ink);cursor:pointer;font:inherit;transition:border-color .15s,background .15s,transform .15s}
.nchip:hover{border-color:var(--x-caramel);transform:translateY(-1px)}
.nchip b{font:800 17px/1 var(--x-sans);font-variant-numeric:lining-nums tabular-nums}
.nchip small{font-size:11.5px;line-height:1.2;color:var(--x-ink2);margin-top:3px;white-space:nowrap}
.nchip.all b{font:700 15px/1 var(--x-sans)}
.nchip.off{opacity:.45}
.nchip.mine{background:var(--x-sand)}
.nchip[aria-pressed="true"]{background:var(--x-cocoa);border-color:var(--x-cocoa);color:var(--x-cream);opacity:1}
.nchip[aria-pressed="true"] small{color:#EAD7C4}
.tr-err{margin-top:12px}

/* режимы кабинета: отработка и повторение */
.tr .chips{margin-top:0}
.tr .chip[aria-pressed="true"]{background:var(--x-cocoa);border-color:var(--x-cocoa)}

/* решение: задание на «листке» с скотчем */
.tr-play{max-width:860px;margin:34px auto 0}
.tr-play .prog{margin-top:0;font-size:14px}
.tr-play .bar{height:8px;border-radius:4px;background:var(--x-sand2)}
.tr-play .bar i{background:var(--x-cocoa)}
.tr-sheet{position:relative;margin-top:18px}
.tr-sheet .x-tape{position:absolute;top:-11px;left:50%;margin-left:-48px;width:96px;height:24px;background:rgba(198,138,85,.35);transform:rotate(-2deg);border-radius:3px;z-index:2}
.tr-sheet .tk{border-radius:22px;border-color:var(--x-ln);padding:26px 24px 22px;box-shadow:0 18px 40px -22px rgba(70,40,20,.3)}
.tr-play .tnav button{border-radius:14px}
.tr-play .tnav .pri{background:var(--x-cocoa);border-color:var(--x-cocoa)}
.tr-play .tnav .pri:hover{background:var(--x-cocoa2)}
.tr .promo{max-width:860px;margin:34px auto 0;border-radius:22px;padding:24px;background:var(--x-ink);position:relative;overflow:hidden}
.tr .promo b{font:700 24px/1.2 var(--x-serif)}
.tr .promo a{border-radius:14px}

@media (max-width:1100px){
  .tr-blocks,.tr-blocks.six{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .tr .pg-art{display:none}
  .tr-blocks,.tr-blocks.six{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:4px 16px 8px;scrollbar-width:none}
  .tr-blocks::-webkit-scrollbar{display:none}
  .tr .pg-hand{font-size:20px}
  .tr-tile{flex:0 0 164px;min-height:116px;scroll-snap-align:start}
  .tr-tile img{width:54px}
  .nchip{min-width:46px;min-height:46px;padding:5px 9px}
  .tr-sheet .tk{padding:22px 16px 18px}
  .tr-play{margin-top:26px}
}