/* Shared finish. Role-specific homes are defined in their own stylesheets. */
:root {
  --polish-canvas: #f8f9f5;
  --polish-ink: #243d35;
  --polish-muted: #66766d;
  --polish-line: #dfe6dd;
  --polish-lime: #d2eb67;
  --polish-sky: #daedf6;
  --polish-pink: #f4dce7;
  --polish-yellow: #f9edb3;
  --polish-edge: #9eb64a;
  --polish-shadow: 0 10px 30px #243d3509;
}

/* Teacher welcome: one calm invitation, one clear form. */
body[data-role=entry][data-entry-role=teacher],
body[data-role=entry][data-entry-role=teacher] .entry-shell {
  background: var(--polish-canvas);
  color: var(--polish-ink);
}
body[data-entry-role=teacher] .entry-shell::before { display: none; }
body[data-entry-role=teacher] .entry-shell .topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--polish-line);
  height: 76px;
  padding: 0 36px;
}
body[data-entry-role=teacher] .entry-shell .brand { color: var(--polish-ink); }
body[data-entry-role=teacher] .entry-shell .teacher-page-actions button {
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--polish-line);
  border-radius: 14px;
  background: white;
  box-shadow: none;
  color: var(--polish-ink);
  font-weight: 700;
}
body[data-entry-role=teacher] .entry-shell .landing {
  max-width: 1140px;
  min-height: calc(100dvh - 76px);
  margin: 0 auto;
  padding: 42px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .9fr);
  align-items: center;
  gap: 64px;
}
body[data-entry-role=teacher] .entry-shell .hero-copy { display: block; grid-column: 1; grid-row: 1; }
body[data-entry-role=teacher] .entry-shell .landing > .join-card { grid-column: 2; grid-row: 1; }
body[data-entry-role=teacher] .entry-shell .landing > #class-edit-blocks { grid-column: 1 / -1; grid-row: 2; }
body[data-entry-role=teacher] .entry-shell .landing > #class-edit-blocks:empty { display: none; }
body[data-entry-role=teacher] .entry-shell .hero-copy .eyebrow {
  display: inline-flex;
  margin: 0 0 16px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #eaf0d9;
  color: #506435;
  font-size: 13px;
  letter-spacing: -.02em;
  font-weight: 700;
}
body[data-entry-role=teacher] .entry-shell .hero-copy h1 {
  margin: 0 0 18px;
  color: var(--polish-ink);
  font-family: var(--ui-font, system-ui), sans-serif;
  font-size: clamp(38px, 4.2vw, 54px);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: 1.16;
}
body[data-entry-role=teacher] .entry-shell .hero-copy h1 span { color: #597938; font-family: var(--ui-font,system-ui),sans-serif; font-size: inherit; font-weight: inherit; }
body[data-entry-role=teacher] .entry-shell .hero-copy > p:not(.eyebrow) {
  color: var(--polish-muted);
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -.025em;
}
body[data-entry-role=teacher] .entry-shell .hero-art {
  min-height: 0;
  height: auto;
  margin: 14px -10px -10px;
  display: flex;
  justify-content: center;
}
body[data-entry-role=teacher] .entry-shell .hero-art::before,
body[data-entry-role=teacher] .entry-shell .hero-art .hand-note { display: none; }
body[data-entry-role=teacher] .entry-shell .generated-hero {
  display: block;
  width: min(100%, 490px);
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  transform: none;
  filter: none;
}
body[data-entry-role=teacher] .entry-shell .join-card {
  width: 100%;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--polish-line);
  border-radius: 28px;
  background: white;
  box-shadow: 0 16px 48px #243d3509;
}
body[data-entry-role=teacher] .entry-shell .join-tabs {
  gap: 4px;
  padding: 5px;
  margin-bottom: 28px;
  background: #f0f3ec;
  border-radius: 16px;
}
body[data-entry-role=teacher] .entry-shell .join-tabs button {
  min-height: 50px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--polish-muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}
