/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  --btn-border: var(--color-border-strong);
  --btn-hover-bg: var(--color-surface-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--control-height);
  padding: 0 var(--space-md);
  border: var(--border-width-sm) solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-button);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease), transform var(--duration-fast) var(--ease), color var(--duration) var(--ease);
}
.btn:hover { background: var(--btn-hover-bg); color: var(--btn-fg); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-on-primary);
  --btn-border: transparent;
  --btn-hover-bg: var(--color-primary-hover);
  box-shadow: var(--shadow-button);
}
.btn-secondary {
  --btn-bg: var(--color-secondary);
  --btn-fg: var(--color-on-secondary);
  --btn-border: transparent;
  --btn-hover-bg: var(--color-secondary-hover);
  box-shadow: var(--shadow-button);
}
.btn-danger {
  --btn-bg: var(--color-error);
  --btn-fg: var(--color-on-error);
  --btn-border: transparent;
  --btn-hover-bg: color-mix(in srgb, var(--color-error) 85%, #000);
}
.btn-ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--color-text-muted);
  --btn-hover-bg: var(--color-surface-alt);
  box-shadow: none;
}
.btn-ghost:hover { --btn-fg: var(--color-text); }
.btn-lg { min-height: 3.5rem; padding: 0 var(--space-xl); font-size: var(--font-size-lg); border-radius: var(--radius-lg); }
.btn-sm { min-height: 2.25rem; padding: 0 var(--space-sm); font-size: var(--font-size-sm); }
.btn-block { width: 100%; }
.btn-icon { width: var(--control-height); padding: 0; }
.btn-icon.btn-sm { width: 2.25rem; }
.btn .spinner { width: 1em; height: 1em; }
.btn-danger-ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--color-error); --btn-hover-bg: var(--color-error-bg); box-shadow: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border: var(--border-width-sm) solid var(--color-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}
.card-flush { padding: 0; overflow: hidden; }
.card-header { padding: var(--space-md) var(--space-lg); border-bottom: var(--border-width-sm) solid var(--color-divider); }
.card-title { margin: 0; font-size: var(--font-size-lg); }

.auth-card { padding: var(--space-xl); }
.auth-card .auth-logo { width: 4rem; height: 4rem; margin: 0 auto var(--space-md); }
.auth-card h1 { text-align: center; margin-bottom: var(--space-2xs); }
.auth-card .lead { text-align: center; color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.auth-card .auth-footer { margin-top: var(--space-lg); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ---------- Forms ---------- */
.form-group { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-md); min-width: 0; }
.form-group:last-child { margin-bottom: 0; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--space-md); }
.form-row > .form-group { margin-bottom: var(--space-md); }
label, .label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.label-optional { font-weight: var(--font-weight-normal); color: var(--color-text-faint); }
.hint { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.6rem 0.85rem;
  border: var(--border-width-md) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-inset);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-faint); opacity: 1; font-style: italic; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-strong); }
.input:focus, .select:focus, .textarea:focus, .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--color-border-focus);
  box-shadow: var(--focus-ring);
  outline: none;
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-faint);
  border-style: dashed;
  cursor: not-allowed;
}
.textarea { min-height: 6rem; resize: vertical; line-height: var(--line-height-base); }
.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
/* Language switcher next to the appearance button (decisions 26, 81): a
   globe button; the transparent native select on top does the choosing. */
.language-switch { position: relative; flex: 0 0 auto; gap: var(--space-2xs); padding: 0 var(--space-xs); }
.language-switch .language-code { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; }
.language-switch select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 1rem; }
.language-switch:focus-within { box-shadow: var(--focus-ring); }
.input-lg { min-height: 3.5rem; font-size: var(--font-size-lg); border-radius: var(--radius-lg); padding: 0.75rem 1rem; }

.input.is-invalid, .select.is-invalid, .textarea.is-invalid, .is-invalid .input,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}
.input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 35%, transparent);
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-error);
  animation: fade-slide-in var(--duration) var(--ease);
}
.field-error:empty { display: none; }
.field-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; border-radius: 50%; background: var(--color-error); color: var(--color-surface); font-size: 0.75rem; font-weight: 800; }
fieldset.is-invalid { border-color: var(--color-error); }

