/* Exercise catalogue and controls share the school's existing colours and scale. */
.x-field{display:grid;gap:8px;margin:14px 0;font-weight:600}
.x-field input,.x-field textarea,.x-exercise select,.extra-fields select{font:inherit;min-width:0;width:100%;box-sizing:border-box}
.x-field textarea{min-height:94px}
.extra-fields fieldset,.x-exercise fieldset{border:1px solid #e6e1f1;border-radius:14px;padding:18px;margin:18px 0;min-width:0}
.extra-fields legend,.x-exercise legend{font-weight:650;padding:0 8px;max-width:100%;overflow-wrap:anywhere}
.x-exercise fieldset:disabled{opacity:.55}
.x-media-input{padding:8px 0 20px}
.x-media-input small{display:block;margin:10px 0;color:#77758a}
.x-toolbar,.x-bank,.x-letter-bank,.x-letter-answer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0}
.x-toolbar select{width:auto}
.x-table-scroll{overflow:auto;max-width:100%;margin:16px 0}
.x-table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:380px}
.x-table td{border:1px solid #d8d2e7;padding:12px;vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere}
.x-table textarea{font:inherit;display:block;width:100%;min-height:72px;resize:vertical;box-sizing:border-box;border:0;background:transparent;padding:6px}
.x-table .inline-gap{max-width:100%;min-width:0;width:150px}
.x-align-left{text-align:left}.x-align-center{text-align:center}.x-align-right{text-align:right}
.x-gaps{line-height:2.7}.x-gaps select{display:inline-block;width:auto;max-width:100%;min-width:120px;margin:0 4px;padding:6px 10px;border:1px solid #d8d2e7;border-radius:8px}
.x-bank button{cursor:grab}.x-bank button:active{cursor:grabbing}
.x-statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.65fr);gap:16px;align-items:center;margin:14px 0;padding:12px;background:#fbfaff;border-radius:10px}
.x-item{display:flex;gap:12px;align-items:end;margin:12px 0}.x-item .x-field{flex:1;min-width:0}
.x-listen{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.6fr);gap:14px;align-items:center;margin:18px 0}
.x-listen audio{width:100%;max-width:100%}
.x-gallery figure{margin:18px 0}.x-gallery img,.x-material-image{max-width:100%;height:auto;display:block;margin:auto;border-radius:12px}
.x-gallery figcaption{padding:10px;text-align:center}.x-gallery img{max-height:600px;object-fit:contain}
.x-video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#171522;border-radius:12px;margin:18px 0}
.x-pdf{display:block;width:100%;height:650px;border:1px solid #ded9eb;border-radius:12px;margin:18px 0}
.x-diagram{position:relative;margin:18px 0}.x-diagram>img{display:block;width:100%;height:auto}.x-diagram-edit{cursor:crosshair}
.x-diagram svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.x-diagram circle{fill:#7658e5;stroke:white;stroke-width:.4}.x-diagram text{fill:white;font-size:3px;font-weight:700}
.x-order-answer,.x-letter-answer{min-height:62px;border:2px dashed #cfc4ed;border-radius:12px;padding:12px;background:#fbfaff}
.x-order-bank{margin:16px 0}.x-order-bank button,.x-order-answer button{display:block;text-align:left;width:100%;white-space:normal;margin:8px 0}
.x-unscramble{margin:22px 0}.x-letter-bank button,.x-letter-answer button{font-size:20px;min-width:44px}
.x-memory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.x-memory-card{min-height:100px;background:#f1edfe;border:1px solid #dad0f1;border-radius:14px;padding:14px;font:inherit;color:inherit;overflow-wrap:anywhere;cursor:pointer}
.x-memory-card span{visibility:hidden}.x-memory-card b{display:block;font-size:22px}.x-memory-card.is-open{background:white}.x-memory-card.is-open span{visibility:visible}.x-memory-card.is-open b{display:none}.x-memory-card[data-matched]{border-color:#5cb78c;background:#ecf9f0}
.x-response{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:18px 0}.x-response .note,.x-response [data-x-attachment-preview]{flex-basis:100%}
.x-response-image{display:block;max-width:100%;max-height:480px;object-fit:contain;border-radius:10px}.answer-review audio{width:100%;max-width:440px}
.x-timer{display:flex;align-items:center;gap:18px;margin:18px 0}.x-timer output{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:#6748c8}
.x-question-active{outline:2px solid #7658e5;outline-offset:2px}
.x-kind-note>.prose{border-left:4px solid #7658e5;background:#f5f1ff;padding:18px;border-radius:6px}
.x-kind-divider .reference-exercise-heading,.x-kind-divider>.prose{display:none}.x-divider{border:0;border-top:2px solid #e4def1;margin:18px 0}
.x-favorite-filter{display:flex;align-items:center;gap:10px;margin:16px 0 26px}.x-favorite-filter input{width:18px;height:18px}
[data-x-category]{margin:28px 0}[data-x-category]>h3{font-size:16px;letter-spacing:.02em;color:#77758a;margin:18px 0}
.x-template{position:relative;min-width:0}.x-template .template-tile{width:100%;height:100%;text-align:center;min-height:185px;padding:18px}
.x-template .template-tile strong{display:block;margin-top:12px;font-size:15px}.x-template .template-thumbnail{min-height:86px;padding:12px;margin-top:8px}
.x-favorite{position:absolute;top:8px;right:8px;z-index:1;border:0;background:white;color:#7658e5;width:32px;height:32px;border-radius:50%;font-size:23px;cursor:pointer}
.x-thumbnail{white-space:pre-wrap;text-align:center;font-size:17px;line-height:1.7;color:#7658e5}
.x-template [hidden],[data-x-category][hidden],.x-gallery [hidden],.x-timer [hidden]{display:none!important}
.x-exercise{min-width:0}.x-exercise button:focus-visible,.extra-fields button:focus-visible,.x-favorite:focus-visible{outline:3px solid #46cbed;outline-offset:3px}
@media(max-width:700px){.x-statement,.x-listen{grid-template-columns:1fr}.x-memory{grid-template-columns:repeat(2,minmax(0,1fr))}.x-pdf{height:480px}.x-item{display:block}.x-table td{padding:6px}.x-template .template-tile{min-height:165px}.x-toolbar{gap:6px}.x-toolbar .btn{padding:8px 10px}.x-table{min-width:340px}}

/* Exercise names are edited in the same place they appear to the learner. */
.builder-shell .exercise-identity{flex:1;min-width:0}
.builder-shell .exercise-type-label{flex:1;min-width:0}
.builder-shell .exercise-heading-input,.builder-shell .exercise-heading-button{font:inherit;color:inherit;line-height:1.45;box-sizing:border-box;max-width:100%;border-radius:8px}
.builder-shell .exercise-heading-input{width:100%;min-width:0;border:1px solid #dfd8f1;background:#fff;padding:6px 9px}
.builder-shell .exercise-heading-input::placeholder,.builder-shell .exercise-heading-button.is-placeholder{color:#9290a5;font-weight:400}
.builder-shell .exercise-heading-button{border:1px solid transparent;background:none;text-align:left;padding:6px 0;cursor:text;overflow-wrap:anywhere;white-space:normal}
.builder-shell .exercise-heading-button:hover{border-bottom-color:#b9a6eb}
.builder-shell .exercise-heading-button:focus-visible,.builder-shell .exercise-heading-input:focus-visible{outline:2px solid #a48bf1;outline-offset:3px}
@media(max-width:600px){.builder-shell .exercise-card-head{gap:8px}.builder-shell .exercise-identity{gap:8px}.builder-shell .exercise-heading-input{padding:6px}.builder-shell .exercise-card-actions{flex-shrink:0}}

/* A smaller reading size for lesson content, shared by authoring and practice. */
.builder-shell .block .prose,
.builder-shell .exercise-prompt,
.builder-shell .rich-editor{font-size:14px;line-height:1.55}
.builder-shell .cloze-exercise,
.builder-shell .block .x-gaps{font-size:14px;line-height:2.35}
.builder-shell .option,
.builder-shell .matching-row,
.builder-shell .dictionary-entry,
.builder-shell .x-table,
.builder-shell .x-statement,
.builder-shell .x-exercise legend,
.builder-shell .x-memory-card,
.builder-shell .x-order-bank button,
.builder-shell .x-order-answer button,
.builder-shell .image-word-bank button{font-size:13px;line-height:1.5}
.builder-shell .dictionary-entry strong{font-size:14px}
.builder-shell .picture-tile input,
.builder-shell .block .inline-gap,
.builder-shell .block .x-gaps select{font-size:13px;line-height:1.5}
.builder-shell .x-letter-bank button,
.builder-shell .x-letter-answer button{font-size:16px;line-height:1.5}
.builder-shell .exercise-type-label,
.builder-shell .reference-exercise-heading h3{font-size:16px;line-height:1.4}
.builder-shell .exercise-number-pill,
.builder-shell .reference-number{font-size:13px}
/* Keep text entry legible and avoid automatic page zoom on touch devices. */
@media(max-width:760px){
 .builder-shell .exercise-form input,
 .builder-shell .exercise-form textarea,
 .builder-shell .exercise-form select,
 .builder-shell .exercise-heading-input,
 .builder-shell .block input:not([type=radio]):not([type=checkbox]),
 .builder-shell .block textarea,
 .builder-shell .block select,
 .builder-shell .rich-editor{font-size:16px}
}

/* Preserve the author's line breaks, including blank lines, around inline gaps. */
.builder-shell .cloze-exercise{white-space:pre-wrap;overflow-wrap:anywhere}
.builder-shell .cloze-exercise,.builder-shell .block .x-gaps{line-height:2.35}
.builder-shell .gap-slot{display:inline-flex;flex-direction:column;vertical-align:middle;max-width:100%;margin:2px 4px;white-space:normal}
.builder-shell .block .gap-input{box-sizing:border-box;width:96px;min-width:0;max-width:100%;height:28px;min-height:0;padding:3px 7px;margin:0;border:1px solid #d8cee8;border-bottom:2px solid #bda8dd;border-radius:5px;font-size:13px;line-height:20px;vertical-align:middle}
.builder-shell .block select.gap-input{width:140px;padding-right:20px}
.builder-shell .block .gap-input.gap-correct{background:#f0faf5;border-color:#4d9b72;color:#286345}
.builder-shell .block .gap-input.gap-retry{background:#fffaf0;border-color:#bd8b34}
.builder-shell .block .gap-input.gap-exhausted{background:#fff0f2;border-color:#cc4b60;color:#a33145}
.builder-shell .block .gap-input:read-only,.builder-shell .block select.gap-input:disabled{opacity:1}
.builder-shell .gap-feedback{display:block;max-width:180px;margin-top:3px;font-size:11px;line-height:1.3;color:#886727;overflow-wrap:anywhere}
.builder-shell .gap-feedback[hidden]{display:none}
.builder-shell .gap-feedback.is-answer{color:#b02d43;font-weight:600}
.builder-shell .gap-feedback.is-correct{color:#286345}
.builder-shell .gap-help{font-size:11px;line-height:1.5;margin:10px 0 0}
@media(max-width:760px){.builder-shell .block .gap-input{font-size:16px;height:30px}}