body[data-entry-role=teacher] .entry-shell .join-tabs button.active {
  background: white;
  color: var(--polish-ink);
  border-color: var(--polish-line);
  box-shadow: 0 2px 5px #243d3507;
  font-weight: 800;
}
body[data-entry-role=teacher] .entry-shell .join-form { gap: 18px; }
body[data-entry-role=teacher] .entry-shell .join-form .eyebrow { color: var(--polish-muted); font-size: 13px; }
body[data-entry-role=teacher] .entry-shell .join-form h2 {
  margin: 0 0 4px;
  color: var(--polish-ink);
  font-family: var(--ui-font, system-ui), sans-serif;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.045em;
}
body[data-entry-role=teacher] .entry-shell .join-form label { color: var(--polish-ink); font-size: 14px; font-weight: 700; gap: 9px; }
body[data-entry-role=teacher] .entry-shell .join-form .input {
  min-height: 56px;
  border: 1px solid #c9d3c7;
  border-radius: 14px;
  background: #fafbf8;
  color: var(--polish-ink);
  font-size: 16px;
  padding: 14px 16px;
  box-shadow: none;
}
body[data-entry-role=teacher] .entry-shell .join-form .primary {
  min-height: 56px;
  margin-top: 4px;
  padding: 14px;
  background: var(--polish-ink);
  color: white;
  border: 1px solid var(--polish-ink);
  border-radius: 14px;
  box-shadow: 0 3px 0 #162b24;
  font: inherit;
  font-size: 17px;
  font-weight: 750;
}
body[data-entry-role=teacher] .entry-shell .join-form .primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #162b24; }
body[data-entry-role=teacher] .entry-shell .join-form > p { color: var(--polish-muted); font-size: 13px; line-height: 1.6; }
body[data-entry-role=teacher] .entry-shell .notice {
  padding: 16px 0 0;
  margin-top: 22px;
  border: 0;
  border-top: 1px solid var(--polish-line);
  background: transparent;
  color: var(--polish-muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

/* Dialogs share the quiet surfaces of the teacher app and the student toys. */
.modal-backdrop { background: #182d2859; backdrop-filter: blur(5px); }
.modal {
  border: 1px solid var(--polish-line);
  border-radius: 26px;
  background: white;
  color: var(--polish-ink);
  box-shadow: 0 24px 72px #182d2826;
}
.modal :is(h2,h3) { color: var(--polish-ink); letter-spacing: -.03em; }
body:not([data-role=student]) .modal :is(h2,h3,legend) { font-family: var(--ui-font,system-ui),sans-serif; font-weight: 800; }
.modal :is(.modal-close,[aria-label=닫기]) { min-width: 48px; min-height: 48px; border-radius: 12px; }
.modal :is(.input,select:not([multiple])) {
  min-height: 48px;
  border: 1px solid #bdc9ba;
  border-radius: 14px;
  background: #fafbf8;
  color: var(--polish-ink);
  box-shadow: none;
}
.modal fieldset { border-color: var(--polish-line); }
body[data-role=host] .modal.teacher-design-dialog { background: var(--polish-canvas); border-color: var(--polish-line); }
body[data-role=host] .modal.teacher-design-dialog :is(h2,h3,legend) { font-family: var(--ui-font,system-ui),sans-serif; font-weight: 800; color: var(--polish-ink); }
body[data-role=host] .teacher-design-dialog :is(.design-section,.design-preview,.design-advanced,.design-template-bar) { border: 1px solid var(--polish-line); background: white; box-shadow: none; }
body[data-role=host] .teacher-design-dialog .design-actions { background: var(--polish-canvas); border-color: var(--polish-line); }
body[data-role=host] .teacher-design-dialog .design-actions .primary { background: var(--polish-lime); color: var(--polish-ink); border-color: var(--polish-edge); box-shadow: 0 5px 0 var(--polish-edge); }
body[data-role=host] .teacher-design-dialog .design-preset-row button { border: 1px solid #c9d4c4; color: var(--polish-ink); box-shadow: 0 3px 0 #dce4d6; }
body[data-role=host] .teacher-design-dialog .design-preset-row button[aria-pressed=true] { background: var(--polish-lime); border-color: var(--polish-edge); box-shadow: 0 3px 0 var(--polish-edge); }
body[data-role=host] .teacher-design-dialog .design-preview-grid { background: var(--polish-yellow); }
.modal:has(.accessibility-settings) {
  background: var(--polish-canvas);
  color: var(--polish-ink);
  border: 1px solid var(--polish-line);
  box-shadow: 0 24px 72px #182d2826;
}
.modal:has(.accessibility-settings) :is(h2,.accessibility-size-group legend) { color: var(--polish-ink); }
.modal:has(.accessibility-settings) .sensory-toggle,
.modal:has(.accessibility-settings) .sensory-volume,
.modal .accessibility-settings :is(.accessibility-size-group,.accessibility-color,.accessibility-motion) {
  border: 1px solid var(--polish-line);
  border-radius: 18px;
  background: white;
  color: var(--polish-ink);
  box-shadow: 0 2px 8px #243d3504;
}
.modal:has(.accessibility-settings) .sensory-toggle:has(input:checked):not(:has(input:disabled)),
.modal .accessibility-settings .accessibility-motion:has(input:checked) {
  background: #eef4df;
  border-color: #b6c98b;
  box-shadow: 0 2px 8px #243d3504;
}
.modal:has(.accessibility-settings) :is(.sensory-toggle-copy small,.sensory-status,.accessibility-motion-copy small) { color: var(--polish-muted); }
.modal:has(.accessibility-settings) .sensory-switch { background: #dfe6dd; }
.modal:has(.accessibility-settings) .sensory-toggle input:checked + .sensory-switch { background: #a6c962; }
.modal:has(.accessibility-settings) .sensory-switch:after { border: 1px solid #b0bbab; box-shadow: 0 1px 4px #243d3515; }
.modal:has(.accessibility-settings) .sensory-switch:before { color: var(--polish-ink); }
.modal:has(.accessibility-settings) .sensory-volume :is(select,input) { accent-color: var(--polish-ink); }
.modal:has(.accessibility-settings) .sensory-volume select,
.modal .accessibility-settings .accessibility-color select { border: 1px solid #bdc9ba; background: #fafbf8; color: var(--polish-ink); }
.modal .accessibility-settings { border-top: 1px solid var(--polish-line); color: var(--polish-ink); }
.modal .accessibility-settings .accessibility-choice {
  border: 1px solid #c9d4c4;
  border-radius: 14px;
  background: #f8f9f5;
  color: var(--polish-ink);
  box-shadow: 0 3px 0 #dce4d6;
}
.modal .accessibility-settings .accessibility-choice:has(input:checked) {
  background: var(--polish-lime);
  border-color: var(--polish-edge);
  box-shadow: 0 3px 0 var(--polish-edge);
}
.modal:has(.accessibility-settings) .reading-preview { border: 1px dashed #bdc9ba; background: #f2f5eb; color: var(--polish-ink); }
.modal .accessibility-settings .accessibility-reset { border: 1px solid var(--polish-line); box-shadow: 0 3px 0 #dce4d6; color: var(--polish-ink); }

/* Play screens retain their action and real game content. */
body[data-role=student][data-student-view=activity] { background: var(--polish-canvas); }
body[data-role=student][data-student-view=activity] .student-shell { background: var(--polish-canvas); }
body[data-role=student][data-student-view=activity] .student-status-banner {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #c4d9e2;
  border-radius: 16px;
  background: var(--polish-sky);
  color: var(--polish-ink);
  box-shadow: none;
  font-size: 13px;
  line-height: 1.5;
}
body[data-role=student][data-student-view=activity] .student-main .page-head { margin-bottom: 16px; }
.classroom-table-stage > .classroom-board-frame {
  border: 1px solid #c9d4c4 !important;
  border-radius: 22px !important;
  background: var(--polish-canvas);
  box-shadow: var(--polish-shadow);
}
body[data-role=student] .classroom-table-stage > .classroom-board-frame {
  height: max(480px, calc(100dvh - 255px)) !important;
  min-height: 330px;
}
body[data-role=student] .classroom-table-stage > .classroom-board-frame[data-expanded=true] { min-height: 0 !important; height: 100dvh !important; }
body[data-role=student] #content:has(.classroom-table-stage) > .quick-question { display: none; }
body[data-role=student] .native-game-stage { color: var(--polish-ink); }
.native-view-bar button { border: 1px solid #c9d4c4; background: white; color: var(--polish-ink); box-shadow: 0 4px 0 #dce4d6; }
.native-view-bar button[aria-pressed=true] { background: var(--polish-yellow); border-color: #d9c786; box-shadow: 0 4px 0 #d9c786; }
.native-3d-table { border: 1px solid #c9d4c4; border-radius: 22px; background: var(--polish-canvas); box-shadow: var(--polish-shadow); }
body[data-role=student] .native-game-stage :is(.sloth-game,.cow-panel,.sinking-panel,.rally-panel) { color: var(--polish-ink); border-color: #c9d4c4; box-shadow: 0 5px 0 #dce4d6, 0 8px 24px #243d3507; }
body[data-role=student] .native-game-stage :is(.sloth-main-action,.cow-primary,.sinking-primary,.rally-primary) { background: var(--polish-lime); color: var(--polish-ink); border-color: var(--polish-edge); box-shadow: 0 5px 0 var(--polish-edge); }
body[data-role=student] .native-game-stage :is(.sloth-main-action,.cow-primary,.sinking-primary,.rally-primary):active { box-shadow: 0 2px 0 var(--polish-edge); }
body[data-role=student] .science-lab { color: var(--polish-ink); }
body[data-role=student] .science-lab :is(.science-stage-panel,.science-control-panel,.science-notebook,.science-explainer) { border: 1px solid #c9d4c4; box-shadow: 0 4px 0 #dce4d6; background: white; }
body[data-role=student] .science-lab .science-stage-panel { background: #eff5eb; }
body[data-role=student] .science-lab .science-control-panel { background: #fdf9ea; }
body[data-role=student] .science-lab .science-readout { background: #e8f0d8; border-color: #b7c99c; color: var(--polish-ink); }
body[data-role=student] .science-lab .science-readout.is-retry { background: var(--polish-yellow); border-color: #d9c786; }
body[data-role=student] .science-lab .science-header p { background: var(--polish-sky); color: var(--polish-ink); }
body[data-role=student] .science-lab .science-choice-group .science-choice {
  border: 1px solid #c9d4c4;
  background: #f8f9f5;
  color: var(--polish-ink);
  box-shadow: 0 4px 0 #dce4d6;
}
body[data-role=student] .science-lab .science-choice-group .science-choice.is-active {
  background: var(--polish-yellow);
  border-color: #d9c786;
  box-shadow: 0 4px 0 #d9c786;
}
body[data-role=student] .science-lab .science-action:not(.secondary) {
  background: var(--polish-lime);
  color: var(--polish-ink);
  border-color: var(--polish-edge);
  box-shadow: 0 5px 0 var(--polish-edge);
}
body[data-role=student] .science-lab :is(.science-more-materials,.science-notebook-fold) { border: 1px solid #c9d4c4; box-shadow: 0 3px 0 #dce4d6; }

/* Strong contrast and motion preferences remain authoritative. */
html[data-color-mode=contrast] :is(.native-3d-table,.native-view-bar button) { background: white; color: #111; border: 3px solid #111; box-shadow: 0 4px 0 #111; }
html[data-color-mode=contrast] .native-view-bar button[aria-pressed=true] { background: #ffd43b; }
html[data-color-mode=contrast] .modal { background: white; color: #111; border-color: #111; }
html[data-color-mode=contrast] .modal :is(h2,h3,legend,select,.input) { color: #111; }
html[data-color-mode=contrast] .classroom-table-stage > .classroom-board-frame { border: 3px solid #111 !important; }
html[data-reduced-motion=true] :is(.native-view-bar button,.entry-shell .primary,.accessibility-reset):active { transform: none !important; }
@media(prefers-reduced-motion:reduce) { :is(.native-view-bar button,.entry-shell .primary,.accessibility-reset):active { transform: none !important; } }
@media(max-width:850px) {
  body[data-entry-role=teacher] .entry-shell .landing { grid-template-columns: minmax(0,1fr); max-width: 570px; gap: 28px; padding: 32px 24px 48px; }
  body[data-entry-role=teacher] .entry-shell .landing > .join-card { grid-column: 1; grid-row: 2; }
  body[data-entry-role=teacher] .entry-shell .landing > #class-edit-blocks { grid-column: 1; grid-row: 3; }
  body[data-entry-role=teacher] .entry-shell .hero-copy h1 { font-size: 38px; }
  body[data-entry-role=teacher] .entry-shell .hero-art { display: none; }
  body[data-entry-role=teacher] .entry-shell .topbar { padding: 0 20px; }
}
@media(max-width:440px) {
  body[data-entry-role=teacher] .entry-shell .topbar { padding: 0 14px; }
  body[data-entry-role=teacher] .entry-shell .teacher-page-actions { gap: 6px; }
  body[data-entry-role=teacher] .entry-shell .teacher-page-actions button { padding: 8px 10px; font-size: 12px; }
  body[data-entry-role=teacher] .entry-shell .landing { padding: 24px 16px 36px; gap: 24px; }
  body[data-entry-role=teacher] .entry-shell .hero-copy h1 { font-size: 34px; }
  body[data-entry-role=teacher] .entry-shell .join-card { padding: 22px 18px; }
  .modal:has(.accessibility-settings) { border-radius: 22px; }
}