/* A teacher's desk: sensible defaults first, room to make an activity their own. */
.modal.teacher-design-dialog {
  width: min(960px, calc(100vw - 40px));
  max-width: 960px;
  max-height: calc(100dvh - 36px);
  padding: 24px;
  overscroll-behavior: contain;
}
.teacher-design-dialog > .panel-title { margin-bottom: 12px; }
.teacher-design-dialog > .launch-impact { margin-bottom: 18px; }
.teacher-design-dialog form { display: block; }
.teacher-design-dialog .design-layout,
.teacher-design-dialog.bingo-setup-dialog #bingo-setup {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .9fr);
  align-items: start;
  gap: 22px;
}
.design-main, .design-preview { min-width: 0; }
.design-main { display: grid; gap: 18px; }
.design-section { margin: 0; padding: 18px; border: 1px solid #c3cfb9; border-radius: 19px; background: #fffef8; }
.design-section > :first-child { margin-top: 0; }
.design-section > :last-child { margin-bottom: 0; }
.design-section h3 { font-size: 17px; line-height: 1.45; margin: 0 0 14px; letter-spacing: -.025em; }
.design-kicker { margin: 0 0 9px; color: #597046; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.design-section h3:has(.design-step-label) { display: flex; align-items: center; gap: 8px; }
.design-step-label { display: inline-grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; margin: 0; border: 1px solid #9eac88; border-radius: 50%; background: #e1edc7; color: #37543f; font-size: 12px; font-weight: 800; }
.design-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.design-fields > label { margin: 0; min-width: 0; }
.design-fields > .wide, .design-fields > .full, .design-fields > .bingo-free-option { grid-column: 1 / -1; }
.teacher-design-dialog label { display: block; font-size: 14px; font-weight: 650; line-height: 1.5; }
.teacher-design-dialog label > input, .teacher-design-dialog label > select, .teacher-design-dialog label > textarea { margin-top: 7px; }
.teacher-design-dialog input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):not([type="range"]),
.teacher-design-dialog select, .teacher-design-dialog textarea { font-size: 16px; min-height: 48px; padding: 11px 12px; border-radius: 12px; }
.teacher-design-dialog textarea { line-height: 1.65; resize: vertical; min-height: 110px; }
.teacher-design-dialog input[type="checkbox"], .teacher-design-dialog input[type="radio"] { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: #395f46; }
.teacher-design-dialog label:has(> input[type="checkbox"]), .teacher-design-dialog label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.design-help { display: block; font-size: 12px; font-weight: 450; line-height: 1.65; color: #526674; margin: 8px 0 0; overflow-wrap: anywhere; }
.design-preset-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 15px; }
.design-preset-row button { min-height: 44px; padding: 9px 14px; border: 1px solid #a9bca0; border-radius: 12px; background: #f1f5e5; color: #35533f; font-size: 14px; font-weight: 700; box-shadow: 0 3px 0 #c7d4b7; transition: transform .16s var(--spring, ease), background .16s, box-shadow .16s; }
.design-preset-row button:hover { background: #e5efcc; transform: translateY(-2px); box-shadow: 0 5px 0 #c7d4b7; }
.design-preset-row button:active { transform: translateY(2px); box-shadow: 0 1px 0 #c7d4b7; }
.design-preset-row button[aria-pressed="true"], .design-preset-row button.active { color: #263f42; background: #ffe994; border-color: #aa955e; box-shadow: 0 3px 0 #c7af6d; }
.design-advanced { border: 1px solid #c3cfb9; border-radius: 18px; background: #f6f7ec; overflow: hidden; }
.design-advanced > summary { cursor: pointer; min-height: 52px; padding: 15px 18px; font-size: 14px; font-weight: 800; line-height: 1.5; color: #355447; }
.design-advanced > summary::marker { color: #66865c; }
.design-advanced[open] > summary { border-bottom: 1px solid #d5dfc8; }
.design-advanced > .design-fields, .design-advanced > .design-section, .design-advanced > .design-help { margin: 16px 18px 18px; }
.design-advanced > .design-section { padding: 0; background: transparent; border: 0; }
.teacher-design-dialog .design-advanced > label { margin: 16px 18px 18px; }
.teacher-design-dialog .design-advanced > .design-check { margin: 10px 18px; }
.design-preview { position: sticky; top: 0; padding: 19px; border: 1.5px solid #a6bdad; border-radius: 22px; background: #eaf4eb; box-shadow: 0 4px 0 #ccddc9; }
.design-preview > :first-child { margin-top: 0; }
.design-preview h3 { font-size: 17px; font-weight: 800; margin: 0 0 10px; overflow-wrap: anywhere; }
.design-preview-grid { display: grid; grid-template-columns: repeat(var(--preview-cols, 5), minmax(0, 1fr)); gap: 4px; margin: 17px 0; padding: 8px; background: #d5e6cd; border: 1px solid #adc0a6; border-radius: 15px; }
.design-preview-grid > * { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 2px; border: 1px solid #b7cbb0; border-radius: 5px; background: #fffef7; color: #476451; font-size: clamp(8px, 1vw, 12px); font-weight: 750; overflow-wrap: anywhere; line-height: 1.2; text-align: center; overflow: hidden; }
.design-preview-grid > .is-free { background: #e5d7f2; color: #654785; border-color: #b6a1c9; }
.design-summary { display: block; font-size: 13px; color: #385341; line-height: 1.65; overflow-wrap: anywhere; }
.design-summary p { margin: 0; font-size: inherit; line-height: inherit; }
.design-summary strong { color: #26453d; }
.design-summary > span { display: block; }
.design-preview .design-help { color: #4e695b; }
.design-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; grid-column: 1 / -1; position: sticky; bottom: -24px; z-index: 5; margin: 16px -24px 0; padding: 14px 24px; border-top: 1px solid #d8e0cd; background: #fffefa; box-shadow: 0 -6px 18px #fffefaee; }
.design-actions .primary { flex: 1 1 180px; min-height: 50px; }
.design-actions .secondary, .design-actions .ghost { min-height: 48px; }
.design-error { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px solid #d29f89; border-radius: 13px; background: #fff0e9; color: #883e32; font-size: 14px; font-weight: 650; line-height: 1.55; }
.design-error[hidden] { display: none; }
.design-template-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid #d5c5a1; border-radius: 16px; background: #fff4d4; margin: 0 0 20px; }
.teacher-design-dialog .design-template-bar label { display: flex; align-items: center; gap: 12px; flex: 1 1 250px; min-width: 0; margin: 0; font-size: 12px; white-space: nowrap; }
.teacher-design-dialog .design-template-bar label > select { flex: 1 1 170px; min-width: 120px; width: auto; margin: 0; }
.design-template-bar button { flex: 0 0 auto; min-height: 44px; padding-inline: 12px; font-size: 13px; white-space: nowrap; }
.design-choice-row { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 10px; }
.design-choice-row > label { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; gap: 7px; margin: 0; }
.design-choice-row > input:not([type="radio"]), .design-choice-row > label:has(input:not([type="radio"])) { flex: 1 1 0; min-width: 0; margin: 0; }
.design-choice-row > button { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; border-radius: 12px; background: #f6e8df; color: #794c3c; }
.design-options { min-width: 0; border: 0; margin: 0; padding: 0; }
.design-options legend { margin: 0 0 12px; padding: 0; font-size: 14px; font-weight: 750; line-height: 1.5; color: #375347; }
.teacher-design-dialog .design-answer-pick { min-height: 44px; min-width: 52px; padding: 7px; border: 1px solid #bfcdba; border-radius: 11px; background: #f0f5e5; }
.teacher-design-dialog .design-answer-pick:has(:checked) { background: #ddefcb; border-color: #789c66; color: #2c5737; }
.design-answer-pick:focus-within { outline: 3px solid #416ba1; outline-offset: 2px; }
.design-preview-clock { margin: 20px 0; color: #355445; font-size: clamp(25px, 3.8vw, 43px); font-weight: 850; line-height: 1.25; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.design-preview-paper { display: grid; place-items: center; min-height: 150px; margin: 16px 0; padding: 18px; border: 1px dashed #98b6a0; border-radius: 16px; color: #5d7963; font-size: 15px; text-align: center; box-shadow: 0 3px 0 #c4d8bf; }
.design-preview-options { display: grid; gap: 8px; padding: 0; margin: 16px 0; list-style: none; counter-reset: preview-option; }
.design-preview-options li { display: flex; align-items: flex-start; gap: 10px; counter-increment: preview-option; padding: 10px 12px; min-width: 0; border: 1px solid #bdd0b7; border-radius: 12px; background: #fffef7; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.design-preview-options li::before { content: counter(preview-option); display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #e5efd8; color: #496548; font-size: 11px; font-weight: 800; }
.drawing-palette { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.drawing-palette button { flex: 0 0 38px; width: 38px; height: 38px; min-height: 38px; padding: 0; border: 2px solid #899b87; border-radius: 50%; box-shadow: 0 3px 0 #bdc9b5; }
.drawing-palette button[aria-pressed="true"], .drawing-palette button.active { outline: 3px solid #456981; outline-offset: 3px; }
.drawing-palette button:active { transform: translateY(2px); box-shadow: 0 1px 0 #bdc9b5; }
.design-storage-note { margin: 7px 0 0; text-align: right; font-size: 11px; }
#design-word-count { margin: 10px 0 0; font-size: 13px; font-weight: 750; line-height: 1.6; color: #8a5036; }
#design-word-count.ready { color: #3a643d; }
.teacher-design-dialog .bingo-modes { gap: 10px; margin-bottom: 10px; }
.teacher-design-dialog .bingo-mode { min-height: 64px; padding: 10px; }
.teacher-design-dialog .bingo-mode b { font-size: 15px; }
.teacher-design-dialog .design-section { padding: 15px; }
.teacher-design-dialog .design-section h3 { margin-bottom: 10px; }
.teacher-design-dialog .design-preset-row { margin: 10px 0 12px; }
.teacher-design-dialog .design-main { gap: 14px; }
.guided-instructions { margin: 0 0 18px; padding: 16px 18px; border: 1px solid #c6b897; border-radius: 17px; background: #fff2c3; color: #3f5140; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.guided-instructions strong { display: block; color: #374f42; font-size: 16px; margin-bottom: 5px; }
.guided-instructions p { margin: 5px 0 0; font-size: inherit; line-height: inherit; }
.math-progress { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 16px; padding: 12px 15px; border-radius: 15px; background: #eaf3df; color: #3b5944; font-size: 14px; line-height: 1.5; }
.math-progress b { color: #294f3a; }
.bingo-board-scroll { width: 100%; max-width: 100%; overflow-x: auto; padding: 4px 3px 12px; margin: 12px 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-color: #9caf8d #eef3e5; scrollbar-width: thin; }
.student-main .bingo-board-scroll .bingo-grid.custom-board { grid-template-columns: repeat(var(--bingo-size, 5), minmax(44px, 1fr)); min-width: calc(var(--bingo-size, 5) * 44px + (var(--bingo-size, 5) - 1) * 8px); max-width: none; width: 100%; margin: 0; }
.student-main .bingo-board-scroll .bingo-grid.custom-board.words { grid-template-columns: repeat(var(--bingo-size, 5), minmax(64px, 1fr)); min-width: calc(var(--bingo-size, 5) * 64px + (var(--bingo-size, 5) - 1) * 8px); }
.bingo-board-scroll .bingo-row { display: contents; }
.gomoku-board { grid-template-columns: repeat(var(--gomoku-size, 15), minmax(0, 1fr)); }
.student-main .gomoku-scroll .gomoku-board { min-width: calc(var(--gomoku-size, 15) * 44px + 36px); }
.teacher-quick-tools .tools-grid, .teacher-quick-tools.tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .teacher-quick-tools .tools-grid, .teacher-quick-tools.tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .modal.teacher-design-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); padding: 20px 16px; border-radius: 23px; }
  .teacher-design-dialog .design-layout, .teacher-design-dialog.bingo-setup-dialog #bingo-setup { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .design-preview { position: static; padding: 17px; }
  .design-preview-grid { max-width: 270px; margin: 12px auto; }
  .design-section { padding: 15px; }
  .design-fields { gap: 12px 10px; }
  .design-template-bar { padding: 10px; }
  .teacher-design-dialog .design-template-bar label { display: grid; gap: 7px; flex-basis: 100%; }
  .teacher-design-dialog .design-template-bar label > select { width: 100%; min-width: 0; }
  .design-template-bar button { flex: 1 1 auto; }
  .design-actions { bottom: -20px; margin-inline: -16px; padding: 12px 16px; }
  .design-actions .primary { flex-basis: 100%; }
  .design-actions .secondary, .design-actions .ghost { flex: 1; }
  .guided-instructions { padding: 14px; font-size: 14px; }
}
@media (max-width: 540px) {
  .student-main .bingo-board-scroll .bingo-grid.custom-board { min-width: calc(var(--bingo-size, 5) * 44px + (var(--bingo-size, 5) - 1) * 4px); }
  .student-main .bingo-board-scroll .bingo-grid.custom-board.words { min-width: calc(var(--bingo-size, 5) * 64px + (var(--bingo-size, 5) - 1) * 4px); }
  .student-main .bingo-board-scroll .bingo-grid.custom-board.words .bingo-cell { min-height: 74px; font-size: 13px; }
  .student-main .bingo-board-scroll .bingo-grid.custom-board.words.size-3 .bingo-cell { min-height: 96px; font-size: 18px; }
  .design-choice-row { gap: 7px; }
  .design-choice-row > label { font-size: 12px; }
  .design-template-bar button { font-size: 12px; padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .design-preset-row button { transition: none; }
  .design-preset-row button:hover { transform: none; }
}

.drawing-layout:has(.layers[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* Standard small boards fit a phone; wide custom boards keep readable cells. */
.student-main .bingo-board-scroll .bingo-grid.custom-board.words:not(.is-wide) {
  grid-template-columns: repeat(var(--bingo-size, 5), minmax(0, 1fr));
  min-width: 0;
}

/* Status notifications must never block the teacher's start button. */
.toast { pointer-events: none; }