.form-alert {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border: var(--border-width-sm) solid var(--color-error-border);
  border-radius: var(--radius-md);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.form-alert.is-info { border-color: transparent; background: var(--color-info-bg); color: var(--color-info); }
.form-alert:empty { display: none; }

.input-group { display: flex; gap: var(--space-xs); align-items: stretch; }
.input-group .input { flex: 1; }

fieldset { border: var(--border-width-md) solid var(--color-card-border); border-radius: var(--radius-lg); padding: var(--space-md); margin: 0 0 var(--space-md); min-width: 0; }
legend { padding: 0 var(--space-2xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

.segmented { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-md); background: var(--color-surface-alt); flex-wrap: wrap; }
.segmented label {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 2.5rem; padding: 0 var(--space-sm);
  border-radius: var(--radius-inner);
  cursor: pointer; color: var(--color-text-muted);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.segmented label:has(input:checked) { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.segmented label:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.check { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control-height); cursor: pointer; font-weight: var(--font-weight-medium); }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); margin: 0; }
.modal-body .check { display: flex; flex-wrap: nowrap; flex-shrink: 0; }
.modal-body .check > span { min-width: 0; flex: 1; }
.modal-body .check input { flex-shrink: 0; }
.report-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.report-row { flex-wrap: wrap; }
.report-row .list-item-main { flex: 1 1 16rem; }
.report-row .list-item-actions { flex-wrap: wrap; }

/* Option editors (MC options, DnD items, pairs) */
.option-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.option-row { display: flex; gap: var(--space-xs); align-items: center; }
.option-row .input { flex: 1; min-width: 0; }
/* Cloze gap editor: kind selection, then the fields of that kind (wrapping on phones). */
.gap-row { align-items: flex-start; }
.gap-row .gap-kind { flex: none; width: auto; }
.gap-fields { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.gap-fields .input { flex: 1 1 8rem; }
.gap-fields .input.input-narrow { flex: 0 0 5.5rem; }
.gap-tolerance, .gap-correct { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); }
.gap-row .picker-index { margin-top: calc((var(--control-height) - 1.75rem) / 2); }
@media (max-width: 520px) {
  .gap-row { flex-wrap: wrap; }
  .gap-row .gap-kind { flex: 1 1 auto; }
  .gap-fields { flex: 1 1 100%; padding-left: calc(1.75rem + var(--space-xs)); }
}
.gap-correct .select { width: auto; min-width: 4.5rem; }
.option-row .correct-toggle { flex: none; display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border-radius: var(--radius-md); border: var(--border-width-md) solid var(--color-border); cursor: pointer; transition: all var(--duration) var(--ease); color: var(--color-text-faint); }
.option-row .correct-toggle:has(input:checked) { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.option-row .correct-toggle:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.option-row .correct-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-row .pair-arrow { color: var(--color-text-faint); }
.pair-side { display: flex; align-items: center; gap: var(--space-2xs); flex: 1 1 0; min-width: 0; }
.pair-side .input { flex: 1 1 auto; min-width: 0; }
.pair-side .image-picker, .option-row .image-picker { flex: none; flex-wrap: nowrap; gap: var(--space-2xs); }
@media (max-width: 520px) {
  .pair-row { flex-wrap: wrap; }
  .pair-row .pair-side { flex: 1 1 100%; }
  .pair-row .pair-arrow { transform: rotate(90deg); }
  .pair-row .category-select { flex: 1 1 auto; }
}
.option-thumb { width: var(--control-height); height: var(--control-height); border-radius: var(--radius-md); object-fit: cover; border: var(--border-width-sm) solid var(--color-border); }

/* Tag input */
.tag-input { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; min-height: var(--control-height); padding: 0.3rem 0.5rem; border: var(--border-width-md) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); cursor: text; }
.tag-input:focus-within { border-color: var(--color-border-focus); box-shadow: var(--focus-ring); }
.tag-input input { flex: 1; min-width: 8rem; border: 0; background: transparent; padding: 0.3rem; min-height: 2rem; }
.tag-input input:focus { box-shadow: none; }

/* Image picker */
.image-picker { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
/* Image library */
.library-search { margin-bottom: var(--space-xs); }
.library-status { margin: 0 0 var(--space-sm); }
.library-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-sm); }
.library-item { position: relative; }
.library-pick {
  display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; padding: var(--space-xs);
  border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
  color: var(--color-text); text-align: left; cursor: pointer; font: inherit;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.library-pick:hover { border-color: var(--color-primary); }
.library-pick:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.library-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: var(--space-2xs); border-radius: var(--radius-sm); background: var(--color-surface-alt); overflow: hidden; }
.library-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Room on the right so a long name never runs under the rename button. */
.library-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; padding-right: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.library-usage { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.library-edit { position: absolute; right: var(--space-2xs); bottom: var(--space-2xs); }
@media (max-width: 520px) { .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.image-preview { width: 6rem; height: 6rem; border-radius: var(--radius-md); object-fit: cover; border: var(--border-width-sm) solid var(--color-border); background: var(--color-surface-alt); }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.badge-multiple_choice { background: var(--badge-mc-bg); color: var(--badge-mc-fg); }
.badge-freetext { background: var(--badge-ft-bg); color: var(--badge-ft-fg); }
.badge-drag_and_drop { background: var(--badge-dnd-bg); color: var(--badge-dnd-fg); }
.badge-draft { background: var(--badge-draft-bg); color: var(--badge-draft-fg); }
.badge-changed { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-ready { background: var(--badge-live-bg); color: var(--badge-live-fg); }
.badge-own { background: var(--color-secondary-soft); color: var(--color-secondary); }
.chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1rem 0.25rem 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.chip button { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.chip button:hover { background: color-mix(in srgb, var(--color-secondary) 18%, transparent); }
.tag { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.tag::before { content: "#"; opacity: 0.6; }

/* ---------- Lists (teacher portal) ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-width-sm) solid var(--color-divider);
  transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  position: relative;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--color-surface-alt); }
.list-item:hover::before, .list-item:focus-within::before { content: ""; position: absolute; left: 0; top: var(--space-sm); bottom: var(--space-sm); width: 3px; border-radius: 0 3px 3px 0; background: var(--color-secondary); }
.list-item-main { flex: 1; min-width: 0; }
.list-item-title { margin: 0 0 var(--space-2xs); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.list-item-title button, .list-item-title a { all: unset; cursor: pointer; border-radius: var(--radius-sm); }
.list-item-title button:focus-visible, .list-item-title a:focus-visible { box-shadow: var(--focus-ring); }
.list-item-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.list-item-actions { display: flex; gap: var(--space-2xs); flex: none; }
.list-count { font-size: var(--font-size-sm); color: var(--color-text-muted); padding: var(--space-sm) var(--space-lg); border-bottom: var(--border-width-sm) solid var(--color-divider); background: var(--color-surface-alt); }

@media (max-width: 640px) {
  .list-item { flex-wrap: wrap; padding: var(--space-md); }
  .list-item-actions { width: 100%; justify-content: flex-end; }
}

/* Selectable question picker inside the quiz editor */
.picker { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; border: var(--border-width-md) solid var(--color-border); border-radius: var(--radius-md); overscroll-behavior: contain; }
.picker-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-bottom: var(--border-width-sm) solid var(--color-divider); min-height: 3rem; }
.picker-item:last-child { border-bottom: 0; }
.picker-item:hover { background: var(--color-surface-alt); }
.picker-item .grow { flex: 1 1 12rem; overflow-wrap: anywhere; }
.picker-item > .badge, .picker-item > .btn { flex: none; }
.picker-actions { display: flex; flex: none; gap: var(--space-2xs); margin-left: auto; }
.picker-index { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-secondary-soft); color: var(--color-secondary); font-size: var(--font-size-xs); font-weight: 700; flex: none; }

/* ---------- Empty, loading ---------- */
.empty-state { text-align: center; padding: var(--space-2xl) var(--space-lg); color: var(--color-text-muted); }
.empty-state .icon-xl { margin: 0 auto var(--space-md); color: var(--color-text-faint); }
.empty-state h3 { color: var(--color-text); }
.spinner { width: 1.5rem; height: 1.5rem; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
.loading { display: flex; justify-content: center; padding: var(--space-2xl); color: var(--color-text-faint); }
.skeleton { border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--color-surface-alt) 0%, var(--color-surface-sunken) 50%, var(--color-surface-alt) 100%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; min-height: 9rem; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in var(--duration) var(--ease);
  overscroll-behavior: contain;
}
.modal-backdrop.is-closing { animation: fade-out var(--duration) var(--ease) forwards; }
.modal {
  width: min(40rem, 100%);
  max-height: calc(100vh - 2 * var(--space-md));
  max-height: calc(100dvh - 2 * var(--space-md));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width-sm) solid var(--color-card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  animation: modal-in var(--duration) var(--ease);
}
.modal-backdrop.is-closing .modal { animation: modal-out var(--duration) var(--ease) forwards; }
.modal-lg { width: min(52rem, 100%); }
.modal-sm { width: min(28rem, 100%); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-md); border-bottom: var(--border-width-sm) solid var(--color-divider); }
.modal-header h2 { margin: 0; font-size: var(--font-size-xl); }
.modal-body { padding: var(--space-lg); overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: var(--border-width-sm) solid var(--color-divider); flex-wrap: wrap; }
.modal-footer .status-text { flex: 1 1 8rem; min-width: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
/* Empty it must not claim room from the buttons; it stays in the DOM as a live region. */
.modal-footer .status-text:empty { position: absolute; }
.modal-footer .status-text.is-warning { color: var(--color-warning); font-weight: var(--font-weight-bold); }
body.modal-open { overflow: hidden; }
.modal-form { display: contents; }

@media (max-width: 640px) {
  .modal-backdrop { padding: 2.5vw; }
  .modal { width: 95vw; max-height: 95dvh; border-radius: var(--radius-lg); }
  .modal-header, .modal-body, .modal-footer { padding-left: var(--space-md); padding-right: var(--space-md); }
  .modal-footer .btn { flex: 1; }
  .modal-footer .status-text { flex-basis: 100%; }
  /* Bottom sheet */
  .modal-backdrop.has-sheet { align-items: end; padding: 0; }
  .modal-sheet {
    width: 100%; max-height: 90dvh;
    border-radius: var(--radius-xl);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: sheet-in;
  }
  .modal-backdrop.is-closing .modal-sheet { animation-name: sheet-out; }
}

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: 300; left: 50%; bottom: var(--space-lg); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-xs); width: min(26rem, calc(100% - 2rem)); pointer-events: none; }
.toast { display: flex; gap: var(--space-xs); align-items: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-lift); font-weight: var(--font-weight-medium); animation: toast-in var(--duration-slow) var(--ease-bounce); pointer-events: auto; }
.toast.is-leaving { animation: fade-out var(--duration) var(--ease) forwards; }
.toast-success .icon { color: var(--toast-success-fg); }
.toast-error .icon { color: var(--toast-error-fg); }

/* ---------- Appearance dialog ---------- */
.appearance-section { border: 0; padding: 0; margin: 0 0 var(--space-lg); min-width: 0; }
.appearance-section:last-child { margin-bottom: 0; }
.appearance-section legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--font-size-base); }
.appearance-section .hint { margin: var(--space-xs) 0 0; }
.appearance-modes { display: flex; width: 100%; }
.appearance-modes label { flex: 1; justify-content: center; }
.segmented label.is-disabled { opacity: 0.5; cursor: not-allowed; }
.segmented label.is-disabled input { cursor: not-allowed; }

.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-md); }
.design-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-xs);
  border: var(--border-width-lg) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
}
.design-card:hover { border-color: var(--color-border-strong); }
.design-card:active { transform: scale(0.98); }
.design-card:has(.design-radio:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring); }
.design-card:has(.design-radio:focus-visible) { box-shadow: var(--focus-ring); }
.design-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.design-name { display: flex; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-2xs); font-weight: var(--font-weight-semibold); }
.design-check { display: none; color: var(--color-primary); }
.design-card:has(.design-radio:checked) .design-check { display: block; }
.design-desc { padding: 0 var(--space-2xs) var(--space-2xs); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Miniature page rendered with the previewed theme's own tokens. */
.design-preview {
  display: block;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  background-image: var(--color-bg-gradient);
  color: var(--color-text);
  font-family: var(--font-family);
  pointer-events: none;
}
.design-preview-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; background: var(--color-surface); border: var(--border-width-sm) solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.design-preview-title { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: 1.05rem; line-height: 1.15; }
.design-preview-answer { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.4rem; border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--font-size-sm); }
.design-preview-answer.is-correct { border-color: var(--color-success); background: var(--color-success-bg); }
.design-preview-key { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.design-preview-btn { align-self: flex-end; padding: 0.3rem 0.8rem; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-button); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); box-shadow: var(--shadow-button); }

@media (max-width: 640px) {
  .design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .design-preview { padding: var(--space-xs); }
}

