/* Shared controls for interactive worksheet editors. Activity geometry stays in renderer assets. */
.worksheet-practice .questions > .question:only-child {
  grid-column: 1 / -1;
}

/* Shared question-grid rule for any activity left alone in a desktop row. */
@media (min-width: 768px) {
  .worksheet-practice .questions > .question.is-solo-row {
    grid-column: 1 / -1;
  }
}

.wk-interactive-editor,
.we-sheet {
  --wk-editor-font-family: inherit;
  --wk-editor-font-size: 15px;
  --wk-editor-text-color: #172544;
  --wk-editor-muted-color: #68768c;
  --wk-editor-border-color: #bccde4;
  --wk-editor-border-radius: 6px;
  --wk-editor-field-height: 50px;
  --wk-editor-field-width: 100%;
  --wk-editor-field-font-size: inherit;
  --wk-editor-field-font-weight: inherit;
  --wk-editor-field-text-align: initial;
  --wk-editor-field-line-height: normal;
  --wk-editor-field-border: 1px solid var(--wk-editor-border-color);
  --wk-editor-field-radius: var(--wk-editor-border-radius);
  --wk-editor-field-background: #f8fbff;
  --wk-editor-field-padding: 12px;
  --wk-editor-spacing: 10px;
  --wk-editor-choice-min-width: 0;
  --wk-editor-choice-min-height: 0;
  --wk-editor-choice-mobile-min-width: 0;
  --wk-editor-choice-mobile-min-height: 0;
  --wk-editor-choice-padding: 9px 10px;
  --wk-editor-choice-mobile-padding: 9px 10px;
  --wk-editor-choice-print-padding: 4px;
  --wk-editor-choice-border: 1px solid var(--wk-editor-choice-border-color, #e2e9f2);
  --wk-editor-choice-border-color: #e2e9f2;
  --wk-editor-choice-radius: 6px;
  --wk-editor-choice-background: transparent;
  --wk-editor-choice-font-size: 13px;
  --wk-editor-correct-color: #e4f3ed;
  --wk-editor-correct-text: #286c4a;
  --wk-editor-correct-border: #709bef;
  --wk-editor-incorrect-color: #fff0f2;
  --wk-editor-incorrect-text: #a33c4c;
  --wk-editor-incorrect-border: #d86b7c;
  color: var(--wk-editor-text-color);
  font-family: var(--wk-editor-font-family);
}

/* Base answer field preserves the former .answer rule in main.css. */
.wk-interactive-editor .answer,
.wk-interactive-editor .wk-editor-field,
.we-sheet .wk-editor-field {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--wk-editor-field-height);
  width: var(--wk-editor-field-width);
  padding: var(--wk-editor-field-padding);
  border: var(--wk-editor-field-border);
  border-radius: var(--wk-editor-field-radius);
  background: var(--wk-editor-field-background);
  color: var(--wk-editor-text-color);
  font-family: inherit;
  font-size: var(--wk-editor-field-font-size);
  font-weight: var(--wk-editor-field-font-weight);
  line-height: var(--wk-editor-field-line-height);
  text-align: var(--wk-editor-field-text-align);
}

