/* First-stage training: stable, high-visibility controls for new and older learners. */
:where(.keyboard-school,.mouse-school,.screen-school,.text-input-school,.copy-school,.internet-school,.file-school,.attach-school,.login-school,.ai-talk-school) button,
:where(.keyboard-school,.mouse-school,.screen-school,.text-input-school,.copy-school,.internet-school,.file-school,.attach-school,.login-school,.ai-talk-school) input,
:where(.keyboard-school,.mouse-school,.screen-school,.text-input-school,.copy-school,.internet-school,.file-school,.attach-school,.login-school,.ai-talk-school) textarea {
  touch-action: manipulation;
}

/* Stage two repeats the same safe learning pattern, with larger targets and text. */
:where(.request-school,.writing-school,.summary-school,.transform-school,.idea-school,.compare-school,.fact-school,.image-school,.document-school,.practical-school) button,
:where(.request-school,.writing-school,.summary-school,.transform-school,.idea-school,.compare-school,.fact-school,.image-school,.document-school,.practical-school) input,
:where(.request-school,.writing-school,.summary-school,.transform-school,.idea-school,.compare-school,.fact-school,.image-school,.document-school,.practical-school) textarea {
  touch-action: manipulation;
}

:where(.request-school,.writing-school,.summary-school,.transform-school,.idea-school,.compare-school,.fact-school,.image-school,.document-school,.practical-school) button:focus-visible,
:where(.request-school,.writing-school,.summary-school,.transform-school,.idea-school,.compare-school,.fact-school,.image-school,.document-school,.practical-school) input:focus-visible,
:where(.request-school,.writing-school,.summary-school,.transform-school,.idea-school,.compare-school,.fact-school,.image-school,.document-school,.practical-school) textarea:focus-visible {
  outline: 3px solid #315fce !important;
  outline-offset: 3px;
}

:where(.image-training) button,
:where(.image-training) a,
:where(.image-training) input,
:where(.image-training) textarea { touch-action: manipulation; }

:where(.image-training) button:focus-visible,
:where(.image-training) a:focus-visible,
:where(.image-training) input:focus-visible,
:where(.image-training) textarea:focus-visible {
  outline: 3px solid #315fce !important;
  outline-offset: 3px;
}

:where(.video-training) button,
:where(.video-training) a,
:where(.video-training) input,
:where(.video-training) textarea { touch-action: manipulation; }

:where(.video-training) button:focus-visible,
:where(.video-training) a:focus-visible,
:where(.video-training) input:focus-visible,
:where(.video-training) textarea:focus-visible {
  outline: 3px solid #315fce !important;
  outline-offset: 3px;
}