/* ---------- Child: profile & level ---------- */
.level-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.25rem 0.75rem 0.25rem 0.3rem; border-radius: var(--radius-pill); background: var(--color-surface-alt); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.level-number { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--color-secondary); color: var(--color-on-secondary); font-weight: 800; }
.level-chip .points { color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
/* The chip must never wrap ("0 / P"); on phones the level name moves off-screen
   (still read by screen readers) and the hero shows it instead. The wordmark
   goes too, as the link's accessible name, so that growing points still fit. */
.level-chip { flex: none; white-space: nowrap; }
@media (max-width: 519px) {
  .level-chip .level-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .app-header .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Smallest phones: the language switcher takes the room of the gaps. */
@media (max-width: 379px) {
  .app-header-inner { gap: var(--space-2xs); padding-inline: var(--space-xs); }
}

.hero { display: flex; gap: var(--space-lg); align-items: center; margin-bottom: var(--space-xl); padding: var(--space-lg); }
.hero-avatar { flex: none; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: var(--color-on-gradient); font-size: 1.9rem; font-weight: 800; text-transform: uppercase; box-shadow: var(--shadow-lift); }
.hero h1 { margin-bottom: var(--space-2xs); overflow-wrap: anywhere; }
.hero .level-line { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: baseline; color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.hero .level-name { color: var(--color-secondary); font-weight: var(--font-weight-bold); }
@media (max-width: 640px) { .hero { flex-direction: column; text-align: center; } .hero .level-line { justify-content: center; } }

.progress { position: relative; height: 0.75rem; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; }
.progress-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary))); transition: width var(--duration-slow) var(--ease); }
.progress-sm { height: 0.4rem; }
.progress-label { display: flex; justify-content: space-between; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-2xs); font-weight: var(--font-weight-medium); }

/* Subject card */
.subject-card {
  --subject-color: var(--color-secondary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 160px;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: var(--border-width-sm) solid var(--color-card-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  text-align: center;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.subject-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--subject-color) 40%, transparent); color: var(--color-text); }
.subject-card:active { transform: translateY(-1px) scale(0.98); }
.subject-icon { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--subject-color) 14%, transparent); color: var(--subject-color); }
.subject-icon .icon { width: 2.25rem; height: 2.25rem; }
.subject-math { --subject-color: var(--subject-math); }
.subject-german { --subject-color: var(--subject-german); }
.subject-science { --subject-color: var(--subject-science); }
.subject-english { --subject-color: var(--subject-english); }
.subject-music { --subject-color: var(--subject-music); }
.subject-art { --subject-color: var(--subject-art); }
.subject-sport { --subject-color: var(--subject-sport); }
.subject-religion { --subject-color: var(--subject-religion); }
.subject-book { --subject-color: var(--subject-book); }
.subject-geography { --subject-color: var(--subject-geography); }
.subject-history { --subject-color: var(--subject-history); }
.subject-biology { --subject-color: var(--subject-biology); }
.subject-physics { --subject-color: var(--subject-physics); }
.subject-computer { --subject-color: var(--subject-computer); }
.subject-language { --subject-color: var(--subject-language); }

/* Quiz tile */
.quiz-tile { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-surface); border: var(--border-width-sm) solid var(--color-card-border); box-shadow: var(--shadow-card); color: var(--color-text); text-decoration: none; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.quiz-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: var(--color-text); }
.quiz-tile:active { transform: scale(0.98); }
.quiz-tile h3 { margin: 0; overflow-wrap: anywhere; }
.quiz-tile p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.quiz-tile .tile-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.status-pill { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 700; }
.status-new { background: var(--color-info-bg); color: var(--color-info); }
.status-in_progress { background: var(--color-warning-bg); color: var(--color-warning); }
.status-completed { background: var(--color-completed-bg); color: var(--color-completed); }
.status-mastered { background: var(--color-success-bg); color: var(--color-success); }

.back-link { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-text-muted); text-decoration: none; font-weight: var(--font-weight-medium); margin-bottom: var(--space-md); min-height: var(--control-height); }
.back-link:hover { color: var(--color-text); }

/* ---------- Quiz playing ---------- */
.quiz-progress { display: flex; align-items: center; gap: var(--space-md); }
.quiz-progress .progress { flex: 1; }
.quiz-counter { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quiz-points { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: var(--font-weight-bold); color: var(--color-warning); font-variant-numeric: tabular-nums; }
.quiz-points.bump { animation: bump var(--duration-slow) var(--ease-bounce); }

.question-card { padding: var(--space-xl); }
.question-kicker { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-xs); }
.question-text { font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); line-height: 1.45; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width: 768px) { .question-text { font-size: 1.5rem; } }
.question-image { margin-top: var(--space-md); max-height: 18rem; width: auto; border-radius: var(--radius-md); border: var(--border-width-sm) solid var(--color-divider); }

.answer-area { padding: var(--space-lg); }
.answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
@media (max-width: 520px) { .answer-grid { grid-template-columns: 1fr; } }
.answer-btn {
  position: relative;
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: 4rem;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-lg) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 var(--answer-depth) 0 var(--color-border);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
  overflow-wrap: anywhere;
}
.answer-btn:hover:not(:disabled) { border-color: var(--color-secondary); background: var(--color-secondary-soft); box-shadow: 0 var(--answer-depth) 0 var(--color-secondary); }
.answer-btn:active:not(:disabled) { transform: translateY(var(--answer-depth)); box-shadow: 0 0 0 var(--color-secondary); }
.answer-btn:focus-visible { box-shadow: 0 var(--answer-depth) 0 var(--color-secondary), var(--focus-ring); }
.answer-btn:disabled { cursor: default; }
.answer-key { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 800; transition: inherit; }
.answer-btn img { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius-sm); }
.answer-btn[aria-pressed="true"] { border-color: var(--color-secondary); background: var(--color-secondary-soft); box-shadow: 0 var(--answer-depth) 0 var(--color-secondary); }
.answer-btn[aria-pressed="true"] .answer-key { background: var(--color-secondary); color: var(--color-on-secondary); }
.answer-btn.is-correct { border-color: var(--color-success); background: var(--color-success-bg); box-shadow: 0 var(--answer-depth) 0 var(--color-success); animation: pulse-green var(--duration-slow) var(--ease); }
.answer-btn.is-correct .answer-key { background: var(--color-success); color: var(--color-surface); }
.answer-btn.is-wrong { border-color: var(--color-error); background: var(--color-error-bg); box-shadow: 0 var(--answer-depth) 0 var(--color-error); animation: shake var(--duration-slow) var(--ease); }
.answer-btn.is-wrong .answer-key { background: var(--color-error); color: var(--color-surface); }
.answer-btn.is-dimmed { opacity: 0.55; }

.freetext-answer .input { font-size: var(--font-size-lg); min-height: 3.75rem; border-width: var(--border-width-lg); border-radius: var(--radius-lg); }
.freetext-answer .input.is-correct { border-color: var(--color-success); background: var(--color-success-bg); }
.freetext-answer .input.is-wrong { border-color: var(--color-error); background: var(--color-error-bg); animation: shake var(--duration-slow) var(--ease); }

/* Drag & drop: ordering */
.order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.order-item {
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: 3.5rem;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm);
  border: var(--border-width-lg) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  touch-action: none;
  user-select: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.order-item:focus-visible { border-color: var(--color-secondary); box-shadow: var(--focus-ring); }
.order-item .grip { cursor: grab; color: var(--color-text-faint); display: grid; place-items: center; width: 2rem; height: 2.5rem; }
.order-item .order-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.order-item img { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--radius-sm); }
.order-item .order-pos { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-surface-alt); font-size: var(--font-size-sm); font-weight: 800; color: var(--color-text-muted); }
.order-item .order-moves { display: flex; gap: 2px; }
.order-item.is-dragging { border-color: var(--color-secondary); background: var(--color-secondary-soft); box-shadow: var(--shadow-lift); z-index: 2; position: relative; transition: none; }
.order-item.is-dragging .grip { cursor: grabbing; }
.order-item.is-grabbed { border-color: var(--color-secondary); border-style: dashed; background: var(--color-secondary-soft); }
.order-item.is-correct { border-color: var(--color-success); background: var(--color-success-bg); }
.order-item.is-wrong { border-color: var(--color-error); background: var(--color-error-bg); }

/* Drag & drop: matching */
.match-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md) var(--space-lg); align-items: start; }
.match-col { display: flex; flex-direction: column; gap: var(--space-xs); }
.match-col h4 { margin: 0 0 var(--space-2xs); font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.match-left, .match-right {
  display: flex; align-items: center; gap: var(--space-xs);
  min-height: 3.5rem;
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width-lg) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-weight: var(--font-weight-medium);
  text-align: left;
  overflow-wrap: anywhere;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration) var(--ease);
}
.match-left { cursor: pointer; }
/* Image and text of an element; images keep their proportions. */
.match-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); min-width: 0; }
.match-content .item-image { display: block; max-width: 100%; max-height: 6rem; object-fit: contain; border-radius: var(--radius-sm); }
.match-left .match-slot { margin-left: auto; flex: none; display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 0.4rem; border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-text-faint); font-size: var(--font-size-sm); font-weight: 800; }
.match-left.has-match .match-slot { background: var(--color-secondary); color: var(--color-on-secondary); }
.match-left[aria-pressed="true"] { border-color: var(--color-secondary); box-shadow: var(--focus-ring); }
.match-right { cursor: pointer; }
.match-right .match-letter { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--color-surface-alt); font-weight: 800; color: var(--color-text-muted); }
.match-right.is-used .match-letter { background: var(--color-secondary); color: var(--color-on-secondary); }
.match-right:hover:not(:disabled), .match-left:hover:not(:disabled) { border-color: var(--color-secondary); }
.match-right:active:not(:disabled), .match-left:active:not(:disabled) { transform: scale(0.98); }
.match-left.is-correct { border-color: var(--color-success); background: var(--color-success-bg); }
.match-left.is-wrong { border-color: var(--color-error); background: var(--color-error-bg); }
.match-left:disabled, .match-right:disabled { cursor: default; }
@media (max-width: 520px) { .match-board { grid-template-columns: 1fr; } }

