/* Approved CLASSROOM / Translation Drills visual system. Presentation only. */
.replacement-page { min-width:0; background:var(--cira-cream); }
.replacement-page .classroom-working-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.replacement-page .classroom-working-title { white-space:normal; }
.replacement-page .classroom-view-selector { justify-self:end; min-width:0; max-width:100%; gap:7px; overflow-x:auto; }
.replacement-page .classroom-view-selector__link { flex:0 0 auto; padding:8px 12px; border:1px solid #e4dccf; border-radius:9px; background:#fff; color:var(--cira-primary); }
.replacement-page .classroom-view-selector__link.is-active { background:var(--cira-primary); color:#fff; border-color:var(--cira-primary); }
.replacement-training { width:min(100%,900px); margin-inline:auto; }
.replacement-label { display:block; margin:0 0 9px; font-size:var(--cira-type-label) !important; font-weight:850; line-height:1.4 !important; letter-spacing:.055em; color:var(--cira-text-muted); }
.replacement-blocks { display:flex; flex-wrap:wrap; justify-content:flex-start; width:max-content; max-width:100%; gap:8px; padding:4px; margin:0 0 17px auto; border:1px solid var(--cira-border); border-radius:12px; background:var(--cira-surface-soft); }
.replacement-blocks button,.pass-btn,.support-btn,.runtime-btn { font-family:inherit; font-size:var(--cira-type-control); line-height:1.4; font-weight:700; cursor:pointer; color:var(--cira-primary); border:1px solid var(--cira-border-strong); background:#fff; border-radius:10px; min-height:44px; padding:9px 14px; }
.replacement-blocks button { white-space:nowrap; min-height:40px; padding:8px 12px; border-radius:9px; }
.replacement-blocks button.is-active,.pass-btn.is-active,.support-btn.is-active,.runtime-btn--primary { background:var(--cira-red); color:#fff; border-color:var(--cira-red); }
.replacement-blocks button:disabled { opacity:.55; cursor:default; }
.replacement-blocks button:hover:not(:disabled),.pass-btn:hover,.support-btn:hover,.runtime-btn:hover:not(:disabled) { border-color:var(--cira-red); }
.runtime-btn--primary:hover:not(:disabled) { background:#922920; }
.replacement-pattern { padding:20px 22px; border:1px solid #ead6a7; background:#fff4da; border-radius:14px; margin-bottom:20px; }
.replacement-eyebrow { margin:0 0 6px; font-size:var(--cira-type-label) !important; line-height:1.4 !important; font-weight:800; letter-spacing:.11em; color:var(--cira-red); }
.replacement-pattern h4 { margin:0 0 8px; color:var(--cira-primary); }
#patternInstruction { min-height:3.2em; margin:0 0 14px; }
.replacement-working-sentence { padding:12px 14px; border:1px solid #e8dac2; border-radius:10px; background:#fff; }
#workingSentence { height:3.2em; overflow:auto; margin:0; font-weight:700; color:var(--cira-primary); }
.drill-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; margin:0 auto 14px; }
.pass-switch,.support-switch { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; }
.toolbar-label { color:var(--cira-text-muted); font-size:var(--cira-type-label); font-weight:650; }
.drill-runtime { border:1px solid #eadfce; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 6px 22px rgba(58,45,32,.045); }
.runtime-head { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:86px; padding:15px 18px; box-sizing:border-box; background:#fff4da; border-bottom:1px solid #eddfc8; }
.runtime-head > div { min-width:0; }
.runtime-head__title { margin:0; color:var(--cira-primary); }
.runtime-head__meta { margin:4px 0 0; color:var(--cira-text-muted); }
.runtime-counter { flex:0 0 76px; padding:7px 10px; border-radius:999px; background:#fff; border:1px solid #e8d9bf; color:var(--cira-red); font-weight:700; text-align:center; }
.runtime-workspace { min-height:460px; padding:18px 24px; }
.runtime-stage { display:grid; width:min(780px,100%); min-height:424px; margin:0 auto; grid-template-rows:22px 42px 66px 98px 24px 8px 104px; gap:8px; align-content:start; align-items:center; justify-items:center; text-align:center; }
.runtime-state { color:var(--cira-text-muted); font-weight:600; }
.runtime-command { margin:0; color:var(--cira-primary); }
.replacement-training .runtime-command { font-size:var(--cira-type-model) !important; }
.runtime-copy { width:min(720px,100%); margin:0; overflow:auto; }
.runtime-card-slot { width:min(720px,100%); min-width:0; height:98px; }
.runtime-card { height:100%; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:12px 14px; overflow:auto; background:#fff9ed; border:1px solid #eadfce; border-radius:12px; font-weight:700; color:var(--cira-primary); visibility:hidden; }
.replacement-training .runtime-card { font-size:var(--cira-type-body) !important; }
.runtime-card.is-visible { visibility:visible; }
.runtime-card.is-model { background:#fff4da; border-color:#dfc998; }
.runtime-rec { display:flex; align-items:center; justify-content:center; gap:8px; visibility:hidden; color:var(--cira-danger); font-weight:700; }
.runtime-rec.is-visible { visibility:visible; }
.runtime-rec span { display:inline-block; width:9px; height:9px; background:var(--cira-danger); border-radius:50%; }
.runtime-progress { width:min(520px,90%); height:8px; border-radius:999px; background:#f3e8d5; overflow:hidden; visibility:hidden; }
.runtime-progress.is-visible { visibility:visible; }
#runtimeProgressBar { height:100%; width:0; background:var(--cira-red); }
.runtime-controls { width:100%; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; gap:8px; }
.runtime-btn { padding:9px 16px; }
.runtime-btn:disabled { opacity:.45; cursor:not-allowed; }
.runtime-stage.is-ready { grid-template-rows:22px 54px max-content auto; gap:12px; }
.runtime-stage.is-ready .runtime-copy { align-self:start; max-width:620px; }
.runtime-stage.is-ready .runtime-card-slot,.runtime-stage.is-ready .runtime-rec,.runtime-stage.is-ready .runtime-progress { display:none; }
.runtime-stage.is-ready .runtime-controls { grid-row:4; align-self:start; margin-top:26px; }
.runtime-error { margin:12px 0 0; padding:10px 13px; border:1px solid rgba(169,90,90,.35); border-radius:10px; background:rgba(169,90,90,.06); color:#7d3f3f; }
.runtime-error:empty { display:none; }
.replacement-note { color:var(--cira-text-muted); margin:14px 0 20px; font-size:var(--cira-type-note) !important; }
.replacement-training button:focus-visible { outline:3px solid var(--cira-focus); outline-offset:2px; }
@media(max-width:767px) {
  .replacement-page .classroom-working-header { align-items:flex-start; }
  .replacement-page .classroom-view-selector { width:100%; }
  .replacement-page .classroom-view-selector__link { padding:7px 10px; }
  .replacement-blocks { flex-wrap:nowrap; overflow-x:auto; margin-left:0; width:100%; }
  .replacement-blocks button { flex:0 0 auto; }
  .replacement-pattern { padding:16px; }
  #patternInstruction { min-height:4.8em; }
  #workingSentence { height:5.5em; }
  .drill-toolbar { flex-direction:column; align-items:flex-start; gap:12px; }
  .support-switch { width:100%; }
  .drill-runtime { border-radius:13px; }
  .runtime-head { height:148px; padding:15px 16px; align-items:flex-start; gap:10px; }
  .runtime-workspace { min-height:598px; padding:16px; }
  .runtime-stage { min-height:566px; grid-template-rows:24px 72px 102px 128px 24px 8px 156px; }
  .runtime-stage.is-ready { grid-template-rows:24px 60px max-content auto; }
  .runtime-card-slot { height:128px; }
  .runtime-card { padding:11px 12px; }
  .runtime-btn { padding:9px 12px; }
}
@media(prefers-reduced-motion:reduce) { .replacement-training * { scroll-behavior:auto; } }