/* Writing-specific trainer content only. Shared trainer structure and component
   styling live in mode-atlas-study-shared.css / mode-atlas-components.css. */
body.ma-writing-page{
  --ma-active-rgb:102,168,255;
  --ma-active-text:#d8e8ff;
  --ma-accent:var(--ma-writing);
  --ma-trainer-accent:var(--ma-writing);
  --ma-trainer-soft:var(--ma-writing-soft);
  --ma-trainer-active-text:#d8e8ff;
  --ma-trainer-test-bg:#13233c;
}

.prompt-wrap{
  min-height:162px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-bottom:12px;
}
.prompt{
  font-size:96px;
  line-height:1;
  transition:color .2s ease,transform .2s ease,text-shadow .2s ease;
  text-shadow:0 0 18px rgba(255,255,255,.08);
  font-weight:700;
}
.prompt-small{font-size:74px;}
.choice-grid{display:grid;gap:10px;margin:0 auto 10px;width:min(380px,100%);}
.choice-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.choice-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.choice-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.choice-btn{
  appearance:none;
  border:1px solid var(--ma-border);
  background:var(--ma-card-2);
  color:var(--ma-text);
  border-radius:14px;
  padding:18px 8px;
  cursor:pointer;
  font-size:38px;
  line-height:1;
  min-height:74px;
  transition:background .15s ease,transform .15s ease,border-color .15s ease;
}
.choice-btn.choice-combo{font-size:28px;letter-spacing:2px;padding:18px 10px;}
.choice-btn:hover{background:var(--ma-control-hover);transform:translateY(-1px);border-color:color-mix(in srgb,var(--ma-writing) 55%,var(--ma-border));}
.choice-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.choice-btn.correct{background:#224a29;border-color:#3e7f48;}
.choice-btn.wrong{background:#472323;border-color:#6c3030;}
.keyboard-wrap{margin-top:8px;}
.keyboard-note{margin-top:8px;color:var(--ma-muted);font-size:13px;}
.button-grid.tight{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;}
@media(max-width:760px){.choice-grid.cols-4{grid-template-columns:repeat(2,1fr);}}
body.mobile-mode .prompt{font-size:88px;}
body.mobile-mode .prompt-small{font-size:64px;}

/* Writing input-mode controls use the shared trainer accent state. */
.bottom-shell.ma-modifiers-only #buttonsModeBtn.active,
.bottom-shell.ma-modifiers-only #keyboardModeBtn.active,
.bottom-shell.ma-modifiers-only #choice4Btn.active,
.bottom-shell.ma-modifiers-only #choice6Btn.active,
.bottom-shell.ma-modifiers-only #choice8Btn.active,
.bottom-shell.ma-modifiers-only #buttonsModeBtn.btn-secondary,
.bottom-shell.ma-modifiers-only #keyboardModeBtn.btn-secondary,
.bottom-shell.ma-modifiers-only #choice4Btn.btn-secondary,
.bottom-shell.ma-modifiers-only #choice6Btn.btn-secondary,
.bottom-shell.ma-modifiers-only #choice8Btn.btn-secondary{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ma-writing) 28%,transparent),color-mix(in srgb,var(--ma-writing) 13%,transparent));
  border-color:color-mix(in srgb,var(--ma-writing) 78%,var(--ma-border));
  color:var(--ma-trainer-active-text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ma-writing) 25%,transparent),0 0 0 1px color-mix(in srgb,var(--ma-writing) 14%,transparent),0 10px 24px color-mix(in srgb,var(--ma-writing) 10%,transparent);
}
.bottom-shell.ma-modifiers-only #buttonsModeBtn:not(.active):not(.btn-secondary),
.bottom-shell.ma-modifiers-only #keyboardModeBtn:not(.active):not(.btn-secondary),
.bottom-shell.ma-modifiers-only #choice4Btn:not(.active):not(.btn-secondary),
.bottom-shell.ma-modifiers-only #choice6Btn:not(.active):not(.btn-secondary),
.bottom-shell.ma-modifiers-only #choice8Btn:not(.active):not(.btn-secondary){
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.11);
  color:var(--ma-text);
}