/* Feedback */
/* The action row itself becomes the result panel, so the button stays where it was (decision 155). */
.quiz-actions.feedback { background: linear-gradient(var(--feedback-tint), var(--feedback-tint)) var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.feedback-head { grid-area: lead; display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.feedback-body { grid-area: text; padding-left: calc(2.75rem + var(--space-sm)); }
.feedback-head, .feedback-body { animation: slide-up var(--duration-slow) var(--ease-bounce); }
.feedback-body.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent);
}
.feedback .feedback-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.feedback h3 { margin: 0; }
.feedback p { margin: 0; }
.feedback-correct { --feedback-tint: var(--color-success-bg); border-color: var(--color-success-border); }
.feedback-correct .feedback-icon { background: var(--color-success); color: var(--color-surface); }
.feedback-correct h3 { color: var(--color-success); }
.feedback-wrong { --feedback-tint: var(--color-error-bg); border-color: var(--color-error-border); }
.feedback-wrong .feedback-icon { background: var(--color-error); color: var(--color-surface); }
.feedback-wrong h3 { color: var(--color-error); }
.feedback-reveal { --feedback-tint: var(--color-warning-bg); border-color: var(--color-warning-border); }
.feedback-reveal .feedback-icon { background: var(--color-warning); color: var(--color-surface); }
.feedback-reveal h3 { color: var(--color-warning); }

/* Shows that more lies below and scrolls there (decision 155). */
.more-cue {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  font-size: 1.5rem;
  animation: cue-bounce 1.8s var(--ease) infinite;
}
.more-cue:hover { background: var(--color-secondary-hover); }
.more-cue-text { width: 2.75rem; height: 2.75rem; font-size: 1.3rem; margin-right: auto; }
.more-cue-page { position: absolute; left: 50%; margin-left: -1.625rem; bottom: calc(100% + var(--space-xs)); z-index: 6; }
.more-fade { position: absolute; left: 0; right: 0; bottom: 100%; height: 3.5rem; z-index: 5; pointer-events: none; background: linear-gradient(to top, var(--color-surface), transparent); }
@media (min-width: 641px) {
  .more-cue-page { position: fixed; bottom: calc(var(--space-sm) + env(safe-area-inset-bottom)); }
  .more-fade { position: fixed; bottom: 0; height: 2.5rem; background: linear-gradient(to top, var(--color-bg), transparent); }
}
.solution-text { font-weight: var(--font-weight-bold); }

/* Level up */
.level-up-banner { position: fixed; top: var(--space-md); left: 50%; transform: translateX(-50%); z-index: 250; display: flex; gap: var(--space-md); align-items: center; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); color: var(--color-on-gradient); box-shadow: var(--shadow-modal); animation: slide-down 500ms var(--ease-bounce); width: max-content; max-width: calc(100% - 2rem); }
.level-up-banner strong { display: block; font-size: var(--font-size-lg); }
.level-up-banner .icon { width: 2.5rem; height: 2.5rem; }

/* Results */
.result-card { text-align: center; padding: var(--space-2xl) var(--space-lg); }
.result-stars { display: flex; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.result-stars .icon { width: 3.25rem; height: 3.25rem; color: var(--color-neutral-400); fill: currentColor; stroke-width: 1; }
.result-stars .is-earned { color: var(--color-star); animation: pop 500ms var(--ease-bounce) both; }
.result-stars .is-earned:nth-child(2) { animation-delay: 150ms; }
.result-stars .is-earned:nth-child(3) { animation-delay: 300ms; }
.result-score { font-size: var(--font-size-3xl); font-weight: 800; line-height: 1; margin: var(--space-sm) 0; font-variant-numeric: tabular-nums; }
.result-stats { display: flex; justify-content: center; gap: var(--space-xl); flex-wrap: wrap; margin: var(--space-lg) 0; }
.result-stat strong { display: block; font-size: var(--font-size-xl); }
.result-stat span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.result-actions { display: flex; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; }
.result-list { list-style: none; padding: 0; margin: var(--space-lg) 0 0; text-align: left; }
.result-list li { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) 0; border-bottom: var(--border-width-sm) solid var(--color-divider); }
.result-list li:last-child { border-bottom: 0; }
.result-list .icon { margin-top: 0.15rem; }
.result-list .ok { color: var(--color-success); }
.result-list .bad { color: var(--color-error); }
.result-list .meh { color: var(--color-warning); }

/* ---------- Statistics ---------- */
.stat-tile { padding: var(--space-lg); }
.stat-tile .stat-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.stat-tile .stat-value { font-size: var(--font-size-2xl); font-weight: 800; line-height: 1.1; margin-top: var(--space-2xs); font-variant-numeric: tabular-nums; }
.stat-tile .stat-sub { font-size: var(--font-size-sm); color: var(--color-text-faint); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.table th, .table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: var(--border-width-sm) solid var(--color-divider); vertical-align: middle; }
.table th { font-weight: var(--font-weight-semibold); color: var(--color-text-muted); background: var(--color-surface-alt); white-space: nowrap; }
.table tbody tr { transition: background-color var(--duration) var(--ease); }
.table tbody tr:hover { background: var(--color-surface-alt); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter { display: flex; align-items: center; gap: var(--space-xs); min-width: 9rem; }
.meter .progress { flex: 1; height: 0.5rem; }
.meter .progress-bar { background: var(--meter-color, var(--color-primary)); }
.meter-low { --meter-color: var(--color-error); }
.meter-mid { --meter-color: var(--color-warning); }
.meter-high { --meter-color: var(--color-success); }

/* Invite */
.invite-link { font-family: var(--font-mono); font-size: var(--font-size-sm); }

/* Preview */
.preview-list { list-style: none; padding: 0; margin: 0; counter-reset: q; }
.preview-list > li { counter-increment: q; padding: var(--space-md) 0; border-bottom: var(--border-width-sm) solid var(--color-divider); }
.preview-list > li:last-child { border-bottom: 0; }
.preview-list h4 { margin: 0 0 var(--space-xs); display: flex; gap: var(--space-xs); align-items: baseline; }
.preview-list h4::before { content: counter(q) "."; color: var(--color-text-faint); }
.preview-answers { margin: 0; padding-left: var(--space-lg); color: var(--color-text-muted); }
.preview-answers .is-correct { color: var(--color-success); font-weight: var(--font-weight-semibold); }

.kbd-hint { font-size: var(--font-size-xs); color: var(--color-text-faint); }
@media (hover: none) { .kbd-hint { display: none; } }
fieldset > .row { margin-top: var(--space-sm); }
fieldset > .field-error { margin-top: var(--space-xs); }

/* Extended question types: badges */
.badge-number, .badge-number_line, .badge-coordinates, .badge-dial { background: var(--badge-ft-bg); color: var(--badge-ft-fg); }
.badge-multiple_select, .badge-hotspot, .badge-image_label { background: var(--badge-mc-bg); color: var(--badge-mc-fg); }
.badge-categorize, .badge-cloze, .badge-text_annotation { background: var(--badge-dnd-bg); color: var(--badge-dnd-fg); }

/* Number input */
.number-answer .input-group { align-items: center; }
.number-answer .input-group .btn-icon { min-height: 3.75rem; width: 3.25rem; font-size: var(--font-size-lg); font-weight: 800; border-radius: var(--radius-lg); }
.unit-suffix { flex: none; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); padding: 0 var(--space-xs); }

