/* Training-only refinement. Shared home/theory components retain their appearance. */
#app[data-screen=training]{--training-body:var(--text-body);--training-label:var(--text-label);--training-control:var(--text-control);grid-template-rows:minmax(5rem,auto) minmax(0,1fr) auto}
#app[data-screen=training] .topbar{padding:1rem 2.5rem;gap:1.5rem;min-width:0}
#app[data-screen=training] .brand{font-size:1.5625rem;letter-spacing:-.044em}
#app[data-screen=training] .progress-widget{padding-left:1.5rem;min-width:0}
#app[data-screen=training] .progress-toggle{gap:.75rem;padding:.25rem .5rem;max-width:100%}
#app[data-screen=training] .course{gap:.125rem;min-width:0}
#app[data-screen=training] .course>span{font-size:1rem;font-weight:600}
#app[data-screen=training] .course small{font-size:var(--training-label);line-height:1.4}
#app[data-screen=training] .progress-toggle :is(.course,.ring-svg){display:flex!important}
#app[data-screen=training] .progress-toggle>.chevron{display:block;width:1.125rem;height:1.125rem;transition:transform 220ms var(--ease-out)}
#app[data-screen=training] .progress-toggle.panel-open>.chevron{transform:rotate(180deg)}
#app[data-screen=training] .session-panel{width:320px;left:24px;top:6rem;padding:1.5rem;border-radius:.875rem}
#app[data-screen=training] .session-panel .counter span{font-size:1rem;line-height:1.4}
#app[data-screen=training] .session-panel .counter strong{font-size:1.625rem;line-height:1.25;font-variant-numeric:tabular-nums}
#app[data-screen=training] .session-panel .ring-svg{width:3.75rem;height:3.75rem}
#app[data-screen=training] :is(.remaining-errors,.exit-actions button){font-size:1rem;line-height:1.5}
#app[data-screen=training] .stream{padding-top:1.5rem;padding-bottom:2rem}
#app[data-screen=training] .task{margin:1.5rem 0;border-radius:.875rem}
#app[data-screen=training] .task-heading{padding:1.5rem 1.5rem 0}
#app[data-screen=training] .task-heading>span{font-size:var(--training-label);line-height:1.4;font-weight:600}
#app[data-screen=training] .task-body{padding:1rem 1.5rem 1.5rem}
#app[data-screen=training] :is(.bank-body,.bank-option,.solution,.answer-key,.message .bubble){font-size:var(--training-body);line-height:1.6}
#app[data-screen=training] :is(.bank-body,.solution,.bubble){text-wrap:pretty;overflow-wrap:break-word}
#app[data-screen=training] .bank-body p{margin:0 0 .75rem}
#app[data-screen=training] .bank-options{margin:1.5rem 0}
#app[data-screen=training] .bank-option{position:relative;display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.5rem;padding:.75rem .75rem;min-height:3rem;align-items:start;border-radius:.375rem;transition:background-color 140ms ease;overflow-wrap:break-word}
#app[data-screen=training] .bank-option input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:inherit}
#app[data-screen=training] .bank-option .bank-label{font-size:var(--training-body);font-weight:600;line-height:1.6;color:var(--ink);font-variant-numeric:tabular-nums}
#app[data-screen=training] .bank-option p{margin:0}
#app[data-screen=training] .bank-option::before{content:'';position:absolute;left:0;top:.5rem;bottom:.5rem;width:3px;background:var(--blue);border-radius:3px;opacity:0;transition:opacity 140ms ease}
#app[data-screen=training] .bank-option:has(input:checked){background:var(--blue-pale)}
#app[data-screen=training] .bank-option:has(input:checked)::before{opacity:1}
#app[data-screen=training] .bank-option:has(input:not(:disabled)){cursor:pointer}
@media(hover:hover){#app[data-screen=training] .bank-option:has(input:not(:disabled)):hover{background:var(--blue-pale)}}
#app[data-screen=training] :is(.bank-fields,.bank-sequence){gap:.75rem;margin:1.5rem 0}
#app[data-screen=training] .bank-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:24rem}
#app[data-screen=training] :is(.bank-fields label,.bank-sequence label){font-size:var(--training-label);line-height:1.4;min-width:0;gap:.5rem}
#app[data-screen=training] :is(.bank-fields input,.bank-sequence select){font-size:var(--training-body);line-height:1.5;min-height:3rem;height:auto;width:6.5rem;padding:.625rem .75rem}
#app[data-screen=training] .bank-sequence select{width:100%;min-width:0}
#app[data-screen=training] .task-actions{margin-top:1.5rem}
#app[data-screen=training] :is(.action-primary,.secondary,.ai-status button,.draft-status button){font-size:var(--training-control);line-height:1.3;min-height:3rem;height:auto;font-weight:600;transition:background-color 120ms ease,border-color 120ms ease}
#app[data-screen=training] button:active{transform:none;filter:brightness(.92)}
#app[data-screen=training] .task-actions .action-primary{width:13rem;max-width:100%;padding:.75rem 1rem;min-width:0}
#app[data-screen=training] .task-result{margin-top:1.5rem;padding-top:1rem}
#app[data-screen=training] .verdict{font-size:var(--training-body);line-height:1.6;margin-bottom:.5rem}
#app[data-screen=training] .answer-key{margin-bottom:1rem}
#app[data-screen=training] :is(.solution-heading,.validation,.draft-status,.image-status,.ai-status,.composer-note,.bank-body table){font-size:var(--training-label);line-height:1.5}
#app[data-screen=training] .solution-heading{margin-bottom:.5rem}
#app[data-screen=training] .solution p+p{margin-top:.75rem}
#app[data-screen=training] .task-summary{padding:1rem 1.5rem;font-size:1rem;line-height:1.5}
#app[data-screen=training] .task.completed{margin:.75rem 0}
#app[data-screen=training] .message{margin:1.5rem 0}
#app[data-screen=training] .writing{padding:1rem 1.5rem max(1.5rem,env(safe-area-inset-bottom))}
#app[data-screen=training] .compose textarea{font-size:var(--training-body);line-height:1.6;padding:.5rem 0}
#app[data-screen=training] .compose{border-radius:1.75rem}
#app[data-screen=training] .review-heading{padding:1.5rem;border-radius:.875rem}
#app[data-screen=training] .review-heading h1{font-size:1.5rem;line-height:1.25;letter-spacing:-.02em}
#app[data-screen=training] .review-heading p{font-size:var(--training-body);line-height:1.6}
#app[data-screen=training] .review-counts{gap:1.5rem;padding:1rem 0;margin:1.5rem 0}
#app[data-screen=training] .review-counts span{font-size:var(--training-label);line-height:1.4}
#app[data-screen=training] .review-counts strong{font-size:1.625rem;font-variant-numeric:tabular-nums}
@media(max-width:1535px){
  #app[data-screen=training].training-menu-open{grid-template-rows:minmax(5rem,auto) auto minmax(0,1fr) auto}
  #app[data-screen=training] .session-panel{position:static;grid-column:1;grid-row:2;width:min(320px,calc(100% - 32px));max-height:30dvh;overflow:auto;margin:12px 16px 0;padding:1.25rem}
  #app[data-screen=training].training-menu-open .conversation{grid-row:3}
  #app[data-screen=training].training-menu-open .writing{grid-row:4}
}
@media(min-width:1536px){#app[data-screen=training] .session-panel{position:absolute;margin:0}}
@media(max-width:600px){
  #app[data-screen=training]{grid-template-rows:minmax(4rem,auto) minmax(0,1fr) auto}
  #app[data-screen=training].training-menu-open{grid-template-rows:minmax(4rem,auto) auto minmax(0,1fr) auto}
  #app[data-screen=training] .topbar{padding:.5rem 1rem;gap:.75rem;flex-wrap:wrap}
  #app[data-screen=training] .brand{font-size:1.25rem}
  #app[data-screen=training] .progress-widget{padding-left:.75rem}
  #app[data-screen=training] .progress-toggle{gap:.5rem;padding:0}
  #app[data-screen=training] .progress-toggle>.ring-svg{width:1.375rem;height:1.375rem}
  #app[data-screen=training] .course small{font-size:.875rem}
  #app[data-screen=training] .stream{padding:1rem .875rem 1.5rem}
  #app[data-screen=training] .task-heading{padding:1rem 1rem 0}
  #app[data-screen=training] .task-body{padding:1rem}
  #app[data-screen=training] .task-actions .action-primary{width:100%}
  #app[data-screen=training] .task-summary{padding:1rem}
  #app[data-screen=training] .writing{padding:.5rem .75rem max(.75rem,env(safe-area-inset-bottom))}
  #app[data-screen=training] .compose-wrap .monomer{width:2rem;flex-basis:2rem;background-position:-20px -91px}
  #app[data-screen=training] .compose{padding:5px 5px 5px 12px}
}
@media(prefers-reduced-motion:reduce){#app[data-screen=training] *,#app[data-screen=training] *::before{animation:none!important;transition:none!important}}
#app[data-screen=training] .solution :is(h1,h2,h3,h4,h5,h6){font-size:1.0625rem;line-height:1.4;margin:1rem 0 .5rem}
@media(max-width:360px){#app[data-screen=training] .bank-sequence{gap:.5rem}#app[data-screen=training] .bank-sequence select{padding-inline:.5rem}}
#app[data-screen=training] .bank-body table{font-size:var(--training-body);line-height:1.6}
#app[data-screen=training] :is(.mvp-state,.mvp-state button){font-size:1rem;line-height:1.5}
#app[data-screen=training] .mvp-state h2{font-size:1.125rem;line-height:1.4}
#app[data-screen=training] :is(.state-footnote,.field-error,.mini-status){font-size:var(--training-label);line-height:1.5}
#app[data-screen=training] .bank-body :is(h1,h2,h3,h4,h5,h6){font-size:var(--training-body);line-height:1.4;letter-spacing:0}
#app[data-screen=training] .session-panel{overflow:hidden auto}
@media(max-width:600px){#app[data-screen=training] .compose-wrap .monomer{height:36px;background-size:200px 200px;background-position:-11px -68px}}
/* Calmer training feedback and independently framed choice cards. */
#app[data-screen=training] .bank-options:has(:is(input[type=checkbox],.sequence-option)){display:grid;gap:.75rem}
#app[data-screen=training] .bank-option:is(:has(input[type=checkbox]),.sequence-option){border:2px solid var(--line);border-radius:1.25rem;padding:1rem;align-items:center;font-size:1.125rem;line-height:1.6;background:var(--paper);transition:background-color 240ms ease,border-color 240ms ease,color 240ms ease}
#app[data-screen=training] .bank-option:is(:has(input[type=checkbox]),.sequence-option)::before{content:none}
#app[data-screen=training] .bank-option:has(input:checked){border-color:var(--blue);background:var(--blue-pale)}
#app[data-screen=training] .bank-option:is(:has(input:checked),.sequence-option[aria-pressed=true]) .bank-label{color:var(--blue)}
#app[data-screen=training] .bank-option:is(:has(input[type=checkbox]),.sequence-option) .bank-label{font-size:1.125rem}
#app[data-screen=training] .bank-option:has(input:disabled){cursor:default}
#app[data-screen=training] .progress-toggle>.chevron{transition-duration:380ms}
#app[data-screen=training] .verdict{color:#2F6B48}
#app[data-screen=training] .verdict.wrong{color:var(--error)}
@media(max-width:600px){#app[data-screen=training] .bank-option:is(:has(input[type=checkbox]),.sequence-option){padding:.875rem;border-radius:1.125rem}}
#app[data-screen=training] .bank-option:is(:has(input:checked),.sequence-option[aria-pressed=true])>div{color:#355C7D}
#app[data-screen=training]{--training-success:var(--success)}
#app[data-screen=training] .verdict:not(.wrong){color:var(--training-success)}

#app[data-screen=training] .sequence-option{width:100%;text-align:left;font-family:inherit;grid-template-columns:2rem 1.75rem minmax(0,1fr);cursor:pointer;color:var(--ink)}
#app[data-screen=training] .sequence-option::before{content:none}
#app[data-screen=training] .sequence-position{display:grid;place-items:center;width:2rem;height:2rem;border:1.5px dashed var(--muted);border-radius:50%;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;transition:background-color 240ms,border-color 240ms,color 240ms}
#app[data-screen=training] .bank-option.sequence-option[aria-pressed=true]{background:var(--blue-pale);border-color:var(--blue)}
#app[data-screen=training] .bank-option.sequence-option[aria-pressed=true] .sequence-position{background:var(--blue);border-color:var(--blue);border-style:solid;color:white}
#app[data-screen=training] .sequence-option:disabled{opacity:1;cursor:default}
#app[data-screen=training] .sequence-option:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(hover:hover){#app[data-screen=training] .sequence-option:not(:disabled):hover{border-color:var(--blue)}}
#app[data-screen=training] .bank-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:24rem;gap:.75rem}
#app[data-screen=training] .bank-fields label{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border:2px solid var(--line);border-radius:1.25rem;background:var(--paper);font-size:1.125rem;font-weight:600}
#app[data-screen=training] .bank-fields label:focus-within{border-color:var(--blue);background:var(--blue-pale)}
#app[data-screen=training] .bank-fields input{width:100%;min-width:0;font-size:1.125rem;border-radius:.75rem;font-weight:400}
@media(max-width:360px){#app[data-screen=training] .bank-fields label{padding:.75rem}}