/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

:root {
  --mv-student-font-base: 16px;
  --mv-student-font-scale: 0.8;
  --mv-student-line-height: 1.4;
}

body {
  margin: 0;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  border-color: currentColor;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

[hidden] {
  display: none !important;
}


html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.mobile-nav {
  display: none;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.mobile-nav .btn {
  flex: 1 1 160px;
  text-align: center;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-nav .btn:link,
.mobile-nav .btn:visited {
  color: inherit;
}

.book-view {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 24px;
  background: #eef0f4;
}

.book-view__header {
  border: 1px solid #dbe2f0;
  border-radius: 16px;
  background: #ffffff;
  padding: 20px;
  margin-bottom: 18px;
}

.book-view__title {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: #111827;
}

.book-view__intro {
  margin: 0;
  color: #4b5563;
  line-height: 1.45;
}

.book-view__layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 18px;
}

.book-view__divider {
  display: none;
}

body[data-route-kind="subject"]:not([data-user-mode-locked="true"]) .book-view__layout {
  grid-template-columns: minmax(280px, 420px) 38px minmax(0, 1fr);
  column-gap: 0;
}

body[data-route-kind="subject"]:not([data-user-mode-locked="true"]) .book-view__divider {
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-view__mode-selector {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--profile-surface-background) 84%, transparent);
  border: 1px solid var(--profile-accent-border);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--profile-accent-shadow-soft) 70%, transparent);
}

.book-view__toc,
.book-view__chapter {
  border: 1px solid #d3d9e6;
  border-radius: 14px;
  background: #f4f6fa;
  padding: 18px;
}

.book-view__toc h2,
.book-view__chapter h2 {
  margin: 0 0 14px;
  font-size: 2.05rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: #111827;
}

.book-view__toc-chapter {
  margin-bottom: 18px;
}

.book-view__toc-chapter:last-child {
  margin-bottom: 0;
}

.book-view__toc-chapter-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.book-view__toc-chapter-link {
  display: inline-block;
  color: #4b5563;
  text-decoration: none;
  font-size: clamp(1.15rem, 1.6vw, 1.9rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.book-view__toc-chapter-link:hover,
.book-view__toc-chapter-link:focus-visible {
  color: #1f2937;
  outline: none;
}

.book-view__toc-chapter-link.is-active {
  color: #374151;
}

.book-view__toc-subchapter-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid #9ca3af;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.book-view__toc-subchapter-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.book-view__toc-subchapter-link {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 2px 2px 2px 16px;
  margin: 0;
  color: #4b5563;
  font: inherit;
  font-size: clamp(1.02rem, 1.15vw, 1.32rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-align: left;
  cursor: pointer;
}

.book-view__toc-subchapter-link::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 1px;
  bottom: 1px;
  width: 4px;
  border-radius: 2px;
  background: transparent;
}

.book-view__toc-subchapter-link:hover,
.book-view__toc-subchapter-link:focus-visible {
  color: #374151;
  outline: none;
}

.book-view__toc-subchapter-link.is-active {
  color: #7e22ce;
  font-weight: 700;
}

.book-view__toc-subchapter-link.is-active::before {
  background: #7e22ce;
}

.book-view__toc-chapter-link.is-editable,
.book-view__toc-subchapter-link.is-editable {
  cursor: text;
}

.book-view__toc-chapter-link.is-editing,
.book-view__toc-subchapter-link.is-editing {
  color: #111827;
}

.book-view__toc-inline-input {
  width: min(100%, 360px);
  border: 1px solid #a5b4fc;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: 4px 9px;
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.book-view__toc-add-menu {
  position: relative;
  margin-top: 10px;
  width: fit-content;
}

.book-view__toc-add-trigger {
  appearance: none;
  -webkit-appearance: none;
  list-style: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: linear-gradient(140deg, #ffffff 0%, #eef2ff 100%);
  color: #3730a3;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  margin: 0;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.book-view__toc-add-trigger::-webkit-details-marker {
  display: none;
}

.book-view__toc-add-menu[open] .book-view__toc-add-trigger,
.book-view__toc-add-trigger:hover {
  border-color: #818cf8;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.18);
}

.book-view__toc-add-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 25;
  min-width: 182px;
  border-radius: 12px;
  border: 1px solid #dbe2f0;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(17, 24, 39, 0.16);
  padding: 6px;
  display: grid;
  gap: 4px;
}

.book-view__toc-add-option {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1f2937;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 620;
  text-align: left;
  padding: 7px 10px;
  cursor: pointer;
}

.book-view__toc-add-option:hover {
  background: #eef2ff;
  color: #312e81;
}

.book-view__toc-add-option:disabled {
  color: #9ca3af;
  cursor: not-allowed;
  background: transparent;
}

.book-view__toc-delete-target {
  position: relative;
}

.book-view__toc-delete {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #fda4af;
  background: #fff1f2;
  color: #b91c1c;
  border-radius: 999px;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
}

.book-view__chapter p {
  margin: 0;
  color: #374151;
  line-height: 1.55;
}

.book-view__chapter-meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.book-view__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf2ff;
  color: #1e3a8a;
  border: 1px solid #c7d2fe;
  font-size: 0.82rem;
  font-weight: 600;
}

.book-view__subchapters {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}

.book-view__subchapters h3,
.book-view__editor h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #111827;
}

.book-view__subchapter-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.book-view__subchapter-item {
  color: #1f2937;
}

.book-view__subchapter-item.is-active strong {
  color: #6d28d9;
}

.book-view__subchapter-id {
  color: #6b7280;
  font-size: 0.88rem;
}

.book-view__subchapter-description {
  color: #4b5563;
  margin-top: 2px;
}

.book-view__task-summary {
  margin: 10px 0 0;
  color: #334155;
}