/* Multiple select */
.multi-hint { margin: 0 0 var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.answer-multi .answer-check { margin-left: auto; flex: none; width: 1.5rem; height: 1.5rem; border: var(--border-width-lg) solid var(--color-border-strong); border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 800; line-height: 1; color: var(--color-on-secondary); }
.answer-multi[aria-pressed="true"] .answer-check { background: var(--color-secondary); border-color: var(--color-secondary); }
.answer-multi[aria-pressed="true"] .answer-check::after { content: "✓"; }
.answer-btn.is-missed { border-style: dashed; border-color: var(--color-success); box-shadow: 0 var(--answer-depth) 0 var(--color-success); }

/* Categorize */
/* The chosen category wraps between words instead of being cut off. */
.categorize-board .match-left .match-slot { flex: 0 1 auto; max-width: 60%; height: auto; min-height: 2rem; padding: 0.25rem 0.6rem; line-height: 1.2; text-align: center; overflow-wrap: break-word; }

/* Cloze */
.cloze-text { margin: 0; font-size: var(--font-size-lg); line-height: 2.4; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Typed gaps share one width (--gap-chars, set from the presentation) so the text never moves while typing.
   Own line-height (form controls inherit the text's via font: inherit): 40px gap + 2 × 4px margin = 48px line. */
.cloze-gap { display: inline-block; width: calc(var(--gap-chars, 8) * 1ch + 1rem + 2 * var(--border-width-lg)); min-width: 4rem; max-width: 100%; min-height: 2.5rem; padding: 0.2rem 0.5rem; margin: 0.25rem 0.2rem; text-align: center; font-size: inherit; line-height: 1.4; border-width: var(--border-width-lg); vertical-align: baseline; }
.cloze-gap.is-correct { border-color: var(--color-success); background: var(--color-success-bg); }
.cloze-gap.is-wrong { border-color: var(--color-error); background: var(--color-error-bg); }
/* A selection gap is as wide as its longest option; the unit stays next to a number gap. */
.cloze-choice { width: auto; min-width: 4.5rem; padding-right: 2rem; text-align: left; }
.cloze-choice:disabled { opacity: 1; color: var(--color-text); border-style: solid; cursor: default; }
/* Dial: a ring with ticks and labels, optionally on top of the question image. */
.dial-answer { display: grid; justify-items: center; gap: var(--space-sm); }
.dial-stage { position: relative; width: min(100%, 22rem); margin-inline: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; border-radius: var(--radius-md); }
.dial-stage.has-image { width: fit-content; max-width: 100%; }
.dial-stage:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dial-stage[aria-disabled="true"] { cursor: default; }
.dial-stage.is-placing { cursor: crosshair; }
.dial-image { display: block; max-width: 100%; max-height: 28rem; width: auto; height: auto; border-radius: var(--radius-md); border: var(--border-width-sm) solid var(--color-divider); pointer-events: none; }
.dial-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dial-stage.has-image .dial-svg { position: absolute; inset: 0; height: 100%; }
.dial-ring { fill: color-mix(in srgb, var(--color-surface) 55%, transparent); stroke: var(--color-text-muted); stroke-width: 2px; }
.dial-tick { stroke: var(--color-text-muted); stroke-width: 1px; }
.dial-tick.is-major { stroke: var(--color-text); stroke-width: 2px; }
.dial-label { fill: var(--color-text); font-weight: 700; paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; stroke-linejoin: round; }
.dial-hub { fill: var(--color-text); }
.dial-pointer line { stroke: var(--color-primary); stroke-width: 4px; stroke-linecap: round; }
.dial-pointer polygon { fill: var(--color-primary); }
.dial-pointer.is-solution line { stroke: var(--color-success); stroke-dasharray: 6 4; }
.dial-pointer.is-solution polygon { fill: var(--color-success); }
.dial-stage.is-correct .dial-pointer:not(.is-solution) line { stroke: var(--color-success); }
.dial-stage.is-correct .dial-pointer:not(.is-solution) polygon { fill: var(--color-success); }
.dial-stage.is-wrong .dial-pointer:not(.is-solution) line { stroke: var(--color-error); }
.dial-stage.is-wrong .dial-pointer:not(.is-solution) polygon { fill: var(--color-error); }
.dial-readout { margin: 0; text-align: center; color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.dial-center { align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.dial-center-field { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); }
.dial-center-field .input { font-size: var(--font-size-base); }

/* Image label: numbered pins on the question image, a list of slots or inputs below and a term bank. */
.label-answer { display: grid; gap: var(--space-md); }
.label-stage { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; user-select: none; -webkit-user-select: none; }
.label-stage.is-editing { cursor: crosshair; touch-action: none; }
.label-image { display: block; max-width: 100%; max-height: 28rem; border-radius: var(--radius-md); border: var(--border-width-sm) solid var(--color-divider); pointer-events: none; }
.label-pin {
  position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center;
  min-width: 1.75rem; height: 1.75rem; padding: 0 0.3rem; border-radius: var(--radius-pill);
  background: var(--color-secondary); color: var(--color-on-secondary); border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm, 0 1px 3px rgb(0 0 0 / 0.3)); font-size: var(--font-size-sm); font-weight: 800; line-height: 1; cursor: pointer;
}
.label-stage.is-editing .label-pin { cursor: grab; touch-action: none; }
.label-pin.is-active { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-secondary); }
.label-pin.is-correct { background: var(--color-success); }
.label-pin.is-wrong { background: var(--color-error); }
.label-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-xs) var(--space-md); }
.label-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); min-width: 0; }
.label-num { flex: none; display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); background: var(--color-secondary); color: var(--color-on-secondary); font-size: var(--font-size-sm); font-weight: 800; }
.label-input { flex: 1; min-width: 0; }
.label-input.is-correct, .label-slot.is-correct { border-color: var(--color-success); background: var(--color-success-bg); }
.label-input.is-wrong, .label-slot.is-wrong { border-color: var(--color-error); background: var(--color-error-bg); }
.label-slot {
  flex: 1; min-width: 0; min-height: 2.75rem; padding: 0.3rem 0.75rem; border: var(--border-width-lg) dashed var(--color-border, var(--color-divider));
  border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-faint); font: inherit; font-weight: var(--font-weight-semibold); text-align: left; cursor: pointer; touch-action: none;
}
.label-slot.has-card { border-style: solid; color: var(--color-text); }
.label-slot[aria-pressed="true"] { border-color: var(--color-secondary); box-shadow: var(--focus-ring); }
.label-slot:disabled { cursor: default; }
.label-fix { flex-basis: 100%; padding-left: calc(1.75rem + var(--space-xs)); color: var(--color-success); font-weight: 700; }
.label-bank { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-surface-alt); }
.label-card {
  min-height: 2.75rem; padding: 0.3rem 0.9rem; border: var(--border-width-lg) solid var(--color-secondary); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: var(--font-weight-semibold); cursor: grab; touch-action: none;
}
.label-card:hover:not(:disabled) { background: var(--color-secondary-soft); }
.label-card.is-used { opacity: 0.4; border-style: dashed; }
.label-card:disabled { cursor: default; }
.label-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -120%); box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); }
.label-edit-row .label-answers { flex: 1 1 12rem; min-width: 0; }
@media (max-width: 520px) { .label-list { grid-template-columns: 1fr; } }