.learning-font-controls{display:flex;align-items:center;gap:4px;margin-left:auto;padding:5px;border:1px solid #d9dce6;border-radius:11px;background:#fff;color:#4a5264;box-shadow:0 2px 8px rgba(35,45,70,.08);font-size:12px;white-space:nowrap}
.learning-font-controls>span{padding:0 4px;font-weight:800}.learning-font-controls button{min-height:32px;padding:5px 9px;border:1px solid transparent;border-radius:7px;background:#f3f5fa;color:#485168;font:inherit;font-weight:800;cursor:pointer}.learning-font-controls button.is-active{border-color:#315fce;background:#315fce;color:#fff}
.learning-training .learning-font-resizable{font-size:var(--learning-font-base)!important}
@media(max-width:600px){
  .aw-lessons,.su-skills,.tr-lessons,.id-lessons,.rq-levels,.cp-steps,.fc-steps,.im-modes,.dc-docs,.dc-steps,.pt-missions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .learning-training button span,.learning-training button b{word-break:keep-all}
}
@media(min-width:821px){
  [data-learning-font="normal"] .learning-font-resizable{font-size:var(--learning-font-base)!important}
  [data-learning-font="large"] .learning-font-resizable{font-size:var(--learning-font-large)!important}
  [data-learning-font="xlarge"] .learning-font-resizable{font-size:var(--learning-font-xlarge)!important}
}
.learning-training [hidden]{display:none!important}
.learning-training header{gap:12px;flex-wrap:wrap}
.learning-training button{cursor:pointer}
.learning-training button:disabled{cursor:wait;opacity:.65}
.learning-training .im-canvas{position:relative}
.learning-training .learning-review-result{margin:12px 0 8px;background:#edf2ff!important;color:#244b9a!important;border:1px solid #b8c9ee!important;min-height:42px;font-size:16px!important}
.learning-complete-actions{display:flex;justify-content:flex-end;margin:10px 0}.learning-complete-actions button{padding:10px 18px;border:0;border-radius:9px;background:#315fce;color:white;font-size:16px;min-height:44px}

:where(.keyboard-school,.mouse-school,.screen-school,.text-input-school,.copy-school,.internet-school,.file-school,.attach-school,.login-school,.ai-talk-school) button:focus-visible,
:where(.keyboard-school,.mouse-school,.screen-school,.text-input-school,.copy-school,.internet-school,.file-school,.attach-school,.login-school,.ai-talk-school) input:focus-visible,
:where(.keyboard-school,.mouse-school,.screen-school,.text-input-school,.copy-school,.internet-school,.file-school,.attach-school,.login-school,.ai-talk-school) textarea:focus-visible {
  outline: 3px solid #315fce !important;
  outline-offset: 3px;
}

@media (max-width:600px) {
  :where(.keyboard-school,.mouse-school,.screen-school,.text-input-school,.copy-school,.internet-school,.file-school,.attach-school,.login-school,.ai-talk-school) h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  .keyboard-school .kb-lessons button,
  .mouse-school .ms-lessons button,
  .screen-school .ss-lessons button,
  .text-input-school .ti-lessons button,
  .copy-school .cp-lessons button,
  .internet-school .is-lessons button,
  .file-school .fs-lessons button,
  .attach-school .as-lessons button,
  .login-school .ls-lessons button,
  .ai-talk-school .at-lessons button {
    min-height: 64px !important;
  }
  .keyboard-school .kb-lessons button span,
  .mouse-school .ms-lessons button span,
  .screen-school .ss-lessons button span,
  .text-input-school .ti-lessons button span,
  .copy-school .cp-lessons button span,
  .internet-school .is-lessons button span,
  .file-school .fs-lessons button span,
  .attach-school .as-lessons button span,
  .login-school .ls-lessons button span,
  .ai-talk-school .at-lessons button span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  .keyboard-school .kb-lessons button small,
  .mouse-school .ms-lessons button small,
  .screen-school .ss-lessons button small,
  .text-input-school .ti-lessons button small,
  .copy-school .cp-lessons button small,
  .internet-school .is-lessons button small,
  .file-school .fs-lessons button small,
  .attach-school .as-lessons button small,
  .login-school .ls-lessons button small,
  .ai-talk-school .at-lessons button small {
    font-size: 10px !important;
  }
  .keyboard-school .kb-levels button,
  .mouse-school .ms-levels button,
  .screen-school .ss-levels button,
  .text-input-school .ti-levels button,
  .copy-school .cp-levels button,
  .internet-school .is-levels button,
  .file-school .fs-levels button,
  .attach-school .as-levels button,
  .login-school .ls-levels button,
  .ai-talk-school .at-levels button {
    min-height: 46px !important;
    min-width: 46px !important;
  }
  .keyboard-school .kb-mission-head,
  .mouse-school .ms-mission,
  .screen-school .ss-mission,
  .text-input-school .ti-mission,
  .copy-school .cp-mission,
  .internet-school .is-mission,
  .file-school .fs-mission,
  .attach-school .as-mission,
  .login-school .ls-mission,
  .ai-talk-school .at-mission {
    gap: 12px !important;
  }
  .keyboard-school textarea,
  .text-input-school textarea,
  .copy-school textarea,
  .internet-school input,
  .login-school input,
  .ai-talk-school textarea {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  :where(.request-school,.writing-school,.summary-school,.transform-school,.idea-school,.compare-school,.fact-school,.image-school,.document-school,.practical-school) h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  .rq-levels button,.aw-lessons button,.su-skills button,.tr-lessons button,.id-lessons button,
  .cp-steps button,.fc-steps button,.im-modes button,.dc-docs button,.dc-steps button,.pt-missions button {
    min-height: 58px !important;
  }
  .rq-levels button span,.aw-lessons button span,.su-skills button span,.tr-lessons button span,.id-lessons button span,
  .cp-steps button span,.fc-steps button span,.im-modes button span,.dc-docs button span,.dc-steps button span,.pt-missions button span {
    font-size: 12px !important;
    line-height: 1.28 !important;
  }
  .rq-levels button small,.aw-lessons button small,.su-skills button small,.tr-lessons button small,.id-lessons button small,
  .cp-steps button small,.fc-steps button small,.im-modes button small,.dc-docs button small,.dc-steps button small,.pt-missions button small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  .request-school textarea,.writing-school textarea,.summary-school textarea,.transform-school textarea,.idea-school textarea,
  .compare-school textarea,.fact-school textarea,.image-school textarea,.document-school textarea,.practical-school textarea,
  .request-school input,.image-school input,.document-school input {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
  .rq-mission,.aw-mission,.su-mission,.tr-mission,.id-mission,.cp-mission,.fc-mission,.dc-mission,.pt-brief {
    gap: 12px !important;
  }
  .rq-mission h2,.aw-mission h2,.su-mission h2,.tr-mission h2,.id-mission h2,.cp-mission h2,.fc-mission h2,.dc-mission h2,.pt-brief h2 {
    font-size: 20px !important;
    line-height: 1.38 !important;
  }

  .image-training{padding-inline:12px !important;}
  .image-training .it-head h1{font-size:24px !important;line-height:1.25 !important;}
  .image-training .it-head p,.image-training .it-mission p{font-size:13px !important;line-height:1.45 !important;}
  .image-training .it-lessons a{min-height:58px !important;font-size:12px !important;line-height:1.25 !important;}
  .image-training .it-lessons a>b{display:grid !important;width:24px !important;height:24px !important;font-size:11px !important;}
  .image-training .it-mission{padding:13px 14px !important;gap:12px !important;}
  .image-training .it-mission span,.image-training .it-mission>strong{font-size:12px !important;}
  .image-training .it-mission h2{font-size:21px !important;line-height:1.3 !important;}
  .image-training .it-file-actions button,.image-training .it-file-actions label{min-height:48px !important;font-size:13px !important;display:flex !important;align-items:center;justify-content:center;}
  .image-training .it-file-actions small,.image-training .it-visual>span{font-size:11px !important;line-height:1.4 !important;}
  .image-training .it-options>b,.image-training .it-compose>label,.image-training .it-guide>span{font-size:13px !important;}
  .image-training .it-options button{min-height:48px !important;min-width:92px !important;font-size:12px !important;}
  .image-training .it-compose textarea{font-size:17px !important;line-height:1.5 !important;}
  .image-training .it-compose span,.image-training .it-result,.image-training .it-guide li span,.image-training .it-safety,.image-training .it-note{font-size:12px !important;line-height:1.45 !important;}
  .image-training .it-words b,.image-training .it-words span{font-size:12px !important;}

  .video-training{padding-inline:12px !important;}
  .video-training .vt-head h1{font-size:24px !important;line-height:1.25 !important;}
  .video-training .vt-head p,.video-training .vt-mission p{font-size:13px !important;line-height:1.45 !important;}
  .video-training .vt-lessons a{min-height:58px !important;font-size:12px !important;line-height:1.25 !important;}
  .video-training .vt-lessons b{display:grid !important;width:24px !important;height:24px !important;font-size:11px !important;}
  .video-training .vt-mission{padding:13px 14px !important;gap:12px !important;}
  .video-training .vt-mission span,.video-training .vt-mission>strong{font-size:12px !important;}
  .video-training .vt-mission h2{font-size:21px !important;line-height:1.3 !important;}
  .video-training .vt-player>span,.video-training .vt-player-bar,.video-training .vt-file small{font-size:11px !important;line-height:1.4 !important;}
  .video-training .vt-file button,.video-training .vt-file label{min-height:48px !important;font-size:13px !important;display:flex !important;align-items:center;justify-content:center;}
  .video-training .vt-options section>b,.video-training .vt-compose>label,.video-training .vt-guide>span{font-size:13px !important;}
  .video-training .vt-options button{min-height:48px !important;font-size:12px !important;}
  .video-training .vt-compose textarea{font-size:17px !important;line-height:1.5 !important;}
  .video-training .vt-compose span,.video-training .vt-result,.video-training .vt-guide li span,.video-training .vt-formula,.video-training .vt-terms small,.video-training .vt-safety,.video-training .vt-note{font-size:12px !important;line-height:1.45 !important;}
}

@media(max-width:820px){.learning-font-controls{display:none!important}}
