/* «Как работает Токего» (главная, #shema): дом-диорама + функции + «Что вы получаете» + витрина с компьютера и телефона.
   Рисует js/shema.js; здесь только раскладка. Цвета — только тушь, красный, бумага. */
.shema { padding: 64px 0 50px; position: relative; }
.shema-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 20px; }
.shema-head h2 { margin-bottom: 14px; }
.shema-lead { color: var(--soft); max-width: 660px; }
.shema-head .btn { flex: none; }

/* вкладки сценариев (сейчас одна) */
.shema-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px -8px; }
.shema-tabs button { position: relative; font: inherit; font-size: 20px; color: var(--ink); background: none; border: 0; padding: 8px 20px; cursor: pointer; }
.shema-tabs button[aria-selected="true"] { color: var(--red); }
.shema-tabs button canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.shema-tabs button:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }

/* сцена + функции справа + итоги под сценой */
.shema-body { display: grid; grid-template-columns: minmax(0, 1fr) 318px; grid-template-areas: "scene side" "get side"; gap: 16px 34px; align-items: start; }
.shema-scene { grid-area: scene; min-width: 0; }
.shema-side { grid-area: side; }
.shema-get { grid-area: get; }
.shema-stage { position: relative; width: 100%; aspect-ratio: 800 / 560; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shema-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.shema-bar { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.shema-pp { flex: none; width: 46px; height: 46px; padding: 0; border: 0; background: none; cursor: pointer; }
.shema-pp canvas { width: 46px; height: 46px; }
.shema-pp:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }
.shema-prog { flex: 1; min-width: 0; height: 26px; cursor: pointer; }
/* подпись шага под сценой: «Шаг 2 из 6» красным + что происходит */
.shema-cap { margin: 6px 0 14px; font-size: 19px; line-height: 1.35; min-height: 2.7em; }
.shema-cap b { font-weight: 400; color: var(--red); margin-right: 6px; white-space: nowrap; }
.shema-h { color: var(--red); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }

.shema-fns { list-style: none; margin: 0; padding: 0; }
.shema-fns li { position: relative; }
.fn { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; font: inherit; font-size: 20px;
  line-height: 1.2; color: var(--ink); background: none; border: 0; padding: 6px 2px; text-align: left; cursor: pointer; }
.fn canvas { width: 30px; height: 30px; }
.fn:hover, .shema-fns li.on .fn { color: var(--red); }
.fn:focus-visible, .oc:focus-visible, .vit-switch button:focus-visible, .vit-open:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }
.fn-line { margin: -2px 0 8px 44px; font-size: 17px; line-height: 1.35; }
/* строка «что это даёт» видна у функции, которая сейчас работает; у остальных — только для экранного чтеца */
.shema-fns li:not(.on) .fn-line { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shema-ocs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; }
.oc { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; font: inherit; color: var(--ink);
  background: none; border: 0; padding: 2px 0; text-align: left; cursor: pointer; }
.oc canvas { width: 28px; height: 28px; margin-top: 1px; }
.oc b { display: block; font-weight: 400; font-size: 18px; line-height: 1.2; }
.oc small { display: block; font-size: 15px; line-height: 1.3; color: var(--soft); min-height: 3.9em; }
.oc:hover b, .shema-ocs li.on b, .shema-ocs li.on small { color: var(--red); }

/* витрина этого дела: с компьютера / с телефона */
.shema-vit { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px 44px; align-items: center; margin-top: 50px; }
.vit-text h3 { margin: 0 0 8px; }
.vit-text > p.soft { font-size: 17px; }
.vit-switch { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 12px -6px; }
.vit-switch button { position: relative; font: inherit; font-size: 18px; color: var(--ink); background: none; border: 0; padding: 8px 14px; cursor: pointer; isolation: isolate; }
.vit-switch button canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.vit-switch button[aria-pressed="true"] { color: var(--red); }
.vit-note { font-size: 16px !important; margin-bottom: 12px; }
.vit-open { color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: 18px; }
.vit-open:hover { text-decoration: underline; }
.vit-open canvas { width: 16px; height: 16px; }
.vit-scroll { min-width: 0; }
.vit-view { position: relative; width: 100%; max-width: 820px; aspect-ratio: 900 / 634; margin-left: auto; }
.vit-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 1100px) {
  .shema-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "scene" "side" "get"; }
  .shema-fns { columns: 2; column-gap: 30px; }
  .shema-fns li { break-inside: avoid; }
  .shema-vit { grid-template-columns: minmax(0, 1fr); }
  .vit-view { margin: 0 auto; }
}
@media (max-width: 860px) {
  .shema-head { flex-direction: column; align-items: start; }
  .shema-ocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .shema { padding-top: 46px; }
  .shema-stage { aspect-ratio: 400 / 560; }
  .shema-fns { columns: 1; }
  .shema-head .btn { align-self: stretch; }
  .oc small { min-height: 0; }
  /* компьютерный вид на телефоне — прокруткой вбок, чтобы не было мелко; телефонный — во всю ширину */
  .vit-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); scrollbar-width: none; }
  .vit-scroll::-webkit-scrollbar { display: none; }
  .vit-view { width: 640px; max-width: none; }
  .vit-view.phone { width: 100%; max-width: 330px; aspect-ratio: 300 / 470; }
}
@media (max-width: 400px) {
  .shema-ocs { grid-template-columns: minmax(0, 1fr); }
  .shema-tabs button { font-size: 19px; }
}