/* Chart: columns and bars (HTML) and a pie (SVG). */
.chart-answer { display: grid; gap: var(--space-sm); }
.chart {
  /* No green or red: those mark right and wrong. */
  --chart-0: #1971c2; --chart-1: #d9480f; --chart-2: #6741d9; --chart-3: #0c8599;
  --chart-4: #8a5a00; --chart-5: #9c36b5; --chart-6: #364fc7; --chart-7: #495057;
  width: 100%; user-select: none; -webkit-user-select: none;
}
.chart-c0 { --c: var(--chart-0); } .chart-c1 { --c: var(--chart-1); } .chart-c2 { --c: var(--chart-2); } .chart-c3 { --c: var(--chart-3); }
.chart-c4 { --c: var(--chart-4); } .chart-c5 { --c: var(--chart-5); } .chart-c6 { --c: var(--chart-6); } .chart-c7 { --c: var(--chart-7); }
.chart-axis-title { margin: 0 0 var(--space-xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.chart-frame { display: grid; grid-template-columns: var(--chart-scale-w, 2.5em) minmax(0, 1fr); column-gap: var(--space-xs); padding-top: 1.5em; }
.chart-plot { position: relative; border-left: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); }
.chart-gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--color-divider); pointer-events: none; }
.chart-gridline.is-labeled { border-top-color: var(--color-border-strong); }
.chart-tracks { position: relative; display: flex; height: 100%; }
.chart-track { position: relative; flex: 1 1 0; min-width: 0; touch-action: none; border-radius: var(--radius-sm); }
.chart-track[role="slider"] { cursor: pointer; }
.chart-track[role="slider"]:hover:not([aria-disabled="true"]) { background: color-mix(in srgb, var(--color-secondary) 7%, transparent); }
.chart-track:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chart-track[aria-disabled="true"] { cursor: default; }
.chart-fill { position: absolute; background: var(--c); }
.chart-fill.is-given { background: repeating-linear-gradient(45deg, var(--c) 0 6px, color-mix(in srgb, var(--c) 45%, var(--color-surface)) 6px 12px); }
.chart-track.is-correct .chart-fill { background: var(--color-success); }
.chart-track.is-wrong .chart-fill { background: var(--color-error); }
.chart-value { position: absolute; font-size: var(--font-size-sm); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.chart-target { position: absolute; pointer-events: none; }
.chart-scale { position: relative; font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.chart-scale-label { position: absolute; white-space: nowrap; }
.chart-cats { display: flex; }
.chart-cat { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; hyphens: auto; }
.chart-cat.is-given { color: var(--color-text-muted); font-style: italic; }
.chart-cat.is-correct { color: var(--color-success); }
.chart-cat.is-wrong { color: var(--color-error); }
.chart-verdict { color: var(--color-success); font-weight: 800; font-style: normal; }
/* Columns */
.chart-column .chart-plot { height: clamp(11rem, 40vh, 17rem); }
.chart-column .chart-tracks, .chart-column .chart-cats { gap: clamp(2px, 1.5%, 0.75rem); padding-inline: clamp(2px, 1.5%, 0.75rem); }
.chart-column .chart-fill { left: 14%; right: 14%; bottom: 0; border-radius: 4px 4px 0 0; }
.chart-column .chart-value { left: 0; right: 0; text-align: center; margin-bottom: 2px; }
.chart-column .chart-target { left: 4%; right: 4%; height: 0; border-top: 3px dashed var(--color-success); }
.chart-column .chart-scale-label { right: 0; transform: translateY(50%); }
.chart-column .chart-cats { padding-top: var(--space-2xs); text-align: center; }
.chart-column .chart-cat { align-items: center; }
/* Bars */
.chart-bar .chart-frame { grid-template-columns: fit-content(40%) minmax(0, 1fr); padding: 0 2.75em 0 0; }
.chart-bar .chart-plot { height: calc(var(--chart-n, 3) * 2.75rem); }
.chart-bar .chart-tracks, .chart-bar .chart-cats { flex-direction: column; gap: 0.35rem; padding-block: 0.35rem; }
.chart-bar .chart-gridline { top: 0; bottom: 0; right: auto; height: auto; width: 0; border-top: 0; border-left: 1px solid var(--color-divider); }
.chart-bar .chart-gridline.is-labeled { border-left-color: var(--color-border-strong); }
.chart-bar .chart-fill { top: 14%; bottom: 14%; left: 0; border-radius: 0 4px 4px 0; }
.chart-bar .chart-value { top: 50%; transform: translateY(-50%); margin-left: 0.3em; }
.chart-bar .chart-target { top: 4%; bottom: 4%; width: 0; border-left: 3px dashed var(--color-success); }
.chart-bar .chart-scale { height: 1.5em; }
.chart-bar .chart-scale-label { top: 2px; transform: translateX(-50%); }
.chart-bar .chart-cat { justify-content: center; align-items: flex-end; text-align: right; }
.chart-bar .chart-axis-title { margin: var(--space-2xs) 0 0; text-align: center; }
/* Pie */
.chart-pie { display: grid; gap: var(--space-md); justify-items: center; align-items: center; }
@media (min-width: 640px) { .chart-pie { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.pie-stage { position: relative; width: min(100%, 20rem); aspect-ratio: 1; touch-action: none; }
.chart.is-input:not(.is-disabled) .pie-stage { cursor: pointer; }
.pie-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pie-ring { fill: var(--color-surface-alt); stroke: var(--color-text-muted); stroke-width: 1.5px; }
.pie-tick { stroke: var(--color-text-muted); stroke-width: 1px; }
.pie-tick.is-major { stroke: var(--color-text); stroke-width: 2px; }
.pie-sector { fill: var(--c); stroke: var(--color-surface); stroke-width: 1.5px; }
.pie-sector.is-given { fill-opacity: 0.55; }
.pie-sector.is-wrong { stroke: var(--color-error); stroke-width: 3px; }
.pie-boundary { stroke: var(--color-surface); stroke-width: 2.5px; }
.pie-number { fill: #fff; font-size: 15px; font-weight: 800; paint-order: stroke; stroke: rgb(0 0 0 / 0.35); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.pie-solution { fill: var(--c); stroke: var(--color-surface); stroke-width: 1px; }
.pie-handle { position: absolute; width: 1.75rem; height: 1.75rem; margin: -0.875rem 0 0 -0.875rem; border-radius: 50%; background: var(--color-surface); border: 3px solid var(--color-secondary); box-shadow: var(--shadow-sm); cursor: grab; touch-action: none; }
.pie-handle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pie-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); width: 100%; max-width: 24rem; }
.pie-legend-item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); }
.pie-swatch { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--c); color: #fff; font-size: var(--font-size-sm); font-weight: 800; }
.pie-legend-item.is-given .pie-swatch { opacity: 0.6; }
.pie-legend-item.is-given .pie-legend-label { font-style: italic; color: var(--color-text-muted); }
.pie-legend-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pie-legend-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.pie-legend-item.is-correct .pie-legend-value { color: var(--color-success); }
.pie-legend-item.is-wrong .pie-legend-value { color: var(--color-error); text-decoration: line-through; }
.pie-legend-item .chart-verdict { flex-basis: 100%; padding-left: calc(1.75rem + var(--space-xs)); }
/* Chart editor */
.chart-edit-row .input:not(.input-narrow) { flex: 1 1 8rem; min-width: 0; }
.chart-edit-value { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.chart-edit-value .input { flex: none; width: 6rem; }
.chart-edit-given { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); white-space: nowrap; }
.chart-preview { padding: var(--space-sm); border: var(--border-width-sm) solid var(--color-divider); border-radius: var(--radius-md); }
@media (max-width: 520px) { .chart-edit-row { flex-wrap: wrap; padding-bottom: var(--space-xs); border-bottom: var(--border-width-sm) solid var(--color-divider); } }
.cloze-unit { display: inline-flex; align-items: baseline; white-space: nowrap; }
.cloze-unit .unit-suffix { padding: 0 var(--space-2xs) 0 0; }

/* Number line */
.numline { padding: 2rem 1.5rem 2.75rem; border-radius: var(--radius-lg); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.numline:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.numline[aria-disabled="true"] { cursor: default; }
.numline-track { position: relative; height: 2rem; }
.numline-axis { position: absolute; left: -0.75rem; right: -0.75rem; top: 50%; height: 3px; margin-top: -1.5px; background: var(--color-text); border-radius: 2px; }
.numline-tick { position: absolute; top: 50%; width: 2px; height: 0.7rem; transform: translate(-50%, -50%); background: var(--color-text-muted); }
.numline-tick.is-labeled { height: 1.3rem; background: var(--color-text); }
.numline-label { position: absolute; top: 1.6rem; left: 50%; transform: translateX(-50%); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; color: var(--color-text); font-variant-numeric: tabular-nums; }
.numline-marker { position: absolute; top: 50%; width: 1.5rem; height: 1.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-secondary); border: 3px solid var(--color-surface); box-shadow: 0 0 0 2px var(--color-secondary), var(--shadow-sm); transition: left var(--duration-fast) var(--ease); }
.numline-marker.is-correct { background: var(--color-success); box-shadow: 0 0 0 2px var(--color-success); }
.numline-marker.is-wrong { background: var(--color-error); box-shadow: 0 0 0 2px var(--color-error); }
.numline-marker.is-solution { background: transparent; border: 3px dashed var(--color-success); box-shadow: none; width: 2rem; height: 2rem; }
.numline-readout, .coord-readout { text-align: center; font-variant-numeric: tabular-nums; }

/* Coordinates */
.coord-svg { display: block; width: 100%; max-width: 30rem; margin: 0 auto; touch-action: none; cursor: crosshair; border-radius: var(--radius-md); }
.coord-svg:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.coord-svg[aria-disabled="true"] { cursor: default; }
.coord-grid { stroke: var(--color-border); stroke-width: 0.03; }
.coord-axis { stroke: var(--color-text); stroke-width: 0.06; }
.coord-arrow { fill: var(--color-text); }
.coord-label { font-size: 0.42px; fill: var(--color-text-muted); font-family: var(--font-family); }
.coord-axis-name { font-size: 0.5px; font-style: italic; font-weight: 700; fill: var(--color-text); }
.coord-point { fill: var(--color-secondary); stroke: var(--color-surface); stroke-width: 0.06; }
.coord-point.is-correct { fill: var(--color-success); }
.coord-point.is-wrong { fill: var(--color-error); }
.coord-point.is-solution { fill: none; stroke: var(--color-success); stroke-width: 0.09; stroke-dasharray: 0.15 0.1; }
.coord-point.is-shown { fill: var(--color-text); }
.coord-point-label { font-size: 0.5px; font-weight: 700; fill: var(--color-secondary); font-family: var(--font-family); paint-order: stroke; stroke: var(--color-surface); stroke-width: 0.12; }
.coord-point-label.is-shown { fill: var(--color-text); }
.coord-point-label.is-solution { fill: var(--color-success); }
.coord-svg.is-static { cursor: default; touch-action: auto; }

/* Points of a number line or coordinate system (decision 151) */
.numline.is-static { cursor: default; touch-action: auto; }
.numline-marker.is-shown { background: var(--color-text); box-shadow: 0 0 0 2px var(--color-text); width: 1rem; height: 1rem; }
.numline-point-label { position: absolute; bottom: calc(100% + 0.35rem); left: 50%; transform: translateX(-50%); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--color-secondary); white-space: nowrap; }
.numline-marker.is-shown .numline-point-label { color: var(--color-text); }
.numline-marker.is-solution .numline-point-label { color: var(--color-success); bottom: calc(100% + 0.6rem); }
.figure-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.figure-chips-label { font-weight: var(--font-weight-semibold); }
.figure-chip { min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.75rem; border: 2px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: var(--font-weight-bold); cursor: pointer; }
.figure-chip.is-placed { border-style: solid; border-color: var(--color-secondary); }
.figure-chip[aria-pressed="true"] { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-surface); }
.figure-chip:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.figure-chip:disabled { cursor: default; opacity: 0.7; }
.figure-reads { margin-top: var(--space-md); }
.figure-read-rows { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm) var(--space-lg); }
.figure-read { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--font-size-lg); font-variant-numeric: tabular-nums; }
.figure-read-label { font-weight: var(--font-weight-bold); }
.figure-input { width: 3.5rem; padding-inline: 0.35rem; text-align: center; }
/* Grows with the typed number where supported, so a one-digit answer gets a small field */
@supports (field-sizing: content) { .figure-input { field-sizing: content; width: auto; min-width: 3rem; max-width: 8rem; } }
.figure-read .input.is-correct { border-color: var(--color-success); background: var(--color-success-bg); }
.figure-read .input.is-wrong { border-color: var(--color-error); background: var(--color-error-bg); }
.point-row .point-label { flex: 0 0 4.5rem; width: 4.5rem; }
.point-row .point-role { flex: 0 0 auto; width: auto; }
.point-pos { display: flex; flex: 1 1 10rem; align-items: center; gap: var(--space-xs); }
.point-pos .input[type="number"] { flex: 1 1 4rem; min-width: 3.5rem; }
.point-axis { font-style: italic; font-weight: var(--font-weight-bold); color: var(--color-text-muted); }
.point-row > .input[type="text"]:not(.point-label) { flex: 1 1 6rem; min-width: 5rem; }
@media (max-width: 520px) {
  .point-row { flex-wrap: wrap; }
  .point-row .point-label { flex-basis: 3.5rem; width: 3.5rem; }
  .point-row .point-role { flex: 1 1 auto; }
}
.figure-preview { margin-top: var(--space-md); }
.figure-preview .numline-answer, .figure-preview .coord-answer { pointer-events: none; }