.wk-interactive-editor :is(.answer, .wk-editor-field):focus-visible,
.we-sheet .wk-editor-field:focus-visible {
  outline: 3px solid var(--wk-field-focus, #6b99ff);
  outline-offset: 4px;
}

.wk-interactive-editor :is(.answer, .wk-editor-field):disabled,
.we-sheet .wk-editor-field:disabled {
  cursor: not-allowed;
  opacity: .58;
}

/* Sizing variants are opt-in; existing activities keep their current geometry. */
.wk-interactive-editor .wk-editor-field--letter,
.we-sheet .wk-editor-field--letter { width: var(--wk-editor-letter-width, 3.5em); min-width: var(--wk-editor-letter-width, 3.5em); text-align: center; }
.wk-interactive-editor .wk-editor-field.wk-editor-field--letter,
.we-sheet .wk-editor-field.wk-editor-field--letter { border: var(--wk-editor-field-border); border-radius: var(--wk-editor-field-radius); background: var(--wk-editor-field-background); color: var(--wk-editor-text-color); font-size: var(--wk-editor-field-font-size); font-weight: var(--wk-editor-field-font-weight); line-height: var(--wk-editor-field-line-height); }
.wk-interactive-editor .wk-editor-field--number,
.we-sheet .wk-editor-field--number { width: var(--wk-editor-number-width, min(100%, 8ch)); text-align: center; font-variant-numeric: tabular-nums; }
.wk-interactive-editor .wk-editor-field--clock,
.we-sheet .wk-editor-field--clock { width: var(--wk-editor-clock-width, var(--wk-editor-number-width, min(100%, 8ch))); }
.wk-interactive-editor .wk-editor-field--word,
.we-sheet .wk-editor-field--word { width: var(--wk-editor-word-width, min(100%, 14em)); }
.wk-interactive-editor .wk-editor-field--sentence,
.we-sheet .wk-editor-field--sentence { width: var(--wk-editor-sentence-width, 100%); min-height: var(--wk-editor-sentence-height, calc(var(--wk-editor-field-height) * 1.6)); }
.wk-interactive-editor .wk-editor-field--compact,
.we-sheet .wk-editor-field--compact { --wk-editor-field-height: 48px; --wk-editor-field-padding: 8px 11px; --wk-editor-field-border: 2px solid #a9bdd8; --wk-editor-field-radius: 10px; --wk-editor-field-background: #fff; --wk-editor-field-font-size: 17px; --wk-editor-field-font-weight: 700; }
.wk-interactive-editor .wk-editor-field--roomy,
.we-sheet .wk-editor-field--roomy { --wk-editor-field-height: 58px; --wk-editor-field-padding: 8px 12px; --wk-editor-field-border: 2px solid #a9bdd8; --wk-editor-field-radius: 10px; --wk-editor-field-background: #fff; --wk-editor-field-font-size: clamp(22px, 4cqi, 32px); --wk-editor-field-font-weight: 750; }
.wk-interactive-editor .wk-editor-field--intrinsic,
.we-sheet .wk-editor-field--intrinsic { width: 100%; --wk-editor-field-height: auto; --wk-editor-field-width: 100%; --wk-editor-field-padding: 7px; --wk-editor-field-border: 1px solid #cbd9eb; --wk-editor-field-radius: 6px; --wk-editor-field-background: #fff; --wk-editor-field-font-size: inherit; --wk-editor-field-font-weight: inherit; }

/* Explicit opt-in variant for grid cells whose renderer owns exact cell geometry. */
.wk-interactive-editor .wk-editor-field--grid-cell,
.we-sheet .wk-editor-field--grid-cell { width: 100%; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; }

/* Shared choice-card baseline; activity CSS may specialize its arrangement. */
.wk-interactive-editor .wk-editor-option,
.we-sheet .wk-editor-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: var(--wk-editor-choice-min-width);
  min-height: var(--wk-editor-choice-min-height);
  max-width: 100%;
  margin: 8px 0;
  padding: var(--wk-editor-choice-padding);
  border: var(--wk-editor-choice-border);
  border-radius: var(--wk-editor-choice-radius);
  background: var(--wk-editor-choice-background);
  color: var(--wk-editor-text-color);
  font-size: var(--wk-editor-choice-font-size);
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.wk-interactive-editor .wk-editor-option input,
.we-sheet .wk-editor-option input { flex: 0 0 auto; }
.wk-interactive-editor .wk-editor-option span,
.we-sheet .wk-editor-option span { display: inline; min-width: 0; min-height: 0; }
.wk-interactive-editor .wk-editor-option:has(input:checked),
.we-sheet .wk-editor-option:has(input:checked) {
  border-color: var(--wk-editor-choice-selected-border-color, #709bef);
  background: var(--wk-editor-choice-selected-background, #eef4ff);
}

.wk-interactive-editor .wk-editor-option:focus-within,
.we-sheet .wk-editor-option:focus-within {
  outline: 3px solid var(--wk-action-focus, #2563eb);
  outline-offset: 3px;
}

.wk-interactive-editor .wk-editor-option.answer-correct,
.we-sheet .wk-editor-option.answer-correct { border-color: var(--wk-editor-correct-border, #43846c) !important; background: var(--wk-editor-correct-color, #d6eee3) !important; color: var(--wk-editor-correct-text, inherit) !important; }
.wk-interactive-editor .wk-editor-option.answer-incorrect,
.we-sheet .wk-editor-option.answer-incorrect { border-color: var(--wk-editor-incorrect-border, #d66b7d) !important; background: var(--wk-editor-incorrect-color, #fff0f2) !important; color: var(--wk-editor-incorrect-text, inherit) !important; }

/* Common semantic hooks for renderer-owned feedback and instructional text. */
.wk-interactive-editor .wk-editor-instruction,
.we-sheet .wk-editor-instruction {
  color: var(--wk-editor-muted-color);
  font-size: var(--wk-editor-font-size);
  line-height: 1.6;
}

.wk-interactive-editor .wk-editor-feedback,
.we-sheet .wk-editor-feedback {
  color: var(--wk-editor-muted-color);
  font-weight: 650;
}

.wk-interactive-editor .wk-editor-feedback.is-correct,
.we-sheet .wk-editor-feedback.is-correct {
  color: var(--wk-editor-correct-text, #286c4a);
  border-color: var(--wk-editor-correct-border);
  background: var(--wk-editor-correct-color);
}

.wk-interactive-editor .wk-editor-feedback.is-incorrect,
.we-sheet .wk-editor-feedback.is-incorrect {
  color: var(--wk-editor-incorrect-text, #a33c4c);
  border-color: var(--wk-editor-incorrect-border);
  background: var(--wk-editor-incorrect-color);
}

/* Hotspot markers stay circular at narrow widths; their visible size follows
   the image width while a larger transparent target remains easy to tap. */
.wk-interactive-editor .spatial-picture {
  container-type: inline-size;
}

.wk-interactive-editor .spatial-activity[data-spatial="hotspots"] .spatial-pin {
  display: grid;
  place-items: center;
  inline-size: var(--wk-hotspot-size, 6cqi);
  block-size: var(--wk-hotspot-size, 6cqi);
  min-inline-size: 0;
  min-block-size: 0;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 1;
  line-height: 1;
  text-align: center;
}

.wk-interactive-editor .spatial-activity[data-spatial="hotspots"] .spatial-pin::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 44px;
  block-size: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wk-interactive-editor .wk-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wk-editor-spacing);
}

@media (max-width: 767px) {
  .wk-interactive-editor .wk-editor-actions { gap: 8px; }
  .wk-interactive-editor .wk-editor-field--sentence,
  .we-sheet .wk-editor-field--sentence { min-height: 72px; }
}

@media (max-width: 480px) {
  .wk-interactive-editor .wk-editor-option,
  .we-sheet .wk-editor-option { min-width: var(--wk-editor-choice-mobile-min-width); min-height: var(--wk-editor-choice-mobile-min-height); padding: var(--wk-editor-choice-mobile-padding); }
}

@media print {
  .wk-interactive-editor .wk-editor-option,
  .we-sheet .wk-editor-option { min-width: 14mm; min-height: 14mm; margin: 2mm 1mm 2mm 0; padding: var(--wk-editor-choice-print-padding); border: 1px solid #555; border-radius: 3mm; background: #fff !important; box-shadow: none !important; color: #000; }
  .wk-interactive-editor .wk-editor-feedback { display: none !important; }
}