.book-view__editor {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.book-view__editor-status {
  margin: 0 0 12px;
  border-radius: 12px;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #1f2937;
  font-weight: 600;
}

.book-view__editor-status.is-success {
  border-color: #6ee7b7;
  background: #ecfdf3;
  color: #065f46;
}

.book-view__editor-status.is-error {
  border-color: #fca5a5;
  background: #fff1f2;
  color: #991b1b;
}

.book-view__editor-shell {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
}

.book-view__editor-panel {
  border: 1px solid #d6deeb;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.book-view__editor-panel--controls {
  background: linear-gradient(175deg, #ffffff 0%, #f7fbff 100%);
}

.book-view__editor-panel--preview {
  background: linear-gradient(170deg, #ffffff 0%, #f8fafc 100%);
}

.book-view__editor-headline h3 {
  margin: 0;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  color: #111827;
}

.book-view__editor-headline p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.4;
}

.book-view__editor-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.book-view__editor-actions button {
  appearance: none;
  border: 1px solid #c7d2e5;
  border-radius: 11px;
  background: linear-gradient(165deg, #ffffff 0%, #f1f5f9 100%);
  color: #0f172a;
  font: inherit;
  font-size: 0.91rem;
  font-weight: 640;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}

.book-view__editor-actions button:hover,
.book-view__editor-actions button:focus-visible {
  border-color: #93c5fd;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.14);
  outline: none;
}

.book-view__editor-actions button:disabled {
  color: #94a3b8;
  background: #f4f7fb;
  border-color: #e2e8f0;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.book-view__editor-context {
  margin: 12px 0 0;
  border: 1px solid #dbe5f4;
  border-radius: 12px;
  background: #f8fbff;
  padding: 10px 11px;
  display: grid;
  gap: 8px;
}

.book-view__editor-context-row {
  display: grid;
  gap: 2px;
}

.book-view__editor-context dt {
  margin: 0;
  color: #64748b;
  font-size: 0.73rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.book-view__editor-context dd {
  margin: 0;
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.35;
}

.book-view__editor-preview-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding-right: 2px;
}

.book-view__editor-preview-task {
  border: 1px solid #dbe2f0;
  border-radius: 12px;
  background: #fbfdff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.book-view__editor-preview-task.is-active {
  border-color: #93c5fd;
  background: #eff6ff;
}

.book-view__editor-preview-task-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.book-view__editor-preview-task-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  padding: 0;
  margin: 0;
  text-align: left;
  display: grid;
  gap: 1px;
  cursor: pointer;
}

.book-view__editor-preview-task-button strong {
  font-size: 0.98rem;
  line-height: 1.25;
}

.book-view__editor-preview-task-button:hover strong,
.book-view__editor-preview-task-button:focus-visible strong,
.book-view__editor-preview-task-button.is-active strong {
  color: #1d4ed8;
}

.book-view__editor-preview-task-button:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 3px;
  border-radius: 8px;
}

.book-view__editor-preview-task-index {
  color: #64748b;
  font-size: 0.73rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.book-view__editor-preview-task-id {
  font-size: 0.73rem;
  color: #475569;
  background: #edf2f9;
  border: 1px solid #d7e0ee;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.2;
  white-space: nowrap;
}

.book-view__editor-preview-task-description {
  margin: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.4;
}

.book-view__editor-preview-subtasks {
  display: grid;
  gap: 6px;
}

.book-view__editor-preview-subtask {
  appearance: none;
  border: 1px solid #dbe5f3;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px 9px;
  margin: 0;
  text-align: left;
  color: #1e293b;
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.book-view__editor-preview-subtask:hover,
.book-view__editor-preview-subtask:focus-visible {
  border-color: #93c5fd;
  background: #f8fbff;
  outline: none;
}

.book-view__editor-preview-subtask.is-active {
  border-color: #60a5fa;
  background: #eef6ff;
}

.book-view__editor-preview-subtask-title {
  font-size: 0.9rem;
  font-weight: 640;
  color: #0f172a;
}

.book-view__editor-preview-subtask-app {
  font-size: 0.78rem;
  color: #2563eb;
}

.book-view__editor-preview-subtask-text {
  font-size: 0.8rem;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-view__editor-preview-empty {
  margin-top: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 12px;
  background: #f8fafc;
}

.book-view__editor-preview-empty strong {
  display: block;
  color: #0f172a;
  font-size: 0.94rem;
}

.book-view__editor-preview-empty p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.45;
}

.book-view__editor-preview-empty-inline {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 0.83rem;
}

/* Preview-only chapter editor layout */
.book-view__editor-preview-shell {
  border: 1px solid #d6deeb;
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 12%, rgba(56, 189, 248, 0.09), transparent 38%),
    linear-gradient(165deg, #ffffff 0%, #f8fbff 58%, #f3f7ff 100%);
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.book-view__editor-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.book-view__editor-preview-head h3 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: #111827;
}

.book-view__editor-preview-head p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.4;
}

.book-view__editor-preview-add {
  flex: 0 0 auto;
  margin-top: 2px;
}

.book-view__task-composer {
  margin: 0 0 12px;
  border: 1px solid #d7e3f6;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 12px;
  display: grid;
  gap: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.book-view__task-composer.is-submitting {
  opacity: 0.72;
}

.book-view__task-composer-field {
  display: grid;
  gap: 6px;
}

.book-view__task-composer-label {
  color: #334155;
  font-size: 0.79rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.book-view__task-composer-input {
  appearance: none;
  border: 1px solid #c6d4ed;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  padding: 9px 10px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.book-view__task-composer-input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.book-view__task-composer-options {
  border: 1px solid #d4dff1;
  border-radius: 10px;
  background: #ffffff;
  max-height: 190px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
  padding: 4px;
}

.book-view__task-composer-option {
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px;
  margin: 0;
  text-align: left;
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.book-view__task-composer-option:hover,
.book-view__task-composer-option.is-highlighted {
  background: #eff6ff;
}

.book-view__task-composer-option.is-selected {
  background: #dbeafe;
}

.book-view__task-composer-option-title {
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 620;
  line-height: 1.25;
}

.book-view__task-composer-option-path {
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.2;
}

.book-view__task-composer-help {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
}

.book-view__task-composer-empty {
  color: #64748b;
  font-size: 0.82rem;
  padding: 7px 8px;
}

.book-view__task-composer-error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.82rem;
  font-weight: 610;
}

.book-view__task-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.book-view__task-composer-cancel,
.book-view__task-composer-submit {
  appearance: none;
  border: 1px solid #c7d2e5;
  border-radius: 9px;
  font: inherit;
  font-size: 0.87rem;
  font-weight: 620;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.book-view__task-composer-cancel {
  background: #ffffff;
  color: #334155;
}

.book-view__task-composer-submit {
  border-color: #4f46e5;
  background: linear-gradient(140deg, #4f46e5 0%, #4338ca 100%);
  color: #ffffff;
}

.book-view__task-composer-cancel:hover,
.book-view__task-composer-cancel:focus-visible,
.book-view__task-composer-submit:hover,
.book-view__task-composer-submit:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.16);
}

.book-view__editor-preview-list {
  gap: 12px;
  max-height: 560px;
  padding-right: 3px;
}

.book-view__editor-preview-card {
  appearance: none;
  width: 100%;
  border: 1px solid #d5deec;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  margin: 0;
  text-align: left;
  color: #0f172a;
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.book-view__editor-preview-card--text-only {
  grid-template-columns: minmax(0, 1fr);
}

.book-view__editor-preview-card:hover,
.book-view__editor-preview-card:focus-visible {
  border-color: #93c5fd;
  box-shadow: 0 10px 18px rgba(59, 130, 246, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.book-view__editor-preview-card.is-active {
  border-color: #60a5fa;
  background: #eef6ff;
}

.book-view__editor-preview-figure {
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  background: #f8fafc;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.book-view__editor-preview-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.book-view__editor-preview-figure-empty {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.book-view__editor-preview-body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.book-view__editor-preview-title {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.book-view__editor-preview-text {
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.48;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-view__editor-preview-text.math-vis-description-rendered {
  display: -webkit-box;
}

.book-view__editor-mode-shell {
  border: 1px solid #d6deeb;
  border-radius: 16px;
  background: linear-gradient(165deg, #ffffff 0%, #f8fbff 58%, #f3f7ff 100%);
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.book-view__editor-mode-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.book-view__editor-mode-head h3 {
  margin: 0;
  font-size: 1.08rem;
  color: #0f172a;
}

.book-view__editor-mode-head p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 0.86rem;
}

.book-view__editor-save-btn {
  appearance: none;
  border: 1px solid #4f46e5;
  border-radius: 10px;
  background: linear-gradient(140deg, #4f46e5 0%, #4338ca 100%);
  color: #ffffff;
  font: inherit;
  font-size: 0.87rem;
  font-weight: 620;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform 130ms ease, box-shadow 130ms ease, opacity 130ms ease;
}

.book-view__editor-save-btn:hover,
.book-view__editor-save-btn:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(79, 70, 229, 0.24);
}

.book-view__editor-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.book-view__editor-mode-footer {
  margin-top: 12px;
}

.book-view__editor-mode-footer button {
  appearance: none;
  border: 1px solid #c7d2e5;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 620;
  padding: 8px 11px;
  cursor: pointer;
}

.book-view__editor-mode-footer button:hover,
.book-view__editor-mode-footer button:focus-visible {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.14);
}

.book-view__editor-mode-shell--a {
  border-color: #d1d5db;
  background: #ffffff;
  box-shadow: none;
}

.book-view__editor-mode-head--a {
  align-items: flex-start;
  gap: 16px;
}

.book-view__modea-head-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.book-view__modea-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.book-view__modea-title-row h3 {
  margin: 0;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
}

.book-view__modea-title-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #a8d4f2;
  background: rgba(255, 255, 255, 0.92);
  color: #075985;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
}

.book-view__modea-summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.book-view__modea-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 4px 10px;
}

.book-view__modea-summary-chip strong {
  font-size: 0.86rem;
  color: #0f172a;
}

.book-view__modea-summary-chip span {
  font-size: 0.74rem;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.book-view__modea-task-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.book-view__modea-task {
  position: relative;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background: #ffffff;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  box-shadow: none;
}

.book-view__modea-task::before {
  content: none;
}

.book-view__modea-task-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.book-view__modea-task-meta {
  min-width: 0;
}

.book-view__modea-task-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.book-view__modea-task-index {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
  flex: 0 0 auto;
}

.book-view__modea-task-sep {
  color: #6b7280;
  font-weight: 600;
}

.book-view__modea-task-shared-text {
  color: #334155;
  font-size: 0.88rem;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-view__modea-task-inline-open {
  appearance: none;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-align: left;
  min-width: 0;
  cursor: pointer;
}

.book-view__modea-task-inline-open:focus-visible {
  outline: 2px solid #9ca3af;
  outline-offset: 3px;
  border-radius: 6px;
}

.book-view__modea-task-inline-text {
  color: #334155;
  font-size: 0.94rem;
  line-height: 1.35;
}

.book-view__modea-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.book-view__modea-action-btn:hover,
.book-view__modea-action-btn:focus-visible {
  outline: none;
  border-color: #9ca3af;
  box-shadow: none;
  transform: none;
}

.book-view__modea-action-btn--add {
  background: #ffffff;
  border-color: #d1d5db;
}

.book-view__modea-delete-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border-color: #fecaca;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.book-view__modea-delete-btn:hover,
.book-view__modea-delete-btn:focus-visible {
  border-color: #f87171;
  background: #fee2e2;
  box-shadow: none;
  transform: none;
}

.book-view__modea-subtask-list {
  display: grid;
  gap: 4px;
}

.book-view__modea-subtask {
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0;
  display: grid;
  gap: 0;
}

.book-view__modea-subtask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.book-view__modea-subtask-open-field {
  appearance: none;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  text-align: left;
  min-width: 0;
  cursor: pointer;
  flex: 1 1 auto;
}

.book-view__modea-subtask-open-field:hover .book-view__modea-subtask-line,
.book-view__modea-subtask-open-field:focus-visible .book-view__modea-subtask-line {
  color: #111827;
}

.book-view__modea-subtask-open-field:focus-visible {
  outline: 2px solid #9ca3af;
  outline-offset: 3px;
  border-radius: 8px;
}

.book-view__modea-subtask-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.book-view__modea-subtask-head-actions .book-view__modea-select--compact {
  flex: 0 1 180px;
  min-width: 0;
}

.book-view__modea-subtask-index {
  font-size: 0.92rem;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.1;
  flex: 0 0 auto;
}

.book-view__modea-subtask-line {
  margin: 0;
  color: #334155;
  font-size: 0.84rem;
  line-height: 1.25;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.book-view__modea-subtask-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-view__modea-subtask-controls {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px;
}

.book-view__modea-select {
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  font-size: 0.79rem;
  padding: 7px 10px;
  min-width: 120px;
}

.book-view__modea-select:focus {
  outline: none;
  border-color: #9ca3af;
  box-shadow: none;
}

.book-view__modea-select--compact {
  min-width: 120px;
  width: auto;
  padding: 4px 10px;
  border-radius: 999px;
}

.book-view__modea-task-footer {
  display: flex;
  justify-content: flex-end;
}

.book-view__modea-add-subtask-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 auto;
}

.book-view__modea-subtask-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.book-view__modea-subtask-empty .book-view__editor-preview-empty-inline {
  margin: 0;
}

.book-view__modea-add-task-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.book-view__modea-add-task-btn:hover,
.book-view__modea-add-task-btn:focus-visible {
  outline: none;
  transform: none;
  border-color: #9ca3af;
  box-shadow: none;
}

.book-view__modea-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.book-view__modea-generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f8fafc;
  color: #111827;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.book-view__modea-generate-btn:hover,
.book-view__modea-generate-btn:focus-visible {
  outline: none;
  border-color: #9ca3af;
  background: #f3f4f6;
  box-shadow: none;
}

.book-view__modea-generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.book-view__modea-generator {
  margin-top: 12px;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background: #fafafa;
  padding: 12px;
}

.book-view__modea-generator-form {
  display: grid;
  gap: 12px;
  position: relative;
}

.book-view__modea-generator-form.is-submitting {
  isolation: isolate;
}

.book-view__modea-generator-form.is-submitting::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.55);
  z-index: 1;
  pointer-events: none;
}

.book-view__modea-generator-grid {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.book-view__modea-generator-field {
  display: grid;
  gap: 6px;
}

.book-view__modea-generator-field > span {
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
}

.book-view__modea-generator-count,
.book-view__modea-generator-notes {
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 10px;
}

.book-view__modea-generator-count:focus,
.book-view__modea-generator-notes:focus {
  outline: none;
  border-color: #9ca3af;
  box-shadow: none;
}

.book-view__modea-generator-notes {
  resize: vertical;
  min-height: 82px;
}

.book-view__modea-generator-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 144px;
  overflow: auto;
  padding-right: 2px;
}

.book-view__modea-generator-app {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  padding: 5px 10px;
  min-height: 32px;
  max-width: 100%;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.book-view__modea-generator-app:hover {
  border-color: #94a3b8;
}

.book-view__modea-generator-app:has(input:checked) {
  border-color: #3b82f6;
  background: #eff6ff;
}

.book-view__modea-generator-app input {
  margin: 0;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.book-view__modea-generator-app-label {
  min-width: 0;
  color: #111827;
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-view__modea-generator-help {
  margin: 0;
  color: #475569;
  font-size: 0.79rem;
  line-height: 1.45;
}

.book-view__modea-generator-status {
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28px;
  overflow: hidden;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 650;
  color: #334155;
  background: rgba(226, 232, 240, 0.42);
  z-index: 2;
}

.book-view__modea-generator-status-text {
  position: relative;
  z-index: 2;
  width: 100%;
}

.book-view__modea-generator-status[data-loading="true"] .book-view__modea-generator-status-text {
  opacity: 0.72;
}

.book-view__modea-generator-progress {
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.16);
  pointer-events: none;
  z-index: 1;
}

.book-view__modea-generator-progress-bar {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.9), rgba(14, 165, 233, 0.16));
  animation: book-view__modea-generator-progress 1.15s ease-in-out infinite;
}

@keyframes book-view__modea-generator-progress {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(260%);
  }
}

.book-view__modea-generator-status[data-tone="error"] {
  background: #fef2f2;
  color: #b91c1c;
}

.book-view__modea-generator-status[data-tone="success"] {
  background: #ecfdf5;
  color: #047857;
}

.book-view__modea-generator-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.book-view__modea-generator-cancel,
.book-view__modea-generator-submit {
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
}

.book-view__modea-generator-cancel {
  background: #ffffff;
  color: #111827;
}

.book-view__modea-generator-submit {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.book-view__modea-generator-cancel:hover,
.book-view__modea-generator-cancel:focus-visible,
.book-view__modea-generator-submit:hover,
.book-view__modea-generator-submit:focus-visible {
  outline: none;
  border-color: #9ca3af;
  box-shadow: none;
}

.book-view__modea-generator-submit:hover,
.book-view__modea-generator-submit:focus-visible {
  background: #1f2937;
}

.book-view__modea-generator-cancel:disabled,
.book-view__modea-generator-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.book-view__modea-task.is-dragging,
.book-view__modea-subtask.is-dragging {
  opacity: 0.72;
}

.book-view__modea-task.is-drop-target,
.book-view__modea-subtask.is-drop-target,
.book-view__modea-subtask-list.is-drop-target {
  border-color: #9ca3af;
  box-shadow: none;
}

.book-view__editor-mode-shell--a .book-view__editor-save-btn {
  border-color: #d1d5db;
  background: #ffffff;
  color: #111827;
}

.book-view__editor-mode-shell--a .book-view__editor-save-btn:hover,
.book-view__editor-mode-shell--a .book-view__editor-save-btn:focus-visible {
  border-color: #9ca3af;
  box-shadow: none;
  transform: none;
}

.book-view__editor-mode-shell--a .book-view__editor-save-btn:disabled {
  border-color: #e5e7eb;
  background: #f3f4f6;
  color: #9ca3af;
}

.book-view__modeb-task-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  max-height: 600px;
  overflow: auto;
  padding-right: 2px;
}

.book-view__modeb-task {
  border: 1px solid #d9e2f1;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.book-view__modeb-task-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.book-view__modeb-task-head h4 {
  margin: 0;
  font-size: 0.98rem;
  color: #0f172a;
}

.book-view__modeb-task-head button {
  appearance: none;
  border: 1px solid #c7d2e5;
  border-radius: 9px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 610;
  padding: 6px 8px;
  cursor: pointer;
}

.book-view__modeb-task-head button:hover,
.book-view__modeb-task-head button:focus-visible {
  outline: none;
  border-color: #93c5fd;
  background: #f8fbff;
}

.book-view__modeb-label {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 620;
}

.book-view__modeb-textarea {
  border: 1px solid #c7d2e5;
  border-radius: 9px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.42;
  padding: 8px 10px;
  resize: vertical;
  min-height: 72px;
}

.book-view__modeb-textarea:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.book-view__modeb-subtasks {
  display: grid;
  gap: 8px;
}

.book-view__modeb-subtask {
  border: 1px solid #dbe5f3;
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.book-view__modeb-subtask-head strong {
  color: #0f172a;
  font-size: 0.88rem;
}

@media (max-width: 900px) {
  .book-view {
    padding: 14px;
  }

  .book-view__layout {
    grid-template-columns: 1fr;
  }

  .book-view__toc h2,
  .book-view__chapter h2 {
    font-size: 1.6rem;
  }

  .book-view__toc-chapter-link {
    font-size: 1.35rem;
  }

  .book-view__toc-subchapter-link {
    font-size: 1.06rem;
  }

  .book-view__editor-shell {
    grid-template-columns: 1fr;
  }

  .book-view__editor-preview-list {
    max-height: none;
  }

  .book-view__task-composer-actions {
    justify-content: stretch;
  }

  .book-view__task-composer-cancel,
  .book-view__task-composer-submit {
    width: 100%;
  }

  .book-view__editor-preview-card {
    grid-template-columns: 1fr;
  }

  .book-view__editor-mode-head {
    flex-direction: column;
    align-items: stretch;
  }

  .book-view__modea-task-list {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .book-view__modea-task-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .book-view__modea-task-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .book-view__modea-subtask-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .book-view__modea-subtask-head-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .book-view__modea-subtask-head-actions .book-view__modea-select--compact {
    flex: 1 1 auto;
  }

  .book-view__modea-subtask-controls {
    grid-template-columns: 1fr;
  }

  .book-view__modea-action-btn:not(.book-view__modea-delete-btn):not(.book-view__modea-add-subtask-btn),
  .book-view__modea-add-task-btn {
    width: 100%;
    justify-content: center;
  }

  .book-view__modea-generate-btn {
    width: 100%;
    justify-content: center;
  }

  .book-view__modea-generator-grid {
    grid-template-columns: 1fr;
  }

  .book-view__editor-save-btn {
    width: 100%;
  }
}

.checkbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.status {
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 600;
  border: 1px solid transparent;
}

.status--success {
  color: #065f46;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.status--error {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

.status--info {
  color: #1f2937;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.card--examples .example-save-status,
.card--author-actions .example-save-status {
  width: 100%;
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.card--examples .example-save-status.status--success,
.card--author-actions .example-save-status.status--success {
  color: #0f766e;
  background: transparent;
  border-color: transparent;
}

.card--examples .example-save-status.status--error,
.card--author-actions .example-save-status.status--error {
  color: #b91c1c;
  background: transparent;
  border-color: transparent;
}

.card--examples .example-save-status.status--info,
.card--author-actions .example-save-status.status--info {
  color: #475569;
  background: transparent;
  border-color: transparent;
}

.card--examples .example-save-status[data-status-visible="true"],
.card--author-actions .example-save-status[data-status-visible="true"] {
  animation: example-save-status-appear 180ms ease-out;
}

@keyframes example-save-status-appear {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#examplesCard,
#settingsCard {
  scroll-margin-top: 24px;
}

@media (max-width: 900px), (any-pointer: coarse) {
  .mobile-nav {
    display: flex;
  }
}

body[data-app="graftegner"],
body[data-app="graftegner2"] {
  --sidebar-width: 420px;
  --gap: 12px;
  --surface-bg: #fff;
  padding: 12px;
}

body[data-app="graftegner"] .card,
body[data-app="graftegner2"] .card {
  padding: 12px;
  gap: 8px;
}

@media (min-width: 981px) {
  body[data-app="graftegner"],
  body[data-app="graftegner2"] {
    overflow: hidden;
  }

  body[data-app="graftegner"] .wrap,
  body[data-app="graftegner2"] .wrap {
    height: calc(100vh - 24px);
  }

  body[data-app="graftegner"] .layout--sidebar,
  body[data-app="graftegner2"] .layout--sidebar {
    height: 100%;
  }

  body[data-app="graftegner"] .layout--sidebar > .side,
  body[data-app="graftegner2"] .layout--sidebar > .side {
    max-height: 100%;
    overflow-y: auto;
    padding-left: 4px;
  }

  body[data-app="graftegner"] .layout--sidebar > .card,
  body[data-app="graftegner2"] .layout--sidebar > .card {
    position: sticky;
    top: var(--gap);
  }
}
:root {
  --gap: 18px;
  --surface-bg: #ffffff;
  --text-color: #111827;
  --heading-color: #374151;
  --label-color: #4b5563;
  --muted-color: #6b7280;
  --card-border: #e5e7eb;
  --card-radius: 14px;
  --control-radius: 10px;
  --sidebar-width: 360px;
}

.color-swatch--pair {
  --swatch-fill: #ffffff;
  --swatch-line: #111827;
  position: relative;
  background: var(--swatch-line);
  box-shadow:
    var(--swatch-outer-ring, 0 0 0 0 transparent),
    var(--swatch-elevation, none);
}

.color-swatch--pair::after {
  content: '';
  position: absolute;
  inset: clamp(3px, 18%, 6px);
  border-radius: 999px;
  background: var(--swatch-fill);
}

.color-option-btn.color-swatch--pair {
  background: var(--swatch-line);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--text-color);
  background: var(--surface-bg);
  padding: 20px;
}

body[data-app-mode="student"] {
  --gap: 10px;
  padding: 0;
}

body[data-app="mattemotor"][data-host-mode="student-view"] .mattemotor-host.split-enabled[data-markdown-pane-visible="false"],
body[data-app="mattemotor"][data-mode="student-view"] .mattemotor-host.split-enabled[data-markdown-pane-visible="false"] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "side" !important;
  justify-items: center;
  gap: 0 !important;
}

body[data-app="mattemotor"][data-host-mode="student-view"] .mattemotor-host.split-enabled[data-markdown-pane-visible="false"] > .splitter,
body[data-app="mattemotor"][data-mode="student-view"] .mattemotor-host.split-enabled[data-markdown-pane-visible="false"] > .splitter,
body[data-app="mattemotor"][data-host-mode="student-view"] .mattemotor-host.split-enabled[data-markdown-pane-visible="false"] > :not(.side):not(.splitter),
body[data-app="mattemotor"][data-mode="student-view"] .mattemotor-host.split-enabled[data-markdown-pane-visible="false"] > :not(.side):not(.splitter) {
  display: none !important;
}

body[data-app="mattemotor"][data-host-mode="student-view"] .mattemotor-host.split-enabled[data-markdown-pane-visible="false"] > .side,
body[data-app="mattemotor"][data-mode="student-view"] .mattemotor-host.split-enabled[data-markdown-pane-visible="false"] > .side {
  width: min(100%, 780px);
  justify-self: center;
  padding: 0;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.grid {
  display: grid;
  gap: var(--gap);
  align-items: start;
}

.layout--sidebar {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.layout--sidebar > .side {
  grid-column: 2;
  grid-row: 1;
}

.layout--sidebar > :not(.side):not(.splitter) {
  grid-column: 1;
  grid-row: 1;
}

body.app-layout .wrap {
  max-width: none;
  margin: 0;
  gap: 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
}

body.app-layout {
  --app-layout-figure-stage-min-block-size: clamp(320px, 48dvh, 560px);
  --app-layout-figure-stage-max-block-size: clamp(320px, calc(100dvh - 220px), 820px);
  padding: 0;
}

body.app-layout .layout--sidebar {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

body.app-layout .grid.split-enabled {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body.app-layout .grid.split-enabled > .side {
  padding: 0;
}

@media (min-width: 981px) {
  body.app-layout {
    overflow-x: hidden;
    overflow-y: hidden;
  }

  body.app-layout .wrap {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  body.app-layout .layout--sidebar {
    height: 100%;
    min-height: 0;
  }

  body.app-layout .grid.layout--sidebar,
  body.app-layout .grid.split-enabled {
    height: 100%;
    min-height: 0;
  }

  body.app-layout .layout--sidebar > .side {
    max-height: 100%;
    overflow-y: auto;
    padding-left: 0;
  }

  body.app-layout .layout--sidebar > :not(.side):not(.splitter) {
    position: sticky;
    top: var(--gap);
  }
}

@media (max-width: 980px) {
  .layout--sidebar {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }

  .layout--sidebar > .side,
  .layout--sidebar > :not(.side):not(.splitter) {
    grid-column: 1;
    grid-row: auto;
  }
}

.side {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

body.app-layout .layout--sidebar > :not(.side):not(.splitter) {
  min-width: 0;
  min-height: 0;
}

body[data-host-mode="student-view"] [data-student-view-hidden="true"],
body[data-mode="student-view"] [data-student-view-hidden="true"],
body[data-app-mode="student"] [data-student-view-hidden="true"] {
  display: none !important;
}

body[data-host-mode="student-view"] [data-host-hidden="preserve-space"],
body[data-mode="student-view"] [data-host-hidden="preserve-space"],
body[data-app-mode="student"] [data-host-hidden="preserve-space"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.app-layout .layout--sidebar > :not(.side):not(.splitter).card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.app-layout .layout--sidebar > :not(.side):not(.splitter) > [data-task-text-description],
body.app-layout .layout--sidebar > :not(.side):not(.splitter).card > [data-task-text-description] {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

body.app-layout .layout--sidebar > :not(.side):not(.splitter) > [data-task-text-description] > .example-description,
body.app-layout .layout--sidebar > :not(.side):not(.splitter).card > [data-task-text-description] > .example-description {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

body.app-layout .layout--sidebar > :not(.side):not(.splitter).card > :is(.grid2, .figure-area, #figureContainer),
body.app-layout .layout--sidebar > :not(.side):not(.splitter)[data-app-shell-main-pane="true"] > .figure,
body.app-layout .layout--sidebar > :not(.side):not(.splitter) > .figure,
body.app-layout .layout--sidebar > :not(.side):not(.splitter).card > .figure {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

body.app-layout .layout--sidebar > :not(.side):not(.splitter)[data-app-shell-main-pane="true"] > .figure,
body.app-layout .layout--sidebar > :not(.side):not(.splitter) > .figure,
body.app-layout .layout--sidebar > :not(.side):not(.splitter).card > .figure {
  display: grid;
  place-items: center;
  min-height: var(--app-layout-figure-stage-min-block-size);
  max-height: var(--app-layout-figure-stage-max-block-size);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.app-layout .layout--sidebar > :not(.side):not(.splitter)[data-app-shell-main-pane="true"] > .figure > :is(svg, canvas, img, video),
body.app-layout .layout--sidebar > :not(.side):not(.splitter) > .figure > :is(svg, canvas, img, video),
body.app-layout .layout--sidebar > :not(.side):not(.splitter).card > .figure > :is(svg, canvas, img, video) {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--app-layout-figure-stage-max-block-size);
}

#examples-store-banner,
.examples-store-banner {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #fcd34d;
  background: #fff7ed;
  color: #92400e;
  font-weight: 500;
  line-height: 1.4;
}

.examples-store-banner.examples-store-banner--active {
  display: block;
}

.card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card--figure-panel {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.card h1,
.card h2 {
  margin: 0 0 6px 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--heading-color);
}

.figure {
  border-radius: 10px;
  background: #fafbfc;
  overflow: hidden;
  border: 1px solid #eef0f3;
}

.figure svg {
  display: block;
  width: 100%;
  height: auto;
}


[data-math-visuals-example-pending='1'] .figure {
  position: relative;
}

[data-math-visuals-example-pending='1'] .figure > * {
  visibility: hidden;
}

[data-math-visuals-example-pending='1'] .figure::after {
  content: 'Laster eksempel…';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
}

.toolbar {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

body.app-layout .layout--sidebar > .side .card--author-actions {
  position: sticky;
  top: var(--gap);
  z-index: 4;
  gap: 8px;
}

.card--author-actions {
  border: none;
  box-shadow: none;
  padding: 6px 0;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface-bg, #f8f9fb);
}

.card--author-actions .author-actions-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: var(--control-radius);
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.02s;
  font-family: inherit;
  color: inherit;
}

.btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn:active {
  transform: translateY(1px);
}

.btn--task-check {
  border: 2px solid #428f5a;
  color: #0e4c2c;
  background: #9cdba7;
  border-radius: 999px;
  min-height: 56px;
  padding: 11px 26px;
  font-size: clamp(1.02rem, 0.98rem + 0.28vw, 1.14rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: none;
}

.btn--task-check::after {
  content: "";
  width: 1.32em;
  height: 1.32em;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 5v5.5c0 1.1-.9 2-2 2H7' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5 8.5 7 12l3.5 3.5' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 5v5.5c0 1.1-.9 2-2 2H7' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5 8.5 7 12l3.5 3.5' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn--task-check:hover {
  border-color: #367b4c;
  background: #93d39f;
  box-shadow: none;
}

.btn--task-check:focus-visible {
  outline: 3px solid #1f6a3f;
  outline-offset: 2px;
}

.btn--task-check:active {
  background: #88ca95;
}

.btn--task-check:disabled,
.btn--task-check[disabled] {
  opacity: 0.56;
  cursor: default;
  box-shadow: none;
}

.task-math-engine-runtime__solution-button {
  border: 2px solid #63a6d3;
  background: #f2f4f7;
  color: #111827;
  border-radius: 999px;
  min-height: 56px;
  min-width: 102px;
  padding: 10px 20px 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  flex: 0 0 auto;
  white-space: nowrap;
}

.task-math-engine-runtime__solution-button:hover {
  border-color: #5298c9;
  background: #ebeff4;
}

.task-math-engine-runtime__solution-button:focus-visible {
  outline: 3px solid #0b74b5;
  outline-offset: 2px;
}

.task-math-engine-runtime__solution-button:disabled,
.task-math-engine-runtime__solution-button[disabled] {
  opacity: 0.46;
  cursor: default;
}

.task-math-engine-runtime__solution-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  flex: 0 0 auto;
}

.task-math-engine-runtime__solution-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.task-math-engine-runtime__solution-count {
  font-size: 1.26rem;
  line-height: 1;
  font-weight: 780;
  letter-spacing: -0.03em;
}

.task-math-engine-runtime__input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  container-type: inline-size;
}

.task-math-engine-runtime__input-row .task-math-engine-runtime__input-wrap,
.task-math-engine-runtime__input-row .mattemotor-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.task-math-engine-runtime__input-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  align-self: start;
  min-width: 0;
  margin-top: 8px;
}

.task-tool-runtime__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.task-math-engine-runtime__check {
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

@container (max-width: 520px) {
  .task-math-engine-runtime__input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-math-engine-runtime__input-actions {
    justify-content: flex-start;
    margin-top: 0;
  }

  .task-tool-runtime__actions {
    justify-content: flex-start;
  }

  .task-math-engine-runtime__check {
    min-width: 112px;
  }
}

@media (max-width: 1100px) {
  body[data-runtime-device="ipad"] .task-math-engine-runtime__input-row,
  .task-math-engine-runtime[data-runtime-device="ipad"] .task-math-engine-runtime__input-row,
  body[data-runtime-device="iphone"] .task-math-engine-runtime__input-row,
  .task-math-engine-runtime[data-runtime-device="iphone"] .task-math-engine-runtime__input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-runtime-device="ipad"] .task-math-engine-runtime__input-actions,
  .task-math-engine-runtime[data-runtime-device="ipad"] .task-math-engine-runtime__input-actions,
  body[data-runtime-device="iphone"] .task-math-engine-runtime__input-actions,
  .task-math-engine-runtime[data-runtime-device="iphone"] .task-math-engine-runtime__input-actions {
    justify-content: flex-start;
    margin-top: 0;
  }

  body[data-runtime-device="ipad"] .task-math-engine-runtime__check,
  .task-math-engine-runtime[data-runtime-device="ipad"] .task-math-engine-runtime__check,
  body[data-runtime-device="iphone"] .task-math-engine-runtime__check,
  .task-math-engine-runtime[data-runtime-device="iphone"] .task-math-engine-runtime__check {
    min-width: 112px;
  }
}

@media (max-width: 480px) {
  .btn--task-check {
    min-height: 46px;
    padding: 8px 18px;
    gap: 8px;
  }
  .task-math-engine-runtime__solution-button {
    min-height: 50px;
    min-width: 92px;
    padding: 8px 16px 8px 14px;
  }
  .task-math-engine-runtime__solution-count {
    font-size: 1rem;
  }
  .task-math-engine-runtime__check {
    min-width: 0;
  }
}

label {
  font-size: 13px;
  color: var(--label-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings {
  display: flex;
  gap: var(--gap);
}

.settings fieldset {
  flex: 1;
}

legend {
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  padding: 0 4px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.checkbox-row--disabled {
  opacity: 0.5;
}

.field-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.field-row .field {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

textarea,
select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="color"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  border: 1px solid #d1d5db;
  border-radius: var(--control-radius);
  padding: 8px 10px;
  font-size: 14px;
  background: #fff;
  color: var(--text-color);
  box-sizing: border-box;
  font-family: inherit;
}

textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
}

.alt-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.alt-text-card {
  gap: 12px;
}

.alt-text-card__header {
  margin: 0;
}

.alt-text-card__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.alt-text-card__toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 8px;
}

.alt-text-card__chevron {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  transform: rotate(90deg);
  transition: transform 0.16s ease;
  flex: 0 0 auto;
}

.alt-text-card--collapsed .alt-text-card__chevron {
  transform: rotate(0deg);
}

.alt-text-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alt-text-card__body[hidden] {
  display: none !important;
}

fieldset.alt-text-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

fieldset.alt-text-card > legend.alt-text-card__header {
  width: 100%;
  padding: 0 4px;
}

fieldset.alt-text-card > legend.alt-text-card__header .alt-text-card__toggle {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#exportCard .alt-text {
  display: none;
}

#exportCard .alt-text:last-of-type {
  display: flex;
}

.alt-text label {
  font-size: 13px;
  font-weight: 600;
  color: var(--label-color);
}

.alt-text textarea {
  min-height: 104px;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: var(--control-radius);
  font-size: 14px;
  background: #fff;
  color: var(--text-color);
  font-family: inherit;
  resize: vertical;
}

.alt-text textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.alt-text__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.alt-text__status {
  font-size: 12px;
  color: var(--muted-color);
  min-height: 18px;
  flex: 1;
}

.alt-text__status.alt-text__status--error {
  color: #b91c1c;
}

.alt-text__save-button {
  background: #4f46e5;
  border-color: #4338ca;
  color: #fff;
}

.alt-text__save-button:hover {
  background: #4338ca;
  color: #fff;
}

.alt-text__save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.alt-text__status-action {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #ffffff;
  color: inherit;
  cursor: pointer;
}

.alt-text__status.alt-text__status--error .alt-text__status-action {
  border-color: #fca5a5;
}

.alt-text__status-action + .alt-text__status-action {
  margin-left: 6px;
}

select {
  background-color: #fff;
}

input:disabled,
textarea:disabled,
select:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.small {
  font-size: 12px;
  color: var(--muted-color);
}

.sep {
  height: 1px;
  background: #eef0f3;
  margin: 8px 0;
}


.card--settings fieldset,
.card[data-card="settings"] fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  margin: 0;
}

.card--settings legend,
.card[data-card="settings"] legend {
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  padding: 0 4px;
}

.card--settings label,
.card[data-card="settings"] label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #4b5563;
}

.card--settings label.checkbox,
.card--settings label.chk,
.card--settings label.toggleLabel,
.card[data-card="settings"] label.checkbox,
.card[data-card="settings"] label.chk,
.card[data-card="settings"] label.toggleLabel {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.card--settings label.checkbox input,
.card[data-card="settings"] label.checkbox input {
  order: -1;
}

.card--settings .settings-divider,
.card[data-card="settings"] .settings-divider {
  height: 10px;
}

.card--settings input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.card--settings select,
.card--settings textarea,
.card[data-card="settings"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.card[data-card="settings"] select,
.card[data-card="settings"] textarea {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  background: #fff;
  color: #111827;
  box-sizing: border-box;
  font-family: inherit;
}

.card--settings textarea,
.card[data-card="settings"] textarea {
  resize: vertical;
  min-height: 72px;
}

.card--settings input[type="checkbox"],
.card--settings input[type="radio"],
.card[data-card="settings"] input[type="checkbox"],
.card[data-card="settings"] input[type="radio"] {
  accent-color: #3b82f6;
}

.card--examples {
  gap: 14px;
}

.embedded-task-strip-host {
  width: 100%;
  margin: 2px 0 8px;
}

.embedded-task-strip-host .task-strip--embedded {
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 2px;
}

.embedded-task-strip-host .task-cluster {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: clamp(12px, 2vw, 24px);
  border-bottom: 2px solid #c8d2e6;
  padding: 0 clamp(8px, 1.2vw, 14px);
  min-height: 54px;
}

.embedded-task-strip-host .task-node-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  margin: 2px 0 -2px;
  z-index: 1;
}

.embedded-task-strip-host .task-node-wrap.is-active {
  z-index: 3;
  padding: 10px 14px 10px;
  border: 2px solid #c8d2e6;
  border-bottom-color: #f8fafc;
  border-radius: 16px 16px 0 0;
  background: #f8fafc;
  box-shadow: 0 -6px 16px rgba(37, 99, 235, 0.1);
}

.embedded-task-strip-host .task-node {
  appearance: none;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  border: 2px solid #bfcdf0;
  background: #ffffff;
  color: #2f56bf;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
  font-family: "Source Sans 3", "Trebuchet MS", "Segoe UI", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.embedded-task-strip-host .task-node::after {
  display: none;
}

.embedded-task-strip-host .task-node:hover,
.embedded-task-strip-host .task-node:focus-visible {
  background: #2f56bf;
  color: #ffffff;
  border-color: #2f56bf;
  outline: none;
}

.embedded-task-strip-host .task-node-wrap.is-active .task-node,
.embedded-task-strip-host .task-node-wrap.is-active .task-node:hover,
.embedded-task-strip-host .task-node-wrap.is-active .task-node:focus-visible {
  color: #2f56bf;
  border-color: #2f56bf;
  background: #eaf1ff;
}

.card--examples .example-tabs,
.card--author-actions .example-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card--examples .example-tab,
.card--author-actions .example-tab {
  appearance: none;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.card--examples .example-tab:hover,
.card--examples .example-tab:focus-visible,
.card--examples .example-tab.is-active,
.card--author-actions .example-tab:hover,
.card--author-actions .example-tab:focus-visible,
.card--author-actions .example-tab.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  outline: none;
}

.card--examples .example-tabs-empty,
.card--author-actions .example-tabs-empty {
  font-size: 12px;
  color: #64748b;
}

.card--examples .example-description {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--label-color);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.card--examples.mattemotor-markdown-pane,
.card--examples[data-mattemotor-markdown-pane] {
  height: 100%;
}

.card--examples.mattemotor-markdown-pane .example-description,
.card--examples[data-mattemotor-markdown-pane] .example-description {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
}

.card--examples.mattemotor-markdown-pane .example-description > label,
.card--examples[data-mattemotor-markdown-pane] .example-description > label {
  display: none !important;
}

.card--examples.mattemotor-markdown-pane .example-description > .mattemotor-markdown-toolbar,
.card--examples[data-mattemotor-markdown-pane] .example-description > .mattemotor-markdown-toolbar {
  order: 2;
}

.card--examples.mattemotor-markdown-pane .example-description > textarea,
.card--examples[data-mattemotor-markdown-pane] .example-description > textarea {
  order: 3;
  flex: 1 1 auto;
  min-height: 0;
  resize: vertical;
}

.card--examples.mattemotor-markdown-pane .example-description > .example-description-preview,
.card--examples[data-mattemotor-markdown-pane] .example-description > .example-description-preview {
  order: 4;
  flex: 1 1 auto;
  min-height: 0;
}

.card--examples.mattemotor-markdown-pane .example-description > [data-task-check-host],
.card--examples[data-mattemotor-markdown-pane] .example-description > [data-task-check-host] {
  order: 5;
}

.card--examples.mattemotor-markdown-pane .mattemotor-markdown-toolbar,
.card--examples[data-mattemotor-markdown-pane] .mattemotor-markdown-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #d5dde8;
  border-radius: 12px;
  background: #edf1f7;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 0;
  z-index: 2;
}

.card--examples.mattemotor-markdown-pane .mattemotor-markdown-toolbar__heading-wrap,
.card--examples[data-mattemotor-markdown-pane] .mattemotor-markdown-toolbar__heading-wrap {
  flex: 0 0 auto;
  min-width: 180px;
}

.card--examples.mattemotor-markdown-pane .mattemotor-markdown-toolbar__heading-select,
.card--examples[data-mattemotor-markdown-pane] .mattemotor-markdown-toolbar__heading-select {
  width: 100%;
  height: 38px;
  border: 1px solid #c1cad9;
  border-radius: 10px;
  background: #ffffff;
  color: #1e293b;
  padding: 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.card--examples.mattemotor-markdown-pane .mattemotor-markdown-toolbar__heading-select:focus-visible,
.card--examples[data-mattemotor-markdown-pane] .mattemotor-markdown-toolbar__heading-select:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.card--examples.mattemotor-markdown-pane .mattemotor-markdown-toolbar__button,
.card--examples[data-mattemotor-markdown-pane] .mattemotor-markdown-toolbar__button {
  flex: 0 0 auto;
  min-width: 38px;
  height: 38px;
  border: 1px solid #c1cad9;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0 11px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.card--examples.mattemotor-markdown-pane .mattemotor-markdown-toolbar__button:hover,
.card--examples[data-mattemotor-markdown-pane] .mattemotor-markdown-toolbar__button:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.card--examples.mattemotor-markdown-pane .mattemotor-markdown-toolbar__button:focus-visible,
.card--examples[data-mattemotor-markdown-pane] .mattemotor-markdown-toolbar__button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.card--examples.mattemotor-markdown-pane .mattemotor-markdown-toolbar__button--bold,
.card--examples[data-mattemotor-markdown-pane] .mattemotor-markdown-toolbar__button--bold {
  font-weight: 800;
}

.card--examples.mattemotor-markdown-pane .mattemotor-markdown-toolbar__button--italic,
.card--examples[data-mattemotor-markdown-pane] .mattemotor-markdown-toolbar__button--italic {
  font-style: italic;
  font-weight: 700;
}

.card--examples.mattemotor-markdown-pane[data-markdown-mode="editable"] .example-description-preview,
.card--examples[data-mattemotor-markdown-pane][data-markdown-mode="editable"] .example-description-preview {
  display: none !important;
}

.card--examples.mattemotor-markdown-pane[data-markdown-mode="rendered"] textarea,
.card--examples[data-mattemotor-markdown-pane][data-markdown-mode="rendered"] textarea {
  display: none !important;
}

.card--examples.mattemotor-markdown-pane[data-markdown-mode="rendered"] .example-description-preview,
.card--examples[data-mattemotor-markdown-pane][data-markdown-mode="rendered"] .example-description-preview {
  display: block !important;
  min-height: 0;
  overflow: auto;
}

.card--examples.mattemotor-markdown-pane[data-markdown-pane-state="add"] .example-description,
.card--examples[data-mattemotor-markdown-pane][data-markdown-pane-state="add"] .example-description {
  align-items: stretch;
  justify-content: flex-start;
}

.card--examples.mattemotor-markdown-pane[data-markdown-pane-state="add"] .example-description > [data-task-check-host],
.card--examples[data-mattemotor-markdown-pane][data-markdown-pane-state="add"] .example-description > [data-task-check-host] {
  display: none !important;
}

.card--examples.mattemotor-markdown-pane .example-description-add,
.card--examples[data-mattemotor-markdown-pane] .example-description-add {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  padding-top: clamp(28px, 6vh, 72px);
}

.card--examples.mattemotor-markdown-pane .example-description-add[hidden],
.card--examples[data-mattemotor-markdown-pane] .example-description-add[hidden] {
  display: none !important;
}

.card--examples.mattemotor-markdown-pane .example-description-add__button,
.card--examples[data-mattemotor-markdown-pane] .example-description-add__button {
  width: 88px;
  height: 88px;
  border: 2px dashed #cfd5df;
  border-radius: 22px;
  background: #fff;
  color: #667085;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.card--examples.mattemotor-markdown-pane .example-description-add__button:hover,
.card--examples[data-mattemotor-markdown-pane] .example-description-add__button:hover {
  border-color: #98a2b3;
  background: #f8fafc;
  color: #344054;
}

.card--examples.mattemotor-markdown-pane .example-description-add__button:focus-visible,
.card--examples[data-mattemotor-markdown-pane] .example-description-add__button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

.card--examples .example-description-toggle,
.task-panel__toggle {
  display: none !important;
}

.card--examples .example-description-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  align-self: flex-start;
}

.card--examples .example-description-toggle__button {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.card--examples .example-description-toggle__button[aria-pressed="true"] {
  background: #1d4ed8;
  color: #fff;
}

.card--examples .example-description-toggle__button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.card--examples .example-description [data-task-check-host] {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

.card--examples .example-description [data-task-check-host][hidden] {
  display: none;
}

.card--examples .example-description [data-task-check-host] [data-task-check-host-actions] {
  width: 100%;
}

.card--examples .example-description [data-task-check-host] .status {
  width: 100%;
}

.card--examples .example-description-preview {
  display: block;
  border: 1px solid var(--card-border);
  border-radius: var(--control-radius);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-color);
  background: #fff;
  overflow-x: auto;
  margin-top: 4px;
}

.card--examples .example-description-preview[hidden] {
  display: none;
}

.card--examples .example-description-preview[data-empty="true"] {
  display: none;
}

.card--examples .example-description-preview[data-empty="true"][data-placeholder="true"] {
  display: inline-flex;
}

.card--examples .example-description-preview[data-placeholder="true"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed #c7d2fe;
  border-radius: var(--control-radius);
  background: #eef2ff;
  color: #1e3a8a;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   MODUS-STYRING: host capabilities (globalt)
   ========================================================================== */

body[data-show-figure-settings="true"] .side .card--settings,
body[data-show-figure-settings="true"] .side .card--draggables,
body[data-show-figure-settings="true"] .side [data-author-layout-guard="figure-settings"],
body[data-show-figure-settings="true"] .side #exportCard,
body[data-show-figure-settings="true"] .side .card--export {
  display: flex;
}

body[data-show-figure-settings="false"] .side .card--settings,
body[data-show-figure-settings="false"] .side .card--draggables,
body[data-show-figure-settings="false"] .side [data-author-layout-guard="figure-settings"],
body[data-show-figure-settings="false"] .side #exportCard,
body[data-show-figure-settings="false"] .side .card--export {
  display: none !important;
}

body[data-show-figure-settings="false"] [data-edit-figure-only] {
  display: none !important;
}

body[data-show-task-text-panel="true"] .side .card--examples {
  display: flex;
}

body[data-host-mode="edit-figure"] .card--examples .example-description {
  display: none !important;
}

body[data-host-mode="edit-figure"] .card--examples.mattemotor-markdown-pane .example-description,
body[data-host-mode="edit-task-text"] .card--examples.mattemotor-markdown-pane .example-description,
body[data-effective-host-mode="edit-task-text"] .card--examples.mattemotor-markdown-pane .example-description,
body[data-host-mode="edit-figure"] .card--examples[data-mattemotor-markdown-pane] .example-description,
body[data-host-mode="edit-task-text"] .card--examples[data-mattemotor-markdown-pane] .example-description,
body[data-effective-host-mode="edit-task-text"] .card--examples[data-mattemotor-markdown-pane] .example-description {
  display: flex !important;
}

body[data-host-mode="edit-task-text"] .card--examples .example-description-preview,
body[data-effective-host-mode="edit-task-text"] .card--examples .example-description-preview {
  display: none !important;
}

body[data-host-mode="edit-task-text"] .card--examples.mattemotor-markdown-pane .example-description-preview,
body[data-effective-host-mode="edit-task-text"] .card--examples.mattemotor-markdown-pane .example-description-preview,
body[data-host-mode="edit-task-text"] .card--examples[data-mattemotor-markdown-pane] .example-description-preview,
body[data-effective-host-mode="edit-task-text"] .card--examples[data-mattemotor-markdown-pane] .example-description-preview {
  display: none !important;
}

body[data-host-mode="edit-task-text"] .task-panel__preview,
body[data-effective-host-mode="edit-task-text"] .task-panel__preview {
  display: none !important;
}

body[data-host-mode="edit-task-text"] .task-panel .task-text-editable,
body[data-effective-host-mode="edit-task-text"] .task-panel .task-text-editable {
  display: block !important;
}

body[data-show-task-text-panel="true"] .side [data-task-text-panel] {
  display: block;
  width: 100%;
}

body[data-app-mode="student"][data-show-task-text-panel="false"]:not([data-mattemotor-panel-mode="calculation"]) .side .card--examples {
  display: flex !important;
}

body[data-app-mode="student"][data-show-task-text-panel="false"][data-show-task-check="true"] .side .card--examples {
  display: flex !important;
}

body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="calculation"] .side .card--examples {
  display: flex !important;
}

body[data-app-mode="author"][data-show-task-text-panel="false"] .side .card--examples {
  display: flex;
}

body[data-app-mode="author"][data-show-task-text-panel="false"] .side [data-task-text-panel] {
  display: none !important;
}

body[data-app-mode="student"] .side [data-task-text-panel] {
  display: block !important;
  width: 100%;
}

body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="calculation"] .side [data-task-text-panel] {
  display: none !important;
}

body[data-app="mattemotor"][data-app-mode="student"][data-show-author-controls="false"] .mattemotor-host > .card--examples[data-mattemotor-markdown-pane][data-markdown-empty="true"] {
  display: none !important;
}

body[data-host-mode="student-view"] .card--examples .example-description-preview[data-empty="true"],
body[data-mode="student-view"] .card--examples .example-description-preview[data-empty="true"],
body[data-app-mode="student"] .card--examples .example-description-preview[data-empty="true"] {
  display: none !important;
  min-height: 0;
}

body[data-app-mode="author"][data-author-layout-mode="task-view"] .side [data-task-text-panel] {
  display: block !important;
  width: 100%;
}

body[data-app-mode="author"][data-author-layout-mode="task-view"] .side .task-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card--examples .example-description-preview .katex {
  display: inline-block;
  font-size: 1.05em;
}

.card--examples .example-description-preview .katex-display {
  overflow-x: auto;
  padding-bottom: 2px;
}

.card--examples .example-description-preview p {
  margin: 0 0 10px;
}

.card--examples .example-description-preview p:last-child {
  margin-bottom: 0;
}

.card--examples .example-description-preview h1,
.card--examples .example-description-preview h2,
.card--examples .example-description-preview h3,
.card--examples .example-description-preview h4,
.card--examples .example-description-preview h5,
.card--examples .example-description-preview h6 {
  margin: 0 0 10px;
  line-height: 1.25;
  color: #0f172a;
}

.card--examples .example-description-preview h1 { font-size: 1.42em; }
.card--examples .example-description-preview h2 { font-size: 1.3em; }
.card--examples .example-description-preview h3 { font-size: 1.18em; }
.card--examples .example-description-preview h4 { font-size: 1.06em; }
.card--examples .example-description-preview h5,
.card--examples .example-description-preview h6 { font-size: 1em; }

.card--examples .example-description-preview ul,
.card--examples .example-description-preview ol {
  margin: 0 0 10px 22px;
  padding: 0;
}

.card--examples .example-description-preview li + li {
  margin-top: 4px;
}

.card--examples .example-description-preview blockquote {
  margin: 0 0 10px;
  padding: 0 0 0 12px;
  border-left: 3px solid #cbd5e1;
  color: #334155;
}

.card--examples .example-description-preview hr {
  border: 0;
  border-top: 1px solid #d1d5db;
  margin: 10px 0;
}

.card--examples .example-description-preview pre {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #dbe3ed;
  border-radius: 8px;
  background: #f8fafc;
  overflow-x: auto;
}

.card--examples .example-description-preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.93em;
}

.card--examples .example-description-preview p code,
.card--examples .example-description-preview li code,
.card--examples .example-description-preview blockquote code,
.card--examples .example-description-preview h1 code,
.card--examples .example-description-preview h2 code,
.card--examples .example-description-preview h3 code,
.card--examples .example-description-preview h4 code,
.card--examples .example-description-preview h5 code,
.card--examples .example-description-preview h6 code {
  background: #e2e8f0;
  border-radius: 4px;
  padding: 1px 4px;
}

.math-vis-description-rendered pre.math-vis-code-block,
.card--examples .example-description-preview pre.math-vis-code-block {
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid #dbe3ed;
  border-radius: 10px;
  background: #f8fafc;
  overflow: auto;
}

.math-vis-description-rendered pre.math-vis-code-block[class*="language-"],
.card--examples .example-description-preview pre.math-vis-code-block[class*="language-"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.math-vis-description-rendered pre.math-vis-code-block code[class*="language-"],
.card--examples .example-description-preview pre.math-vis-code-block code[class*="language-"] {
  display: block;
  font-size: 0.93em;
}

.math-vis-description-rendered pre.math-vis-code-block.line-numbers .line-numbers-rows,
.card--examples .example-description-preview pre.math-vis-code-block.line-numbers .line-numbers-rows {
  border-right-color: #d1d5db;
}

.math-vis-description-rendered pre.math-vis-code-block.line-numbers .line-numbers-rows > span:before,
.card--examples .example-description-preview pre.math-vis-code-block.line-numbers .line-numbers-rows > span:before {
  color: #64748b;
}

.card--examples .example-description-preview table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.card--examples .example-description-preview th,
.card--examples .example-description-preview td {
  border: 1px solid #d1d5db;
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}

.card--examples .example-description-preview th {
  background: #f1f5f9;
  font-weight: 600;
}

.card--examples .example-description-preview .math-vis-answerbox {
  margin: 4px 4px 4px 0;
}

body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="hidden"] .card--examples .task-math-engine-setup,
body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="hidden"] .card--examples #panel-setup {
  display: none !important;
}

body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="setup"] .card--examples .task-math-engine-runtime {
  display: none !important;
}

body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="setup"] .card--examples .task-math-engine-setup,
body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="setup"] .card--examples #panel-setup {
  display: block;
}

body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="calculation"] .card--examples .task-math-engine-setup,
body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="calculation"] .card--examples #panel-setup {
  display: none !important;
}

body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="calculation"] .card--examples .task-math-engine-runtime {
  display: flex;
}

body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="calculation"] .card--examples .example-description-preview:not([hidden]),
body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="calculation"] .card--examples.mattemotor-markdown-pane[data-markdown-mode="rendered"] .example-description-preview:not([hidden]),
body:not([data-app="mattemotor"])[data-mattemotor-panel-mode="calculation"] .card--examples[data-mattemotor-markdown-pane][data-markdown-mode="rendered"] .example-description-preview:not([hidden]) {
  display: block !important;
}


.card--examples .mattemotor-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.card--examples .task-response-mode {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.card--examples .task-response-mode__label {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #334155;
}

.card--examples .task-response-mode-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid #d7deea;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.card--examples .task-response-mode-switch__button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #475569;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.25;
  min-height: 38px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.card--examples .task-response-mode-switch__button:hover {
  background: rgba(37, 99, 235, 0.08);
  color: #1e3a8a;
}

.card--examples .task-response-mode-switch__button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.card--examples .task-response-mode-switch__button.is-active,
.card--examples .task-response-mode-switch__button[aria-pressed="true"] {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

#panel-setup[data-task-response-mode="none"] #taskMathEngineFields,
#panel-setup[data-task-response-mode="radio"] #taskMathEngineFields,
#panel-setup[data-task-response-mode="mc"] #taskMathEngineFields {
  display: none !important;
}

body[data-host-mode="student-view"] .task-math-engine-runtime.mattemotor-card,
body[data-mode="student-view"] .task-math-engine-runtime.mattemotor-card,
body[data-app-mode="student"] .task-math-engine-runtime.mattemotor-card,
body[data-host-mode="student-view"] #panel-calculation.mattemotor-card,
body[data-mode="student-view"] #panel-calculation.mattemotor-card,
body[data-app-mode="student"] #panel-calculation.mattemotor-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* MODE C CLEAN: fjern interne og ytre rammer i student-view. */
body[data-host-mode="student-view"] .side > .card,
body[data-mode="student-view"] .side > .card,
body[data-app-mode="student"] .side > .card,
body[data-host-mode="student-view"] .grid.layout--sidebar > .card,
body[data-mode="student-view"] .grid.layout--sidebar > .card,
body[data-app-mode="student"] .grid.layout--sidebar > .card {
  border: none;
  box-shadow: none;
  background: transparent;
}

body[data-host-mode="student-view"] .card--examples .example-description-preview,
body[data-mode="student-view"] .card--examples .example-description-preview,
body[data-app-mode="student"] .card--examples .example-description-preview {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  font-size: var(--mv-student-font-base);
  line-height: var(--mv-student-line-height);
}

body[data-host-mode="student-view"] .card--examples .task-math-engine-runtime,
body[data-mode="student-view"] .card--examples .task-math-engine-runtime,
body[data-app-mode="student"] .card--examples .task-math-engine-runtime {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* Uten Mattemotor i Mode C: skjul runtime-kort og elevinput helt. */
body[data-host-mode="student-view"][data-mattemotor-panel-mode="hidden"] .card--examples .task-math-engine-runtime,
body[data-mode="student-view"][data-mattemotor-panel-mode="hidden"] .card--examples .task-math-engine-runtime,
body[data-app-mode="student"][data-mattemotor-panel-mode="hidden"] .card--examples .task-math-engine-runtime {
  display: none !important;
}

body[data-host-mode="student-view"] .card--examples .task-math-engine-runtime,
body[data-mode="student-view"] .card--examples .task-math-engine-runtime,
body[data-app-mode="student"] .card--examples .task-math-engine-runtime {
  --mm-runtime-task-font-size: var(--mv-student-font-base);
  --mm-runtime-task-line-height: var(--mv-student-line-height);
  --mm-choice-gap: calc(var(--mv-student-font-base) * 0.6);
  --mm-choice-control-size: calc(var(--mv-student-font-base) * 1.6);
  --mm-choice-font-base: var(--mv-student-font-base);
  --mm-choice-label-font-size: calc(var(--mv-student-font-base) * 0.9);
  --mm-choice-feedback-font-size: calc(var(--mv-student-font-base) * 0.8);
}

body[data-host-mode="student-view"] .card--examples .task-math-engine-runtime .mattemotor-task-display,
body[data-mode="student-view"] .card--examples .task-math-engine-runtime .mattemotor-task-display,
body[data-app-mode="student"] .card--examples .task-math-engine-runtime .mattemotor-task-display {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  font-size: var(--mm-runtime-task-font-size);
  line-height: var(--mm-runtime-task-line-height);
}

body[data-host-mode="student-view"] .card--examples .task-math-engine-runtime .mattemotor__history-item,
body[data-mode="student-view"] .card--examples .task-math-engine-runtime .mattemotor__history-item,
body[data-app-mode="student"] .card--examples .task-math-engine-runtime .mattemotor__history-item {
  border: 1px solid #d1d5db;
  box-shadow: none;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  font-size: var(--mm-runtime-task-font-size);
  line-height: var(--mm-runtime-task-line-height);
}

body[data-host-mode="student-view"] .card--examples .task-math-engine-runtime .mattemotor__history-math,
body[data-mode="student-view"] .card--examples .task-math-engine-runtime .mattemotor__history-math,
body[data-app-mode="student"] .card--examples .task-math-engine-runtime .mattemotor__history-math {
  font-size: var(--mm-runtime-task-font-size);
  line-height: var(--mm-runtime-task-line-height);
}

body[data-host-mode="student-view"] .side,
body[data-mode="student-view"] .side,
body[data-app-mode="student"] .side {
  min-height: 0;
}

body[data-host-mode="student-view"] .side .card--examples,
body[data-mode="student-view"] .side .card--examples,
body[data-app-mode="student"] .side .card--examples {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0 clamp(14px, 1.5vw, 20px);
}

body[data-host-mode="student-view"] .side .card--examples [data-task-text-description],
body[data-mode="student-view"] .side .card--examples [data-task-text-description],
body[data-app-mode="student"] .side .card--examples [data-task-text-description] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

body[data-host-mode="student-view"] .side .card--examples .example-description,
body[data-mode="student-view"] .side .card--examples .example-description,
body[data-app-mode="student"] .side .card--examples .example-description,
body[data-host-mode="student-view"] .side .card--examples .task-math-engine-runtime,
body[data-mode="student-view"] .side .card--examples .task-math-engine-runtime,
body[data-app-mode="student"] .side .card--examples .task-math-engine-runtime,
body[data-host-mode="student-view"] .side .card--examples .task-choice-runtime,
body[data-mode="student-view"] .side .card--examples .task-choice-runtime,
body[data-app-mode="student"] .side .card--examples .task-choice-runtime {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
}

body[data-host-mode="student-view"] .side .card--examples .example-description-preview,
body[data-mode="student-view"] .side .card--examples .example-description-preview,
body[data-app-mode="student"] .side .card--examples .example-description-preview {
  margin-top: 0;
}

body[data-host-mode="student-view"] .side .card--examples [data-task-check-host],
body[data-mode="student-view"] .side .card--examples [data-task-check-host],
body[data-app-mode="student"] .side .card--examples [data-task-check-host] {
  align-items: stretch;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: auto;
}

body[data-host-mode="student-view"] .side .card--examples [data-task-check-host] .status,
body[data-mode="student-view"] .side .card--examples [data-task-check-host] .status,
body[data-app-mode="student"] .side .card--examples [data-task-check-host] .status {
  order: 1;
}

body[data-host-mode="student-view"] .side .card--examples [data-task-check-host] [data-task-check-host-actions],
body[data-mode="student-view"] .side .card--examples [data-task-check-host] [data-task-check-host-actions],
body[data-app-mode="student"] .side .card--examples [data-task-check-host] [data-task-check-host-actions] {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: auto;
}

body[data-host-mode="student-view"] .side .card--examples .task-choice-runtime,
body[data-mode="student-view"] .side .card--examples .task-choice-runtime,
body[data-app-mode="student"] .side .card--examples .task-choice-runtime {
  margin-top: 0;
  padding-inline-start: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-host-mode="student-view"] .side .card--examples .task-choice-runtime__feedback,
body[data-mode="student-view"] .side .card--examples .task-choice-runtime__feedback,
body[data-app-mode="student"] .side .card--examples .task-choice-runtime__feedback {
  order: 9;
}

body[data-host-mode="student-view"] .side .card--examples .task-math-engine-runtime__input-row,
body[data-mode="student-view"] .side .card--examples .task-math-engine-runtime__input-row,
body[data-app-mode="student"] .side .card--examples .task-math-engine-runtime__input-row {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: transparent;
  z-index: 2;
}

body[data-host-mode="student-view"] .side .card--examples .task-choice-runtime__actions,
body[data-mode="student-view"] .side .card--examples .task-choice-runtime__actions,
body[data-app-mode="student"] .side .card--examples .task-choice-runtime__actions,
body[data-host-mode="student-view"] .side .card--examples [data-task-check-host-actions],
body[data-mode="student-view"] .side .card--examples [data-task-check-host-actions],
body[data-app-mode="student"] .side .card--examples [data-task-check-host-actions] {
  order: 10;
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: transparent;
  z-index: 2;
}

@media (max-width: 980px) {
  body.app-layout {
    --app-layout-figure-stage-min-block-size: clamp(260px, 42dvh, 420px);
    --app-layout-figure-stage-max-block-size: clamp(280px, 58dvh, 640px);
  }
}

.card--examples .mattemotor-fields {
  display: grid;
  gap: 14px;
}

.card--examples .mattemotor-fields[hidden] {
  display: none !important;
}

.card--examples .mattemotor-fields label {
  display: grid;
  gap: 6px;
  width: 100%;
  font-weight: 600;
  color: #374151;
}

.card--examples .task-math-optional-symbols {
  display: grid;
  gap: 8px;
}

.card--examples .task-math-optional-symbols__toggle {
  appearance: none;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.card--examples .task-math-optional-symbols__toggle::before {
  content: '▸';
  font-size: 0.8rem;
  line-height: 1;
  transform-origin: 45% 55%;
  transition: transform 0.15s ease;
}

.card--examples .task-math-optional-symbols__toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.card--examples .task-math-optional-symbols__toggle:hover {
  border-color: #94a3b8;
}

.card--examples .task-math-optional-symbols__toggle:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.card--examples .task-math-optional-symbols__toggle.has-value {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1e3a8a;
}

.card--examples .task-math-optional-symbols__panel {
  display: grid;
  gap: 8px;
}

.card--examples .task-math-optional-symbols__hint {
  margin: 0;
  font-size: 0.83rem;
  font-weight: 500;
  color: #64748b;
}

.card--examples .task-math-optional-symbols__field {
  display: grid;
  gap: 6px;
  font-weight: 600;
  color: #374151;
}

.card--examples .task-math-symbol-picker {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #070b15;
}

.card--examples .task-math-symbol-picker__group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card--examples .task-math-symbol-chip {
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #f8fafc;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.1;
  min-height: 34px;
  min-width: 34px;
  padding: 6px 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.card--examples .task-math-symbol-chip:hover {
  background: rgba(248, 250, 252, 0.16);
}

.card--examples .task-math-symbol-chip:active {
  transform: translateY(1px);
}

.card--examples .task-math-symbol-chip:focus-visible {
  outline: 2px solid #bfdbfe;
  outline-offset: 1px;
}

.card--examples .task-math-symbol-chip.is-selected,
.card--examples .task-math-symbol-chip[aria-pressed="true"] {
  background: rgba(248, 250, 252, 0.28);
  color: #ffffff;
}

.card--examples .task-math-symbol-chip[data-symbol-token="fraction"],
.card--examples .task-math-symbol-chip[data-symbol-token="vector"],
.card--examples .task-math-symbol-chip[data-symbol-token="power"],
.card--examples .task-math-symbol-chip[data-symbol-key="fraction"],
.card--examples .task-math-symbol-chip[data-symbol-key="vector"],
.card--examples .task-math-symbol-chip[data-symbol-key="power"] {
  color: transparent;
}

.card--examples .task-math-symbol-chip[data-symbol-token="fraction"]::after,
.card--examples .task-math-symbol-chip[data-symbol-token="vector"]::after,
.card--examples .task-math-symbol-chip[data-symbol-token="power"]::after,
.card--examples .task-math-symbol-chip[data-symbol-key="fraction"]::after,
.card--examples .task-math-symbol-chip[data-symbol-key="vector"]::after,
.card--examples .task-math-symbol-chip[data-symbol-key="power"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.card--examples .task-math-symbol-chip[data-symbol-token="fraction"]::after,
.card--examples .task-math-symbol-chip[data-symbol-key="fraction"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2.5' width='8' height='6' rx='1'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Crect x='8' y='15.5' width='8' height='6' rx='1'/%3E%3C/svg%3E");
}

.card--examples .task-math-symbol-chip[data-symbol-token="vector"]::after,
.card--examples .task-math-symbol-chip[data-symbol-key="vector"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cpath d='M16 3l4 4-4 4'/%3E%3Cpath d='M7 14l5 7 5-7'/%3E%3C/svg%3E");
}

.card--examples .task-math-symbol-chip[data-symbol-token="power"]::after,
.card--examples .task-math-symbol-chip[data-symbol-key="power"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='11.5' width='9' height='9' rx='1.1'/%3E%3Crect x='13' y='3.5' width='7.5' height='7.5' rx='1.1'/%3E%3C/svg%3E");
}

.card--examples .task-choice-editor {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.card--examples .task-choice-editor[hidden] {
  display: none !important;
}

.card--examples .task-choice-editor__heading {
  display: grid;
  gap: 2px;
}

.card--examples .task-choice-editor__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.card--examples .task-choice-editor__hint {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
}

.card--examples .task-choice-editor__layout {
  display: grid;
  gap: 6px;
}

.card--examples .task-choice-editor__layout-field {
  display: grid;
  gap: 6px;
  width: min(100%, 220px);
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
}

.card--examples .task-choice-editor__layout-select {
  min-height: 40px;
}

.card--examples .task-choice-editor__layout-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.card--examples .task-choice-editor__list {
  display: grid;
  gap: 8px;
}

.card--examples .task-choice-editor__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.card--examples .task-choice-editor__text {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.95rem;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
}

.card--examples .task-choice-editor__text:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.card--examples .task-choice-editor__correct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}

.card--examples .task-choice-editor__remove {
  appearance: none;
  border: none;
  background: transparent;
  color: #dc2626;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s, color .2s, background .2s;
}

.card--examples .task-choice-editor__remove:hover {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
}

.card--examples .task-choice-editor__remove:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.28);
  outline-offset: 2px;
  color: #b91c1c;
}

.card--examples .task-choice-editor__actions {
  display: flex;
  justify-content: flex-start;
}

.card--examples .task-choice-editor__add {
  min-height: 36px;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__heading {
  display: grid;
  gap: 4px;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__hint {
  margin: 0;
  font-size: 0.84rem;
  color: #64748b;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  padding-top: 10px;
  border-top: 1px solid #dbe4f0;
  margin-top: 2px;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__count-wrap {
  width: min(100%, 180px);
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__count {
  min-height: 40px;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__add,
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__generate {
  min-height: 40px;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__list {
  display: grid;
  gap: 10px;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "drag toggle main remove"
    ". . status remove";
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-main {
  grid-area: main;
  min-width: 0;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step.is-dragging {
  opacity: .65;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step.drop-before {
  box-shadow: inset 0 3px 0 #2563eb;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step.drop-after {
  box-shadow: inset 0 -3px 0 #2563eb;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step[data-validation-code="ok"] {
  border-color: #86efac;
  background: #fbfffc;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step[data-validation-code="feil_svar"],
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step[data-validation-code="ugyldig_format"],
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step[data-validation-code="tom"] {
  border-color: #fecaca;
  background: #fffafa;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__type-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-area: toggle;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  background: transparent;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__type-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__drag-handle {
  grid-area: drag;
  appearance: none;
  border: none;
  background: none;
  padding: 4px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #9ca3af;
  flex-shrink: 0;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__drag-handle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  color: #2563eb;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__drag-handle:active {
  cursor: grabbing;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__drag-handle-icon {
  font-size: 16px;
  line-height: 1;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__editor-fields,
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__text-wrap,
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__math-wrap {
  min-width: 0;
  width: 100%;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 9px 12px;
  font: inherit;
  color: #0f172a;
  background: #fff;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__textarea:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__math-field {
  min-height: 40px;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__math-field.mattemotor-field {
  border-width: 1px;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 1rem;
  min-height: 40px;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-status,
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__summary {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-status {
  grid-area: status;
  min-width: 0;
  min-height: 0;
  display: block;
  padding: 0 2px 0 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #475569;
  box-sizing: border-box;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-status[data-empty="true"] {
  display: none;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__remove {
  grid-area: remove;
  appearance: none;
  border: none;
  background: transparent;
  color: #dc2626;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s, color .2s, background .2s;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__remove:hover {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__remove:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.28);
  outline-offset: 2px;
  color: #b91c1c;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__remove:disabled {
  color: #cbd5e1;
  background: transparent;
  cursor: not-allowed;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-status[data-status-code="ok"],
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__summary[data-status-code="ok"] {
  color: #166534;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-status[data-status-code="text"] {
  color: #64748b;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-status[data-status-code="feil_svar"],
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-status[data-status-code="ugyldig_format"],
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-status[data-status-code="tom"],
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__summary[data-status-code="feil_svar"],
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__summary[data-status-code="ugyldig_format"],
:is(.card--examples, .task-math-engine-setup) .task-solution-editor__summary[data-status-code="tom"] {
  color: #b91c1c;
}

:is(.card--examples, .task-math-engine-setup) .task-solution-editor__summary {
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef6ff;
  color: #0f172a;
}

@media (max-width: 720px) {
  :is(.card--examples, .task-math-engine-setup) .task-solution-editor__step {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  :is(.card--examples, .task-math-engine-setup) .task-solution-editor__step-status {
    grid-column: auto;
  }
}

.card--examples .mattemotor-input,
.card--examples .mattemotor-field {
  width: 100%;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  padding: 12px;
  font-size: 1.08rem;
  background: #fff;
  box-sizing: border-box;
}

.card--examples .mattemotor-field {
  min-height: 64px;
}

.card--examples [data-task-math-term-row][data-validation-code="ok"] {
  color: #166534;
}

.card--examples [data-task-math-term-row][data-validation-code="feil_svar"],
.card--examples [data-task-math-term-row][data-validation-code="ugyldig_format"] {
  color: #991b1b;
}

.card--examples .mattemotor-field[data-validation-code="ok"],
.card--examples input[data-validation-code="ok"] {
  border-color: #86efac;
  background: #f0fdf4;
  box-shadow: 0 0 0 1px rgba(134, 239, 172, 0.3);
}

.card--examples math-field.mattemotor-field[data-validation-code="ok"]::part(container),
.card--examples math-field.mattemotor-field[data-validation-code="ok"]::part(content) {
  background: #f0fdf4;
}

.card--examples .mattemotor-field[data-validation-code="feil_svar"],
.card--examples .mattemotor-field[data-validation-code="ugyldig_format"],
.card--examples input[data-validation-code="feil_svar"],
.card--examples input[data-validation-code="ugyldig_format"] {
  border-color: #fca5a5;
  background: #fef2f2;
  box-shadow: 0 0 0 1px rgba(252, 165, 165, 0.3);
}

.card--examples math-field.mattemotor-field[data-validation-code="feil_svar"]::part(container),
.card--examples math-field.mattemotor-field[data-validation-code="feil_svar"]::part(content),
.card--examples math-field.mattemotor-field[data-validation-code="ugyldig_format"]::part(container),
.card--examples math-field.mattemotor-field[data-validation-code="ugyldig_format"]::part(content) {
  background: #fef2f2;
}

.card--examples .task-math-engine-runtime {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  --mm-runtime-task-font-size: 14px;
  --mm-runtime-task-line-height: 1.5;
}

.card--examples .task-math-engine-runtime[hidden],
.card--examples #panel-calculation[hidden] {
  display: none !important;
}


.card--examples .task-math-engine-runtime .mattemotor-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.card--examples .task-math-engine-runtime .mattemotor-task-display {
  display: block;
  border: 1px solid var(--card-border);
  border-radius: var(--control-radius);
  padding: 12px 14px;
  font-size: var(--mm-runtime-task-font-size);
  line-height: var(--mm-runtime-task-line-height);
  color: var(--text-color);
  background: #fff;
  overflow-x: auto;
}

.card--examples .task-math-engine-runtime__fallback {
  margin: 0;
  color: #9a3412;
  font-weight: 600;
}

.card--examples .task-math-engine-runtime__input-wrap {
  position: relative;
  margin-top: 8px;
}

.card--examples .task-math-engine-runtime__input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  box-sizing: border-box;
  font-size: var(--mm-runtime-task-font-size);
  line-height: 1.25;
}

.card--examples .task-math-engine-runtime #student-input.mattemotor-field,
.card--examples .task-math-engine-runtime .task-math-engine-runtime__input,
.card--examples .task-math-engine-runtime .mattemotor__history-math {
  font-size: var(--mm-runtime-task-font-size);
  line-height: var(--mm-runtime-task-line-height);
}

.card--examples .task-math-engine-runtime #student-input.mattemotor-field::part(content),
.card--examples .task-math-engine-runtime #student-input.mattemotor-field::part(container),
.card--examples .task-math-engine-runtime .mattemotor__history-math::part(content),
.card--examples .task-math-engine-runtime .mattemotor__history-math::part(container) {
  font-size: var(--mm-runtime-task-font-size);
}

body[data-host-mode="student-view"] #student-input.mattemotor-field:focus,
body[data-mode="student-view"] #student-input.mattemotor-field:focus,
body[data-app-mode="student"] #student-input.mattemotor-field:focus,
body[data-host-mode="student-view"] #student-input.mattemotor-field:focus-within,
body[data-mode="student-view"] #student-input.mattemotor-field:focus-within,
body[data-app-mode="student"] #student-input.mattemotor-field:focus-within {
  border-color: #155eef;
  outline: none !important;
  box-shadow: none;
}

.card--examples .task-math-engine-runtime .mattemotor-input-label {
  position: absolute;
  left: 14px;
  top: -11px;
  background: #fff;
  padding: 0 8px;
  color: #15803d;
  font-weight: 700;
  font-size: 0.85rem;
}

body[data-host-mode="student-view"] .card--examples .task-math-engine-runtime .mattemotor-input-label,
body[data-mode="student-view"] .card--examples .task-math-engine-runtime .mattemotor-input-label,
body[data-app-mode="student"] .card--examples .task-math-engine-runtime .mattemotor-input-label {
  display: none !important;
}

body[data-host-mode="student-view"] .card--examples .task-math-engine-runtime__input-wrap:not(:focus-within) #student-input.mattemotor-field,
body[data-mode="student-view"] .card--examples .task-math-engine-runtime__input-wrap:not(:focus-within) #student-input.mattemotor-field,
body[data-app-mode="student"] .card--examples .task-math-engine-runtime__input-wrap:not(:focus-within) #student-input.mattemotor-field {
  opacity: 1;
  border-color: #2563eb;
  background: #fff;
  color: #0f172a;
  caret-color: auto;
}

body[data-host-mode="student-view"] .card--examples .task-math-engine-runtime__input-wrap:not(:focus-within) .task-math-engine-runtime__symbol-bar,
body[data-mode="student-view"] .card--examples .task-math-engine-runtime__input-wrap:not(:focus-within) .task-math-engine-runtime__symbol-bar,
body[data-app-mode="student"] .card--examples .task-math-engine-runtime__input-wrap:not(:focus-within) .task-math-engine-runtime__symbol-bar {
  display: none !important;
}


.card--examples .task-math-engine-runtime__feedback {
  margin: 10px 0;
  min-height: 20px;
  font-weight: 600;
}

.card--examples .task-math-engine-runtime__feedback:empty {
  display: none;
}

.card--examples .task-math-engine-runtime__history:empty {
  display: none;
}
.card--examples .task-math-engine-runtime__history {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.card--examples .task-math-engine-runtime__history li,
.card--examples .task-math-engine-runtime .mattemotor__history-item {
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.card--examples .task-math-engine-runtime .mattemotor__history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.card--examples .task-math-engine-runtime .mattemotor__history-item[data-code="rødt"] {
  border-color: #fca5a5;
  background: #fef2f2;
}

.card--examples .task-math-engine-runtime .mattemotor__history-item[data-code="pokal"] {
  border-color: #facc15;
  background: #fefce8;
}

.card--examples .task-math-engine-runtime .mattemotor__history-math {
  border: none;
  background: transparent;
  font-size: var(--mm-runtime-task-font-size);
  line-height: var(--mm-runtime-task-line-height);
  flex: 1;
}

.mattemotor__task-start-token {
  cursor: pointer;
  border-radius: 8px;
  pointer-events: auto;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.mattemotor__task-start-token * {
  pointer-events: none;
}

.card--examples .task-math-engine-runtime .math-vis-description-math.mattemotor__task-start-token,
.mattemotor-task-display .math-vis-description-math.mattemotor__task-start-token {
  display: inline-flex;
  align-items: center;
  padding-inline: 4px;
  margin-inline: 2px;
}

.mattemotor__task-start-token:hover {
  background: color-mix(in srgb, var(--focus-color, #155eef) 10%, transparent);
}

.mattemotor__task-start-token:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--focus-color, #155eef) 14%, transparent);
  box-shadow: 0 0 0 2px var(--focus-color, #155eef);
}



.card--examples .task-math-engine-runtime {
  padding: 18px;
  border-radius: 18px;
  background: #f3f4f6;
}

.card--examples .task-math-engine-runtime .mattemotor-header {
  margin-bottom: 18px;
}

.card--examples .task-math-engine-runtime .mattemotor-task-display {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.card--examples .task-math-engine-runtime__history {
  gap: 12px;
}

.card--examples .task-math-engine-runtime .mattemotor__history-item {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 18px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.card--examples .task-math-engine-runtime .mattemotor__history-item[data-code="rødt"],
.card--examples .task-math-engine-runtime .mattemotor__history-item[data-code="pokal"] {
  border-color: #e5e7eb;
  background: #ffffff;
}


.card--examples .task-math-engine-runtime #history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.card--examples .task-math-engine-runtime #history-list li::marker {
  content: '';
}

.card--examples .task-math-engine-runtime .mattemotor__history-status {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  border: 3px solid #9ca3af;
  color: #4b5563;
  background: #fff;
}

.card--examples .task-math-engine-runtime .mattemotor__history-status--grønt {
  border-color: #22c55e;
  color: #16a34a;
  background: #f0fdf4;
}

.card--examples .task-math-engine-runtime .mattemotor__history-status--rødt {
  border-color: #d44251;
  color: #8a2330;
  background: #f8c9cf;
}

.card--examples .task-math-engine-runtime .mattemotor__history-status--pokal {
  border-color: #facc15;
  color: #ca8a04;
  background: #fffbeb;
  font-size: 1.1rem;
}

.card--examples .task-math-engine-runtime .mattemotor__history-status--key {
  border-color: #d6b35a;
  color: #8a6f34;
  background: #fff8dd;
}

.card--examples .task-math-engine-runtime .mattemotor__history-math {
  font-size: var(--mm-runtime-task-font-size);
}

.card--examples .task-math-engine-runtime math-field::part(menu-toggle),
.card--examples .task-math-engine-runtime math-field::part(virtual-keyboard-toggle),
.card--examples .task-math-engine-runtime math-field::part(assistant),
.task-math-engine-setup math-field::part(menu-toggle),
.task-math-engine-setup math-field::part(virtual-keyboard-toggle),
.task-math-engine-setup math-field::part(assistant) {
  display: none;
}

body[data-app="mattemotor"]:not([data-task-text-shell="shared"]) #panel-calculation:not(.is-active),
body[data-app="mattemotor"]:not([data-task-text-shell="shared"]) #panel-choice-calculation:not(.is-active) {
  display: none !important;
}

.task-choice-runtime {
  --mm-choice-gap: 14px;
  --mm-choice-control-size: 2rem;
  --mm-choice-columns: 1;
  --mm-choice-font-base: 1.12rem;
  --mm-choice-label-font-size: 1.02rem;
  --mm-choice-feedback-font-size: 0.9rem;
  margin-top: 10px;
  display: grid;
  gap: var(--mm-choice-gap);
  padding: 0;
  border-radius: 18px;
  background: transparent;
  border: none;
  container-type: inline-size;
}

.task-choice-runtime[hidden] {
  display: none !important;
}

.task-choice-runtime__header {
  display: grid;
  gap: 4px;
}

.task-choice-runtime__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
}

.task-choice-runtime__subtitle {
  margin: 0;
  font-size: 0.86rem;
  color: #334155;
}

.task-choice-runtime__prompt {
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: var(--mm-choice-font-base);
  line-height: var(--mv-student-line-height, 1.35);
  color: #0f172a;
}

.task-choice-runtime__options {
  display: grid;
  gap: var(--mm-choice-gap);
  grid-template-columns: repeat(var(--mm-choice-columns), minmax(0, 1fr));
}

.task-choice-runtime__options > .task-choice-runtime__option {
  display: grid;
  grid-template-columns: var(--mm-choice-control-size) minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 12px;
  border: 1.5px solid #8690a0;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.task-choice-runtime__options > .task-choice-runtime__option:hover {
  border-color: #6b7280;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.task-choice-runtime__options > .task-choice-runtime__option:focus-within {
  border-color: #374151;
  box-shadow: 0 0 0 2px rgba(55, 65, 81, 0.2);
}

.task-choice-runtime__options > .task-choice-runtime__option[data-selected="true"] {
  border-color: #4b5563;
}

.task-choice-runtime__options > .task-choice-runtime__option[data-correct="true"] {
  border-color: #39845f;
  background: #f6fbf8;
}

.task-choice-runtime__options > .task-choice-runtime__option[data-incorrect="true"] {
  border-color: #b3414b;
  background: #fff7f7;
}

.task-choice-runtime__index {
  display: none;
}

.task-choice-runtime__option input[type="checkbox"],
.task-choice-runtime__option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  grid-column: 1;
  justify-self: start;
  align-self: center;
  margin: 0;
  width: var(--mm-choice-control-size);
  height: var(--mm-choice-control-size);
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  border: 2px solid #4b5563;
  background: #fff;
  cursor: pointer;
}

.task-choice-runtime__option input[type="checkbox"] {
  border-radius: 10px;
}

.task-choice-runtime__option input[type="radio"] {
  border-radius: 999px;
}

.task-choice-runtime__option input[type="checkbox"]::before,
.task-choice-runtime__option input[type="radio"]::before {
  content: '';
  display: block;
  transform-origin: center;
  transition: transform 0.12s ease;
}

.task-choice-runtime__option input[type="checkbox"]::before {
  width: 0.55rem;
  height: 0.32rem;
  border: solid #fff;
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg) scale(0);
}

.task-choice-runtime__option input[type="radio"]::before {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: #fff;
  transform: scale(0);
}

.task-choice-runtime__option input[type="checkbox"]:checked,
.task-choice-runtime__option input[type="radio"]:checked {
  border-color: #1f2937;
  background: #1f2937;
}

.task-choice-runtime__option input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}

.task-choice-runtime__option input[type="radio"]:checked::before {
  transform: scale(1);
}

.task-choice-runtime__option input[type="checkbox"]:focus-visible,
.task-choice-runtime__option input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(55, 65, 81, 0.2);
}

.task-choice-runtime__label {
  grid-column: 2;
  justify-self: stretch;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: var(--mm-choice-label-font-size);
  line-height: 1.45;
  color: #0f172a;
  text-align: left;
}

.task-choice-runtime__label p {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.task-choice-runtime__label p + p {
  margin-top: 6px;
}

.task-choice-runtime__label .katex-display {
  display: inline-block;
  margin: 0;
  text-align: left;
}

.task-choice-runtime__label .katex-display > .katex {
  display: inline-block;
  text-align: left;
}

.task-choice-runtime__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.task-choice-runtime__feedback {
  margin: 0;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  background: #f8fafc;
  color: #1e293b;
  font-size: var(--mm-choice-feedback-font-size);
  font-weight: 600;
}

.task-choice-runtime__feedback[data-tone="success"] {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.task-choice-runtime__feedback[data-tone="warning"] {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

.task-choice-runtime__feedback[data-tone="error"] {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.task-choice-runtime__empty {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}


body[data-host-mode="student-view"] .task-choice-runtime,
body[data-mode="student-view"] .task-choice-runtime,
body[data-app-mode="student"] .task-choice-runtime {
  margin-top: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-inline-start: clamp(8px, 1.2vw, 14px);
}

.card--examples #task-validation-status {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-weight: 600;
}

.card--examples #task-validation-status[data-status-code="ok"],
.card--examples #task-validation-status[data-status-code="klar"] {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.card--examples #task-validation-status[data-status-code="feil_svar"],
.card--examples #task-validation-status[data-status-code="ugyldig_format"] {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.card--examples #task-validation-save-warning {
  margin-top: 8px;
  color: #991b1b;
  font-weight: 600;
}

.card--examples .example-description > label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card--examples .example-description > label::after {
  content: '';
  display: none;
}

.card--examples .example-description.example-description--collapsed {
  gap: 0;
  padding: 10px;
  border: 1px dashed #c7d2fe;
  border-radius: var(--control-radius);
  background: #f8fafc;
}

.card--examples .example-description.example-description--collapsed > label::after {
  display: none;
}

.card--examples .example-description.example-description--collapsed textarea {
  min-height: 0;
  height: 1px;
  padding: 0;
  margin: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  resize: none;
}

.task-panel {
  display: none;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.side .task-panel[hidden] {
  display: none !important;
}

body[data-app-mode="student"] .side .task-panel,
body[data-show-task-text-panel="true"] .side .task-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-panel__body {
  display: grid;
  gap: 12px;
}

.task-panel__preview {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.08);
  cursor: text;
  min-height: 120px;
  line-height: 1.6;
  white-space: pre-wrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.task-panel__preview[hidden] {
  display: none !important;
}

.task-panel__preview:focus-visible {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.task-panel__preview[data-placeholder="true"] {
  display: flex;
  color: #6b7280;
}

.task-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body[data-show-task-text-panel="false"] .task-panel__actions {
  display: none;
}

body[data-show-author-controls="false"] [data-edit-only]:not([data-host-hide-behavior="preserve-space"]),
body[data-show-author-controls="false"] .task-panel__actions {
  display: none !important;
}

body[data-app-mode="author"][data-author-layout-mode="task-view"] .task-panel__actions {
  display: flex !important;
}

.task-panel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.task-panel__toggle-button {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.task-panel__toggle-button[aria-pressed="true"] {
  background: #1d4ed8;
  color: #fff;
}

.task-panel__toggle-button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.task-text-editable {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-color, #1f2937);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  resize: vertical;
  transition: all 0.2s ease;
}

.task-panel textarea[hidden] {
  display: none;
}

.task-text-editable:hover {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}

.task-text-editable:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.math-vis-description-rendered {
  display: block;
}

.example-description .task-math-engine {
  margin-top: 8px;
}

.example-description #taskMathEngineFields > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.example-description #taskMathEngineFields {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.example-description #math-symbols,
.example-description input#taskMathEngineSymbols,
.example-description input#math-symbols,
.example-description math-field#start-term,
.example-description math-field#answer-term,
.example-description input#start-term,
.example-description input#answer-term {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.example-description input#taskMathEngineSymbols,
.example-description input#math-symbols,
.example-description math-field#start-term,
.example-description math-field#answer-term,
.example-description input#start-term,
.example-description input#answer-term {
  min-height: 44px;
}

.example-description input#taskMathEngineSymbols,
.example-description input#math-symbols,
.example-description input#start-term,
.example-description input#answer-term {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

.math-vis-answerbox {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #c7d2fe;
  background: #e0e7ff;
  color: #1e3a8a;
  font-size: 0.95em;
  vertical-align: middle;
}

.math-vis-answerbox--input {
  padding: 0;
  border: none;
  background: none;
  gap: 4px;
}

.math-vis-answerbox + .math-vis-answerbox {
  margin-left: 6px;
}

.math-vis-answerbox__prompt {
  font-weight: 600;
  color: inherit;
}

.math-vis-answerbox__input-wrap {
  display: inline-flex;
  align-items: center;
}

.math-vis-answerbox__input {
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 4px 8px;
  min-width: 72px;
  font: inherit;
  color: var(--text-color);
  background: #fff;
}

.math-vis-answerbox--input .math-vis-answerbox__input {
  min-width: 0;
}

.math-vis-answerbox__input:focus {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

.math-vis-answerbox__status {
  display: inline-flex;
  align-items: center;
  min-width: 1.5em;
  font-size: 0.85em;
  color: #4338ca;
}

.math-vis-answerbox--input .math-vis-answerbox__status {
  min-width: 0;
}

.math-vis-answerbox--correct {
  border-color: #34d399;
  background: #ecfdf5;
  color: #047857;
}

.math-vis-answerbox--correct .math-vis-answerbox__status {
  color: #047857;
}

.math-vis-answerbox--incorrect {
  border-color: #fb923c;
  background: #fff7ed;
  color: #b45309;
}

.math-vis-answerbox--incorrect .math-vis-answerbox__status {
  color: #c2410c;
}

.math-vis-answerbox--empty .math-vis-answerbox__status {
  color: #6b7280;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: 24px max-content 44px;
  gap: 4px;
  align-items: center;
}

.legend {
  font-weight: 600;
  font-size: 13px;
  color: var(--heading-color);
  margin-top: 8px;
}

.radio-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.tight {
  padding: 4px 8px;
  width: 44px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #3b82f6;
}

.sortering__figure {
  position: relative;
  padding: 24px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.sortering__items {
  position: relative;
  width: 100%;
  min-height: 280px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
  overflow-x: auto;
}

.sortering__items[data-direction="vertikal"] {
  justify-content: flex-start;
}

.sortering__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  min-width: 120px;
  min-height: 120px;
  border-radius: 16px;
  border: 2px solid var(--sortering-item-outline, #0f172a);
  background: var(--sortering-item-background, #ffffff);
  color: var(--sortering-item-text, #111827);
  box-shadow: none;
  cursor: grab;
  user-select: none;
  transform: scale(1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sortering__items[data-hide-outline="true"] .sortering__item {
  border-color: transparent;
  box-shadow: none;
}

.sortering__item:not(.sortering__item--editable):not(.sortering__item--dragging):hover,
.sortering__item:not(.sortering__item--editable):not(.sortering__item--dragging):focus-visible {
  transform: scale(0.96);
}

.sortering__item--editable {
  align-items: stretch;
  justify-content: flex-start;
  cursor: default;
  user-select: text;
  padding: 0;
  overflow: hidden;
}

.sortering__item--editable .sortering__item-content {
  display: none;
}

.sortering__items[data-mode="task"] .sortering__item {
  flex: 1 1 0;
}

.sortering__items[data-mode="task"][data-direction="vertikal"] .sortering__item {
  width: 100%;
}

.sortering__item--task {
  min-height: 0;
  padding: 16px;
}

.sortering__item--task-text .sortering__item-content {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
}

.sortering__item--task-text .sortering__item-description {
  font-size: inherit;
}

.sortering__item--task-text .sortering__item-description .katex {
  font-size: 1em;
}

.sortering__item--dragging {
  cursor: grabbing;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.22);
  border-color: #93c5fd;
  z-index: 3;
  position: absolute;
}

.sortering__item--placeholder {
  box-sizing: border-box;
  border: 2px dashed #93c5fd;
  background: rgba(147, 197, 253, 0.18);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.4);
  border-radius: 16px;
  pointer-events: none;
}

.sortering__item--focus,
.sortering__item--active {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.sortering__item-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--sortering-item-text, #0f172a);
}

.sortering__item-image {
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
  margin: 0 auto;
}

.sortering__item-description {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
}

.sortering__skia-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--control-radius, 10px);
  border: 2px solid transparent;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sortering__skia-button:hover,
.sortering__skia-button:focus {
  border-color: #2563eb;
}

.sortering__skia-button--active {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1e3a8a;
}

.sortering__item-editor {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.sortering__figure[data-editor-mode="edit"] .sortering__item--editable .sortering__item-editor,
.sortering__item--editable .sortering__item-editor {
  width: 100%;
  height: 100%;
  display: flex;
}

.sortering__item-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  box-sizing: border-box;
}

.sortering__item--editable .sortering__item-editor-panel {
  border-radius: inherit;
}

.sortering__item-editor-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sortering__item-editor-label {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}

.sortering__item-editor-panel input,
.sortering__item-editor-panel select,
.sortering__item-editor-panel textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 6px 8px;
  font-size: 13px;
  color: #111827;
  background: #ffffff;
  box-sizing: border-box;
}

.sortering__item-editor-panel input:focus,
.sortering__item-editor-panel select:focus,
.sortering__item-editor-panel textarea:focus {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
  border-color: #2563eb;
}

.sortering__item-editor-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sortering__item-editor-text[data-mode='preview'] .sortering__item-editor-textarea {
  display: none;
}

.sortering__item-editor-text[data-mode='edit'] .sortering__item-editor-preview {
  display: none;
}

.sortering__item-editor-preview {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 8px 10px;
  min-height: 72px;
  font-size: 14px;
  line-height: 1.4;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  text-align: left;
}

.sortering__item-editor-preview:focus {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
  border-color: #2563eb;
}

.sortering__item-editor-preview--empty {
  color: #6b7280;
  font-style: italic;
}

.sortering__item-editor-preview .katex {
  font-size: 20px;
  pointer-events: none;
}

@media (max-width: 640px) {
  :root {
    --gap: 12px;
  }

  body {
    padding: 0 8px;
    background: #fff !important;
  }

  .wrap {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  .grid {
    gap: var(--gap);
  }

  .card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 12px;
    gap: 10px;
  }
}