/* Hotspot */
.hotspot { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; border-radius: var(--radius-md); }
.hotspot:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.hotspot[aria-disabled="true"] { cursor: default; }
.hotspot-image { display: block; max-width: 100%; max-height: 28rem; border-radius: var(--radius-md); border: var(--border-width-sm) solid var(--color-divider); pointer-events: none; }
.hotspot-regions { position: absolute; inset: 0; pointer-events: none; }
.hotspot-region { position: absolute; border: var(--border-width-lg) dashed var(--color-success); background: color-mix(in srgb, var(--color-success) 18%, transparent); border-radius: var(--radius-sm); }
.hotspot-region.is-ellipse { border-radius: 50%; }
/* The number sits outside the circle so it never hides the marked place. */
.hotspot-region.is-ellipse .hotspot-region-label { top: 0; left: 0; transform: translate(-60%, -60%); }
.hotspot-region.is-draft { border-color: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 18%, transparent); pointer-events: none; }
.hotspot-region-label { position: absolute; top: 2px; left: 2px; min-width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-success); color: var(--color-surface); font-size: var(--font-size-xs); font-weight: 800; }
.hotspot-shapes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hotspot-poly { fill: color-mix(in srgb, var(--color-success) 18%, transparent); stroke: var(--color-success); stroke-width: 3px; stroke-dasharray: 7 4; stroke-linejoin: round; }
.hotspot-poly.is-draft { fill: color-mix(in srgb, var(--color-secondary) 12%, transparent); stroke: var(--color-secondary); stroke-dasharray: none; }
.hotspot-poly-label { position: absolute; transform: translate(-50%, -110%); }
.hotspot-poly-label .hotspot-region-label { position: static; }
.hotspot-vertex { position: absolute; width: 0.75rem; height: 0.75rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 0 2px var(--color-surface); }
/* The first corner is larger: clicking it closes the polygon. */
.hotspot-vertex.is-first { width: 1.1rem; height: 1.1rem; background: var(--color-surface); border: 3px solid var(--color-secondary); }
.hotspot-marker { position: absolute; width: 1.75rem; height: 1.75rem; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 35%, transparent); box-shadow: 0 0 0 2px var(--color-surface); pointer-events: none; }
.hotspot-marker.is-correct { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 40%, transparent); }
.hotspot-marker.is-wrong { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 40%, transparent); }
.hotspot-editor { margin-bottom: var(--space-sm); }

/* Editor rows of the extended types */
.category-select { flex: 0 1 12rem; min-width: 7rem; }
.region-row { flex-wrap: wrap; }
.region-tools { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); }
.region-tool { display: flex; align-items: center; gap: var(--space-xs); }
.region-tool[hidden] { display: none; }
.region-tool-label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.region-poly-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-sm); }
.region-poly-bar[hidden] { display: none; }
.region-poly-status { flex: 1 1 100%; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.region-field-wide { flex: 1 1 16rem; min-width: 0; }
.region-points { width: 100%; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-sm); }
.region-field { display: flex; flex-direction: column; gap: 2px; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.input-narrow { width: 5.5rem; }
/* On narrow screens the categories go first so they stay in reach while tapping items. */
@media (max-width: 520px) { .categorize-board .match-col:last-child { order: -1; } }

/* Text annotation: words are buttons with a reserved line for their label */
.anno-text { margin: 0; font-size: var(--font-size-lg); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.anno-word {
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: baseline;
  min-height: 2.75rem; min-width: 1.5rem; padding: 0.1rem 0.2rem; margin: 0.15rem 0;
  border: var(--border-width-md) solid transparent; border-radius: var(--radius-sm);
  background: none; color: inherit; font: inherit; line-height: 1.3; cursor: pointer;
  touch-action: manipulation; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.anno-word:hover:not(:disabled) { background: var(--color-surface-alt); }
.anno-word:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.anno-unit { white-space: nowrap; }
.anno-word.has-mark { background: var(--color-secondary-soft); }
.anno-word.is-active { border-color: var(--color-secondary); }
.anno-word:disabled { cursor: default; }
.anno-tag { min-height: 1em; font-size: var(--font-size-xs); font-weight: 800; line-height: 1; color: var(--color-secondary); white-space: nowrap; }
.anno-status { margin: var(--space-sm) 0 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.anno-labels { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.anno-label { gap: var(--space-xs); }
.anno-label[aria-pressed="true"] { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-on-secondary); }
.anno-label[aria-pressed="true"] .answer-key { background: var(--color-surface); color: var(--color-secondary); }
.anno-label .answer-key { width: 1.6rem; height: 1.6rem; }
@media (max-width: 480px) {
  .anno-labels { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Marked word groups (solution, editor preview) */
.anno-group {
  background: none; color: inherit; padding: 0 0.1rem;
  border-bottom: 3px solid var(--color-secondary); border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.anno-group-tag {
  display: inline-block; margin-left: 0.25rem; padding: 0.1rem 0.4rem; vertical-align: middle;
  border-radius: var(--radius-pill); background: var(--color-secondary); color: var(--color-on-secondary);
  font-size: var(--font-size-xs); font-weight: 800; line-height: 1.2; white-space: nowrap;
}
.anno-group.is-solution { border-bottom-style: dashed; }

/* Solution view: plain text, the label sits above the start of a group */
.anno-text.is-checked { line-height: 2.7; }
.anno-unit.has-label { display: inline-block; position: relative; vertical-align: baseline; padding-top: 1.1em; }
.anno-text.is-checked .anno-unit.has-label { padding-top: 0; line-height: 1.25; }
.anno-above { position: absolute; left: 0; bottom: 100%; font-size: var(--font-size-xs); font-weight: 800; line-height: 1.15; color: var(--color-secondary); white-space: nowrap; pointer-events: none; }
.anno-text:not(.is-checked) .anno-above { bottom: auto; top: 0; }
.anno-above s { color: var(--color-error); text-decoration-thickness: 2px; }
.anno-group.is-correct { border-bottom-color: var(--color-success); background: var(--color-success-bg); }
.anno-group.is-wrong { border-bottom-color: var(--color-error); background: var(--color-error-bg); }
.anno-group.is-missed { border-bottom-style: dashed; border-bottom-color: var(--color-success); }
.anno-group.is-correct .anno-above, .anno-group.is-wrong .anno-above, .anno-group.is-missed .anno-above { color: var(--color-success); }
.anno-plain.is-extra { background: var(--color-error-bg); border-bottom: 3px solid var(--color-error); border-radius: 2px; }
.anno-preview-box { padding: var(--space-sm) var(--space-md); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.anno-preview { margin: 0; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.anno-mark-buttons { flex-wrap: wrap; margin-top: var(--space-xs); }

/* Quiz metadata: the audience section and its lists (decision 108). */
.metadata { margin-block: var(--space-sm); border: var(--border-width-md) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.metadata > summary { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); align-items: baseline; min-height: var(--control-height); padding: var(--space-xs) var(--space-sm); cursor: pointer; }
.metadata > summary .label { margin: 0; }
.metadata-summary { color: var(--color-text-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.metadata-body { padding: 0 var(--space-sm) var(--space-sm); }
.grade-range { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.grade-range .select { flex: 1 1 10rem; min-width: 0; }
.country-list { display: grid; gap: var(--space-xs); margin: 0 0 var(--space-xs); padding: 0; list-style: none; }
.country-row { display: grid; gap: var(--space-2xs); padding: var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.check-details > summary { min-height: 2.75rem; display: flex; flex-wrap: wrap; gap: 0 var(--space-2xs); align-items: center; cursor: pointer; }
.check-list { display: grid; gap: var(--space-2xs); max-height: 16rem; margin: 0; padding: var(--space-2xs) 0; overflow-y: auto; list-style: none; }
.check { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; min-height: 2.75rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; flex: none; }
.replace-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chips { display: contents; }
.topic-suggestions { margin-top: var(--space-2xs); max-height: 16rem; overflow-y: auto; }
.topic-suggestions .picker-item { padding-block: var(--space-3xs, 0.15rem); }
.topic-option { width: 100%; justify-content: flex-start; min-height: 2.75rem; text-align: left; }
.topic-heading { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.topic-notice:not(:empty) { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-top: var(--space-2xs); font-size: var(--font-size-sm); }

/* Admin page: tabs and regional names (decision 107). */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-end: var(--space-md); border-bottom: var(--border-width-md) solid var(--color-border); }
.tab { min-height: 2.75rem; padding: var(--space-xs) var(--space-md); border: 0; border-bottom: 3px solid transparent; margin-bottom: calc(-1 * var(--border-width-md)); background: transparent; color: var(--color-text-muted); font-weight: var(--font-weight-semibold); cursor: pointer; }
.tab[aria-selected="true"] { border-bottom-color: var(--color-secondary); color: var(--color-text); }
.tab:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.toolbar-end { justify-content: flex-end; }
.merged-from { margin-top: var(--space-2xs); }
.regional-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.regional-row .select, .regional-row .input { flex: 1 1 10rem; min-width: 0; }

/* Filter "more by this author" and the button that sets it (decision 32). */
.author-filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.author-filter:empty { display: none; }
.author-filter { margin-block-end: var(--space-sm); }
.link-button { min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--color-primary); font: inherit; text-decoration: underline; cursor: pointer; }

/* Start page of a child, profile and joining (decisions 10, 30, 38, 42). */
.home-section { margin-block-start: var(--space-xl); }
.home-section-head { margin-block-end: var(--space-sm); }
.home-section-head h2 { margin: 0; }
.home-group { margin-block-end: var(--space-lg); }
.home-group-title { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-sm); overflow-wrap: anywhere; }

/* Chips that show quizzes in one state only, coloured like the pills of the tiles (decision 154). */
.state-filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-lg); }
.state-chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: var(--control-height); padding: 0 var(--space-sm);
  border: var(--border-width-md) solid transparent; border-radius: var(--radius-pill);
  font: inherit; font-weight: var(--font-weight-medium); cursor: pointer;
  transition: border-color var(--duration) var(--ease);
}
.state-all { background: var(--color-surface-alt); color: var(--color-text); }
.state-chip[aria-checked="true"] { border-color: currentColor; font-weight: 700; }
.state-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.state-chip[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.state-chip .state-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.filter-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-block-end: var(--space-md); }
.filter-empty .hint { margin: 0; }

.practice-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-block-end: var(--space-md); }
.practice-tools .input { flex: 1 1 16rem; min-width: 0; }
.profile-hint { display: flex; align-items: center; gap: var(--space-sm); margin-block-end: var(--space-md); padding: var(--space-md); color: var(--color-text); text-decoration: none; }
.profile-hint span { flex: 1; }
.grade-question { margin-block-end: var(--space-lg); }
.grade-question h2 { margin: 0 0 var(--space-2xs); }
.grade-question .row { margin-block-start: var(--space-sm); }
.profile-topics { margin-block: var(--space-md); border: 0; padding: 0; }
.profile-topics legend { padding: 0; font-weight: var(--font-weight-semibold); }
.profile-topics .check-list { max-height: 20rem; }
.auth-help { margin-block-start: var(--space-md); font-size: var(--font-size-sm); text-align: center; }
.auth-help summary { min-height: 2.75rem; line-height: 2.75rem; cursor: pointer; color: var(--color-text-muted); }
.link-button { display: inline-flex; align-items: center; min-height: 2.75rem; border: 0; padding: 0; background: transparent; color: var(--color-link, var(--color-primary)); font: inherit; font-weight: var(--font-weight-semibold); text-decoration: underline; cursor: pointer; }
.link-button:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.join-privacy { text-align: center; margin-block-end: var(--space-md); }
.join-code-input { font-family: var(--font-mono, monospace); letter-spacing: 0.2em; text-transform: uppercase; }
.secret-icon { display: block; color: var(--color-primary); }
.secret-words { display: grid; gap: var(--space-xs); margin: 0 0 var(--space-md); padding: 0; list-style: none; counter-reset: secret-word; }
.secret-words li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-alt); font-size: var(--font-size-lg); font-weight: 700; overflow-wrap: anywhere; counter-increment: secret-word; }
.secret-words li::before { content: counter(secret-word); flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-primary); color: var(--color-on-gradient); font-size: var(--font-size-sm); }
.secret-note { margin-block-end: var(--space-md); text-align: center; }
.secret-back { margin-block-start: var(--space-xs); }

/* Groups of a teacher (decisions 22, 30, 117). */
.groups-archived { margin-block-start: var(--space-xl); }
.group-code-chip { font-family: var(--font-mono, monospace); font-weight: 700; letter-spacing: 0.08em; }
.join-card { display: grid; gap: var(--space-sm); justify-items: start; margin-block-end: var(--space-lg); }
.join-card h2 { margin: 0; }
.join-card-body { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: flex-end; width: 100%; }
.join-card-body .form-group { flex: 1 1 18rem; min-width: 0; margin: 0; }
.join-code { font-family: var(--font-mono, monospace); font-size: 2rem; font-weight: 800; letter-spacing: 0.15em; line-height: 1.2; }
.group-suggestions { margin-block-start: var(--space-xl); }
.group-suggestions > .hint { margin-block-end: var(--space-sm); }
.group-stats-hint { margin-block-end: var(--space-sm); }
.quiz-picker { max-height: 50vh; overflow-y: auto; }
.quiz-picker-row { align-items: flex-start; width: 100%; min-height: 0; }
.quiz-picker-row .list-item-title, .quiz-picker-row .list-item-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
.list-item-actions .btn-sm { white-space: nowrap; }
.group-tools { display: flex; justify-content: flex-end; margin-block-end: var(--space-md); }
.audience-form { margin-block-end: var(--space-md); }
.label-optional { margin-inline-start: 0.35em; }
.home-group-title .subject-icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); }
.home-group-title .subject-icon .icon { width: 1.5rem; height: 1.5rem; }
.join-card .input { flex: 1 1 14rem; min-width: 0; }
.join-card .input-group { flex-wrap: wrap; }
@media (max-width: 640px) {
  /* Actions stay next to short rows and move below when they do not fit. */
  #group-quizzes .list-item, #suggestion-list .list-item, #member-list .list-item, #my-groups .list-item { flex-wrap: wrap; }
  #group-quizzes .list-item-main, #suggestion-list .list-item-main, #member-list .list-item-main, #my-groups .list-item-main { flex: 1 1 9rem; }
  #group-quizzes .list-item-actions, #suggestion-list .list-item-actions, #member-list .list-item-actions, #my-groups .list-item-actions { width: auto; margin-inline-start: auto; }
  .join-code { font-size: 1.6rem; }
  .auth-layout { padding-block-start: 4rem; }
  .group-tools .btn { width: 100%; }
}
.container-narrow { max-width: 40rem; }
.auth-card .btn-block { white-space: normal; }

/* Comparing versions (decision 48) */
.change-section { margin-top: var(--space-lg); }
.change-section > h2 { margin-bottom: var(--space-sm); }
.change-card + .change-card { margin-top: var(--space-md); }
.change-question { overflow-wrap: anywhere; }
.change-summary { margin: 0; padding-left: 1.2em; }
.change-notes { margin-top: var(--space-sm); }
.change-notes h3 { font-size: var(--font-size-sm); margin: 0; }
.change-notes ul { margin: var(--space-2xs) 0 0; padding-left: 1.2em; overflow-wrap: anywhere; }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-sm) 0; }
.compare-grid h4 { margin: 0 0 var(--space-2xs); }
@media (max-width: 760px) { .compare-grid { grid-template-columns: minmax(0, 1fr); } }
.ws.ws-compare { min-height: 0; padding: var(--space-sm); border: var(--border-width-sm) solid var(--color-divider); border-radius: var(--radius-md); overflow-x: auto; }
.ws.ws-compare .ws-task-head { display: none; }
.notice-row .hint { margin: 0; }