body.automata-tool-page #app-content > .page,
body.automata-tool-page #app-content .hero,
body.automata-tool-page .automata-tool-shell {
  width: 100%;
  max-width: none;
  min-width: 0;
}

body.automata-tool-page #app-content > .page {
  margin-inline: 0;
}

.automata-tool-shell {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(122, 150, 198, 0.36);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(11, 28, 56, 0.94), rgba(5, 15, 31, 0.96));
  box-shadow: inset 0 1px 0 rgba(210, 231, 255, 0.06), 0 18px 40px rgba(1, 8, 22, 0.22);
}

.automata-tool-shell [hidden] {
  display: none !important;
}

.automata-tool-header,
.automata-workspace-status,
.automata-task-runtime,
.automata-task-area,
.automata-interaction-area,
.automata-evaluation-area {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
  padding: clamp(16px, 2vw, 24px);
}

.automata-tool-header,
.automata-workspace-status,
.automata-task-runtime,
.automata-task-area,
.automata-interaction-area,
.automata-evaluation-area,
.automata-mode-tabs {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.automata-tool-header {
  border-top: 0;
}

.automata-tool-header > *,
.automata-task-area h2,
.automata-area-heading > *,
.automata-panel-heading h3,
.automata-inspector h3,
.automata-derived-area h3,
.automata-trace-section h3 {
  margin: 0;
}

.automata-tool-header__eyebrow,
.automata-area-eyebrow {
  color: rgba(203, 216, 238, 0.78);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.automata-tool-header h2,
.automata-task-area h2,
.automata-area-heading h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

.automata-tool-header p:not(.automata-tool-header__eyebrow),
.automata-task-area p,
.automata-panel-heading p,
.automata-control-note {
  margin: 0;
  color: rgba(220, 231, 249, 0.84);
}

.automata-workspace-status {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding-block: 12px;
  background: rgba(2, 10, 23, 0.22);
}

.automata-workspace-status > div {
  display: grid;
  gap: 2px;
}

.automata-workspace-status span {
  color: rgba(203, 216, 238, 0.76);
  font-size: 0.84rem;
}

.automata-workspace-status p {
  margin: 0;
  color: rgba(220, 231, 249, 0.92);
  text-align: right;
}

.automata-task-area {
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  align-items: start;
}

.automata-task-area > div:first-child {
  display: grid;
  gap: 7px;
}

.automata-task-runtime {
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  align-items: start;
  background: rgba(2, 10, 23, 0.16);
}

.automata-task-runtime > div:first-child,
.automata-task-selectors,
.automata-task-brief,
.automata-task-selected,
.automata-task-actions,
.automata-task-actionbar,
.automata-task-evaluation {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.automata-task-selectors {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automata-task-selectors .ui-form-group {
  margin: 0;
}

.automata-task-runtime > .automata-task-free-status,
.automata-task-runtime > .automata-task-selected,
.automata-task-runtime > .automata-task-brief,
.automata-task-runtime > .automata-task-actions {
  grid-column: 1 / -1;
}

.automata-task-free-status,
.automata-task-meta,
.automata-task-criteria {
  margin: 0;
  color: rgba(220, 231, 249, 0.84);
}

.automata-task-brief {
  padding: var(--space-4);
  border-left: 3px solid rgba(115, 240, 191, 0.78);
  background: rgba(115, 240, 191, 0.07);
}

.automata-task-brief h3,
.automata-task-selected h3,
.automata-task-evaluation h3 {
  margin: 0;
}

.automata-task-brief__text {
  margin: 0;
  text-align: justify;
}

.automata-task-disclosure {
  padding: 9px 11px;
  border: 1px solid rgba(145, 183, 244, 0.26);
  border-radius: 8px;
  background: rgba(4, 15, 33, 0.24);
}

.automata-task-disclosure summary {
  cursor: pointer;
  font-weight: 800;
}

.automata-task-disclosure p {
  margin: 9px 0 0;
}

.automata-task-badge {
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid rgba(244, 213, 141, 0.8);
  border-radius: 999px;
  color: #fff2c3;
  background: rgba(244, 213, 141, 0.12);
  font-size: 0.78rem;
  font-weight: 900;
}

.automata-task-actions,
.automata-task-actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: clamp(16px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(2, 10, 23, 0.2);
}

.automata-task-evaluation {
  padding: clamp(16px, 2vw, 24px);
  border-top: 1px solid rgba(115, 240, 191, 0.35);
  border-left: 3px solid rgba(115, 240, 191, 0.78);
  background: rgba(115, 240, 191, 0.07);
}

.automata-task-evaluation p {
  margin: 0;
}

.automata-task-material,
.automata-task-response {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid rgba(145, 183, 244, 0.28);
  border-radius: 10px;
  background: rgba(4, 15, 33, 0.28);
}

.automata-task-material h3,
.automata-task-response h3,
.automata-task-response h4,
.automata-task-material p,
.automata-task-response p {
  margin: 0;
}

.automata-task-response-table {
  overflow-x: auto;
}

.automata-task-response-table table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
}

.automata-task-response-table th,
.automata-task-response-table td {
  padding: 8px;
  border: 1px solid rgba(145, 183, 244, 0.22);
  text-align: left;
  vertical-align: top;
}

.automata-task-response-table td .ui-select,
.automata-task-response-table td .ui-input {
  width: 100%;
}

.automata-task-example {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid rgba(145, 183, 244, 0.28);
  border-radius: 8px;
}

@media (max-width: 620px) {
  .automata-task-material,
  .automata-task-response { padding: var(--space-3); }
  .automata-task-response-table table { min-width: 34rem; }
  .automata-task-example { grid-template-columns: minmax(0, 1fr); }
}

.automata-compact-controls,
.automata-construction-head,
.automata-output-alphabet,
.automata-more-actions__content,
.automata-toolbar,
.automata-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.automata-compact-controls .ui-form-group,
.automata-construction-head .ui-form-group,
.automata-more-actions__content .ui-form-group,
.automata-batch-disclosure .ui-form-group,
.automata-inspector .ui-form-group,
.automata-simulation-grid .ui-form-group {
  min-width: min(100%, 13rem);
  margin: 0;
}

.automata-compact-controls .automata-control-note {
  flex-basis: 100%;
  font-size: 0.84rem;
}

.automata-mode-tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  padding: 4px clamp(16px, 2vw, 24px);
  background: rgba(2, 10, 23, 0.26);
}

.automata-tool-shell button.automata-mode-tab {
  appearance: none;
  position: relative;
  flex: 1 1 0;
  min-width: 10rem;
  min-height: 44px;
  border: 0 !important;
  border-inline-start: 1px solid rgba(145, 183, 244, 0.24) !important;
  background: transparent !important;
  color: #dceaff !important;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
}

.automata-tool-shell button.automata-mode-tab:first-child {
  border-inline-start: 0;
}

.automata-tool-shell button.automata-mode-tab[aria-selected="true"] {
  color: #fff !important;
  background: rgba(32, 82, 151, 0.92) !important;
  box-shadow: inset 0 -3px 0 #d8ebff !important;
}

.automata-tool-shell button.automata-mode-tab:focus-visible,
.automata-toolbar .ui-button:focus-visible {
  outline: 3px solid #f4d58d;
  outline-offset: 2px;
}

.automata-interaction-area,
.automata-evaluation-area {
  background: rgba(2, 10, 23, 0.1);
}

.automata-area-heading {
  display: grid;
  gap: 4px;
}

.automata-construction-head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.automata-formal-brief {
  display: grid;
  min-width: min(100%, 18rem);
  gap: 4px;
  padding: 8px 11px;
  border-left: 3px solid rgba(145, 183, 244, 0.62);
  background: rgba(255, 255, 255, 0.04);
  color: #eaf2ff;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.automata-formal-brief span {
  color: rgba(220, 231, 249, 0.82);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.86rem;
}

.automata-more-actions,
.automata-import-disclosure,
.automata-batch-disclosure {
  min-width: min(100%, 14rem);
}

.automata-more-actions summary,
.automata-import-disclosure summary,
.automata-batch-disclosure summary {
  cursor: pointer;
  font-weight: 800;
}

.automata-more-actions__content,
.automata-import-disclosure,
.automata-batch-disclosure {
  padding: var(--space-3);
  border: 1px solid rgba(145, 183, 244, 0.3);
  border-radius: 9px;
  background: rgba(4, 15, 33, 0.34);
}

.automata-more-actions__content {
  margin-top: 10px;
}

.automata-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(16rem, 0.85fr);
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
  margin-top: var(--space-4);
}

.automata-diagram-panel,
.automata-inspector,
.automata-derived-area > div,
.automata-simulation-grid,
.automata-trace-section {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid rgba(145, 183, 244, 0.28);
  border-radius: 10px;
  background: rgba(4, 15, 33, 0.3);
}

.automata-diagram-panel {
  display: grid;
  min-height: 29rem;
  gap: var(--space-3);
}

.automata-panel-heading {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.automata-panel-heading > div:first-child {
  display: grid;
  gap: 4px;
}

.automata-toolbar {
  align-items: center;
}

.automata-toolbar .ui-button {
  min-height: 34px;
  padding-inline: 9px;
  font-size: 0.83rem;
}

.automata-toolbar .ui-button.is-active {
  color: #fff;
  border-color: rgba(216, 235, 255, 0.78);
  background: rgba(32, 82, 151, 0.92);
}

.automata-toolbar__input {
  width: 5.5rem;
  min-height: 34px;
}

.automata-transition-output-label {
  color: rgba(220, 231, 249, 0.84);
  font-size: 0.8rem;
  font-weight: 800;
}

.automata-canvas-wrap {
  min-width: 0;
  min-height: 22rem;
  overflow: auto;
  border: 1px solid rgba(145, 183, 244, 0.3);
  border-radius: 8px;
  background: radial-gradient(circle at 18% 15%, rgba(49, 100, 167, 0.2), transparent 40%), #07172f;
}

.automata-canvas {
  display: block;
  width: 100%;
  min-width: 36rem;
  min-height: 22rem;
  touch-action: none;
}

.automata-canvas [data-state-id],
.automata-canvas [data-transition-id] {
  cursor: pointer;
}

.automata-state__label,
.automata-transition__label {
  fill: #f6f9ff;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 800;
  pointer-events: none;
}

.automata-inspector {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.automata-inspector > div {
  display: grid;
  gap: 10px;
}

.automata-inspector p {
  margin: 0;
  color: rgba(220, 231, 249, 0.84);
}

.automata-check {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #eaf2ff;
  font-weight: 700;
}

.automata-derived-area {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: var(--space-4);
}

.automata-derived-area > div {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.automata-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.automata-transition-table {
  width: 100%;
  border-collapse: collapse;
}

.automata-transition-table th,
.automata-transition-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
}

.automata-transition-table__input {
  display: block;
  min-width: 8.5rem;
  max-width: 100%;
  margin: 2px 0;
}

.automata-trace-note {
  margin: 0 0 10px;
  color: #dceaff;
}

.automata-transition-table .is-blocked td {
  border-block: 2px solid rgba(244, 213, 141, 0.85);
  background: rgba(244, 213, 141, 0.12);
}

.automata-formal-summary,
.automata-validation,
.automata-trace-section pre,
.automata-batch-disclosure pre {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: #eaf2ff;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.automata-simulation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.85fr);
  gap: clamp(16px, 2vw, 28px);
}

.automata-simulation-status {
  display: grid;
  gap: 8px;
  margin: 0;
}

.automata-simulation-status > div {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.automata-simulation-status dt {
  color: rgba(203, 216, 238, 0.74);
  font-size: 0.8rem;
  font-weight: 800;
}

.automata-simulation-status dd {
  margin: 0;
  color: #f1f6ff;
  font-weight: 700;
}

.automata-trace-section,
.automata-batch-disclosure {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.automata-transformation-heading,
.automata-transformation-section,
.automata-readonly-preview {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
}

.automata-transformation-heading,
.automata-transformation-section {
  padding: var(--space-4);
  border: 1px solid rgba(145, 183, 244, 0.28);
  border-radius: 10px;
  background: rgba(4, 15, 33, 0.3);
}

.automata-transformation-heading > div,
.automata-transformation-section > h3,
.automata-transformation-section h4,
.automata-transformation-section p {
  margin: 0;
}

.automata-transformation-heading {
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.75fr);
  margin-bottom: var(--space-4);
}

.automata-transform-select-group {
  max-width: 38rem;
  margin-top: var(--space-3);
}

.automata-transform-language-source {
  display: grid;
  gap: var(--space-3);
}

.automata-transform-source-fields {
  display: grid;
  grid-template-columns: minmax(12rem, 0.55fr) minmax(16rem, 1.45fr);
  gap: var(--space-3);
}

.automata-transform-source-fields--grammar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.automata-transform-source-fields .ui-form-group {
  margin: 0;
}

.automata-transform-productions {
  grid-column: 1 / -1;
}

.automata-transform-status,
.automata-transform-detail,
.automata-readonly-note {
  color: rgba(220, 231, 249, 0.86);
}

.automata-transform-status {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid rgba(115, 240, 191, 0.75);
  background: rgba(115, 240, 191, 0.08);
  font-weight: 700;
}

.automata-transformation-section + .automata-transformation-section {
  margin-top: var(--space-4);
}

.automata-transformation-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
  gap: clamp(16px, 2vw, 28px);
}

.automata-transform-outbound {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(115, 240, 191, 0.42);
  border-radius: 8px;
  background: rgba(115, 240, 191, 0.07);
}

.automata-transform-outbound.is-stale {
  border-color: rgba(244, 213, 141, 0.72);
  background: rgba(244, 213, 141, 0.08);
}

.automata-transform-outbound p {
  margin: 0;
}

#automata-transform-apply {
  min-width: 0;
  white-space: normal;
}

.automata-transform-elimination-control {
  min-width: min(17rem, 100%);
  margin: 0;
}

.automata-transform-elimination-control .ui-select {
  min-width: 0;
}

.automata-readonly-preview {
  align-content: start;
}

.automata-readonly-preview h4 {
  margin-top: var(--space-2);
  font-size: 0.95rem;
}

.automata-preview-canvas [data-state-id],
.automata-preview-canvas [data-transition-id] {
  cursor: default;
}

.automata-step-select {
  width: 100%;
  padding: 4px 0;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.automata-step-select:focus-visible {
  outline: 3px solid #f4d58d;
  outline-offset: 2px;
}

.automata-transformation-step-table .is-selected td {
  background: rgba(115, 240, 191, 0.11);
  border-block: 2px solid rgba(115, 240, 191, 0.7);
}

.automata-evaluation-area {
  background: rgba(2, 10, 23, 0.27);
}

.automata-validation {
  min-height: 5rem;
  padding: var(--space-3);
  border-left: 3px solid rgba(145, 183, 244, 0.64);
  background: rgba(255, 255, 255, 0.035);
}

.automata-import-disclosure {
  display: grid;
  gap: var(--space-3);
}

.automata-confirm-dialog {
  width: min(34rem, calc(100vw - 2rem));
  color: #eaf2ff;
  border: 1px solid rgba(145, 183, 244, 0.54);
  border-radius: 12px;
  background: #081a35;
  box-shadow: 0 22px 66px rgba(0, 0, 0, 0.56);
}

.automata-confirm-dialog::backdrop {
  background: rgba(0, 6, 18, 0.72);
}

.automata-confirm-dialog__content {
  display: grid;
  gap: var(--space-3);
}

.automata-confirm-dialog__content h3,
.automata-confirm-dialog__content p {
  margin: 0;
}

.automata-confirm-dialog__details {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid rgba(145, 183, 244, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.automata-confirm-dialog__details dt { font-weight: 800; }
.automata-confirm-dialog__details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.automata-import-disclosure > .ui-form-group {
  margin: 0;
}

@media (max-width: 1000px) {
  .automata-task-area,
  .automata-task-runtime,
  .automata-editor-grid,
  .automata-derived-area,
  .automata-simulation-grid,
  .automata-transformation-heading,
  .automata-transformation-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .automata-transform-source-fields,
  .automata-transform-source-fields--grammar {
    grid-template-columns: minmax(0, 1fr);
  }

  .automata-diagram-panel {
    min-height: 25rem;
  }

  .automata-task-selectors {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .automata-workspace-status {
    grid-template-columns: minmax(0, 1fr);
  }

  .automata-confirm-dialog__details { grid-template-columns: minmax(0, 1fr); }

  .automata-workspace-status p {
    text-align: left;
  }

  .automata-mode-tab {
    flex: 0 0 10rem;
  }

  .automata-tool-header,
  .automata-workspace-status,
  .automata-task-runtime,
  .automata-task-area,
  .automata-interaction-area,
  .automata-evaluation-area {
    padding: var(--space-3);
  }

  .automata-diagram-panel,
  .automata-inspector,
  .automata-derived-area > div,
  .automata-simulation-grid,
  .automata-trace-section,
  .automata-transformation-heading,
  .automata-transformation-section {
    padding: var(--space-3);
  }

  .automata-canvas-wrap,
  .automata-canvas {
    min-height: 19rem;
  }

  .automata-canvas {
    min-width: 32rem;
  }

  .automata-toolbar .ui-button,
  .automata-actions .ui-button,
  .automata-compact-controls > .ui-button {
    flex: 1 1 auto;
  }

  #automata-transform-target-section .automata-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #automata-transform-target-section .automata-actions .ui-button {
    width: 100%;
    min-width: 0;
  }

  .automata-transform-elimination-control {
    width: 100%;
  }
}

/* UI-AUT-P1: progressive workspace presentation. The model and its guards stay
   in the controller; these rules only order the visible surfaces. */
.automata-task-disclosure-shell,
.automata-model-settings,
.automata-more-actions,
.automata-workspace-menu,
.automata-view-menu,
.automata-simulation-details {
  min-width: 0;
}

.automata-task-disclosure-shell {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(2, 10, 23, 0.16);
}

.automata-task-disclosure-shell > summary,
.automata-model-settings > summary,
.automata-more-actions > summary,
.automata-workspace-menu > summary,
.automata-view-menu > summary,
.automata-simulation-details > summary {
  min-height: 40px;
  cursor: pointer;
  color: #eaf2ff;
  font-weight: 800;
}

.automata-task-disclosure-shell > summary {
  padding: 12px clamp(16px, 2vw, 24px);
}

.automata-free-controls {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: clamp(16px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(2, 10, 23, 0.12);
}

.automata-workspace-bar,
.automata-core-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.automata-workspace-identity {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(220, 231, 249, 0.88);
  font-size: 0.92rem;
  font-weight: 750;
}

.automata-profile-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 9px;
  border: 1px solid rgba(115, 240, 191, 0.72);
  border-radius: 999px;
  color: #d8fff0;
  background: rgba(115, 240, 191, 0.12);
  font-size: 0.8rem;
  font-weight: 900;
}

.automata-workspace-menu,
.automata-view-menu {
  position: relative;
}

.automata-workspace-menu > summary,
.automata-view-menu > summary {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(145, 183, 244, 0.42);
  border-radius: 8px;
  background: rgba(4, 15, 33, 0.34);
  list-style: none;
}

.automata-workspace-menu > summary::-webkit-details-marker,
.automata-view-menu > summary::-webkit-details-marker {
  display: none;
}

.automata-workspace-menu__content,
.automata-view-menu__content {
  position: absolute;
  z-index: 8;
  right: 0;
  display: grid;
  width: min(28rem, calc(100vw - 3rem));
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(145, 183, 244, 0.48);
  border-radius: 9px;
  background: #0a1d3c;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
}

.automata-workspace-menu__content p {
  margin: 0 0 2px;
  color: rgba(220, 231, 249, 0.78);
  font-size: 0.8rem;
  font-weight: 800;
}

.automata-workspace-menu__content .automata-more-actions {
  padding: 8px;
}

.automata-workspace-menu__content .automata-more-actions__content {
  display: grid;
}

.automata-view-menu__content button {
  min-height: 38px;
  padding: 7px 9px;
  color: #eaf2ff;
  border: 1px solid rgba(145, 183, 244, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  text-align: left;
}

.automata-view-menu__content button[aria-checked="true"] {
  border-color: rgba(115, 240, 191, 0.75);
  background: rgba(115, 240, 191, 0.14);
}

.automata-core-actions {
  justify-content: flex-start;
}

.automata-core-actions > .ui-button,
.automata-core-actions > .automata-view-menu > summary {
  min-height: 44px;
  padding-inline: 14px;
  font-weight: 850;
}

.automata-model-settings,
.automata-more-actions {
  padding: 10px 12px;
  border: 1px solid rgba(145, 183, 244, 0.28);
  border-radius: 9px;
  background: rgba(4, 15, 33, 0.2);
}

.automata-model-settings > summary,
.automata-more-actions > summary {
  display: flex;
  align-items: center;
}

.automata-model-settings[open] .automata-compact-controls {
  margin-top: 10px;
}

.automata-editor-grid {
  grid-template-columns: minmax(0, 1fr);
}

.automata-diagram-panel {
  min-height: clamp(30rem, 64vh, 46rem);
}

.automata-context-panel {
  width: min(100%, 38rem);
  margin-left: auto;
  border-color: rgba(115, 240, 191, 0.52);
  background: #0a1d3c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.automata-transition-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: var(--space-3);
  border: 1px solid rgba(115, 240, 191, 0.62);
  border-radius: 8px;
  background: rgba(115, 240, 191, 0.08);
}

.automata-transition-composer h4,
.automata-transition-composer p,
.automata-transition-composer .automata-actions {
  grid-column: 1 / -1;
  margin: 0;
}

.automata-transition-composer .ui-form-group {
  min-width: 0;
  margin: 0;
}

.automata-simulation-tray {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgba(115, 240, 191, 0.52);
  border-radius: 10px;
  background: rgba(5, 30, 43, 0.44);
}

.automata-simulation-details {
  padding: 10px 12px;
  border: 1px solid rgba(145, 183, 244, 0.28);
  border-radius: 9px;
  background: rgba(4, 15, 33, 0.24);
}

.automata-simulation-details[open] > .automata-trace-section {
  margin-top: var(--space-3);
}

.automata-canvas .automata-transition__label {
  pointer-events: all;
  cursor: pointer;
}

.automata-canvas .automata-state:focus-visible circle {
  stroke: #f4d58d;
  stroke-width: 4;
}

/* UI-AUT-P2: tasks and transformations are focused subprocesses. These rules
   only arrange already guarded surfaces; they never unlock a controller path. */
.automata-task-response-home:empty,
#automata-task-response-workspace:empty {
  display: none;
}

.automata-task-runtime > #automata-task-response-home {
  grid-column: 1 / -1;
}

#automata-task-response-home > .automata-task-response {
  display: grid;
}

.automata-task-response-workspace {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) clamp(16px, 2vw, 24px) 0;
}

.automata-task-response-workspace > .automata-task-response {
  max-width: none;
  border-color: rgba(115, 240, 191, 0.52);
}

.automata-task-source-workspace:empty {
  display: none;
}

.automata-task-source-workspace {
  display: grid;
  margin: 0 clamp(16px, 2vw, 24px);
}

.automata-task-source-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(115, 240, 191, 0.54);
  border-left: 4px solid rgba(115, 240, 191, 0.8);
  border-radius: 10px;
  background: rgba(4, 36, 49, 0.46);
}

.automata-task-source-card h3,
.automata-task-source-card h4,
.automata-task-source-card__fields,
.automata-task-source-card__productions {
  margin: 0;
}

.automata-task-source-card__fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px var(--space-3);
}

.automata-task-source-card__fields dt {
  font-weight: 800;
}

.automata-task-source-card__fields dd {
  margin: 0;
}

.automata-task-source-card__productions {
  overflow-x: auto;
  padding: var(--space-2);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  color: #f2fbff;
  font: 600 0.95rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

.automata-task-band {
  position: sticky;
  z-index: 6;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) clamp(16px, 2vw, 24px);
  padding: 10px 12px;
  border: 1px solid rgba(115, 240, 191, 0.66);
  border-radius: 10px;
  color: #eafbf4;
  background: #0a2a34;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.automata-task-band > span {
  min-width: 0;
  font-weight: 800;
}

.automata-task-panel-diagnostics:empty {
  display: none;
}

.automata-task-panel-diagnostics {
  margin: 0;
  color: #ffe5a8;
  font-size: 0.85rem;
}

.automata-task-disclosure-shell.is-task-active .automata-task-runtime,
.automata-task-disclosure-shell.is-task-active .automata-task-actions {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.automata-transformation-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-4);
  padding: 8px;
  border: 1px solid rgba(145, 183, 244, 0.28);
  border-radius: 9px;
  background: rgba(4, 15, 33, 0.26);
}

.automata-transformation-stages > button[data-automata-transform-stage] {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid rgba(145, 183, 244, 0.32);
  border-radius: 7px;
  color: #eaf2ff;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.automata-transformation-stages > button.is-active {
  border-color: rgba(115, 240, 191, 0.8);
  background: rgba(115, 240, 191, 0.14);
}

.automata-transformation-stages > button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#automata-transform-close {
  margin-left: auto;
}

.automata-transition-handle {
  cursor: crosshair;
}

.automata-transition-handle circle {
  fill: #1c695e;
  stroke: #d8fff0;
  stroke-width: 2;
}

.automata-transition-handle text {
  fill: #ffffff;
  font-size: 14px;
  font-weight: 900;
  pointer-events: none;
}

.automata-transition-handle:focus-visible circle {
  stroke: #f4d58d;
  stroke-width: 3;
}

@media (min-width: 1101px) {
  .automata-task-disclosure-shell.is-task-active {
    position: fixed;
    z-index: 20;
    top: max(12px, env(safe-area-inset-top));
    right: 16px;
    width: min(24rem, calc(100vw - 32px));
    max-height: calc(100vh - 24px);
    overflow: auto;
    border: 1px solid rgba(115, 240, 191, 0.64);
    border-radius: 11px;
    background: #071a35;
    box-shadow: -16px 18px 44px rgba(0, 0, 0, 0.38);
  }

  .automata-task-disclosure-shell.is-task-active > summary {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #071a35;
  }
}

@media (max-width: 1100px) {
  .automata-task-disclosure-shell.is-task-active {
    position: fixed;
    z-index: 20;
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-height: min(76vh, 46rem);
    overflow: auto;
    border: 1px solid rgba(115, 240, 191, 0.68);
    border-radius: 14px;
    background: #071a35;
    box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.38);
  }
}

@media (max-width: 620px) {
  .automata-task-source-card {
    padding: var(--space-3);
  }

  .automata-task-source-card__fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .automata-task-source-card__fields dt:not(:first-child) {
    margin-top: var(--space-2);
  }

  .automata-task-disclosure-shell.is-task-active .automata-task-actions .ui-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .automata-free-controls {
    padding: var(--space-3);
  }

  .automata-workspace-bar {
    align-items: flex-start;
  }

  .automata-core-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .automata-core-actions > .ui-button,
  .automata-core-actions > .automata-view-menu > summary {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .automata-view-menu__content,
  .automata-workspace-menu__content {
    position: fixed;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .automata-transition-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .automata-diagram-panel {
    min-height: 25rem;
  }

  .automata-context-panel {
    width: 100%;
    margin-left: 0;
  }

  .automata-simulation-tray {
    padding: var(--space-3);
  }

  .automata-task-band {
    align-items: stretch;
    flex-direction: column;
  }

  .automata-task-band .automata-actions,
  .automata-task-band .ui-button {
    width: 100%;
  }

  .automata-transformation-stages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #automata-transform-close {
    grid-column: 1 / -1;
    margin-left: 0;
  }
}

/* UI-WS-S2: Task Context und Task Canvas sind Geschwister. Die Rail trägt
   die gesamte zweite Spalte; nur ihr innerer Inhalt ist sticky. */
.automata-task-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(22rem, 25vw, 30rem);
  align-items: stretch;
  min-width: 0;
  container-type: inline-size;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.automata-task-canvas,
.automata-task-layout > * {
  min-width: 0;
}

.automata-task-canvas {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.automata-task-layout > .automata-task-disclosure-shell.is-task-active {
  position: static;
  z-index: auto;
  width: auto;
  max-height: none;
  overflow: visible;
  align-self: stretch;
  margin: 0;
  border: 0;
  border-inline-start: 1px solid rgba(115, 240, 191, 0.42);
  border-radius: 0;
  background: rgba(4, 15, 33, 0.5);
  box-shadow: none;
}

.automata-task-layout > .automata-task-disclosure-shell.is-task-active > summary {
  display: none;
}

.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-runtime {
  position: sticky;
  top: max(12px, env(safe-area-inset-top));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: var(--space-4);
  background: transparent;
}

.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-runtime > div:first-child,
.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-selected,
.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-material {
  display: none;
}

.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-selectors,
.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-brief,
.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-actions {
  grid-column: 1;
}

.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-selectors {
  grid-template-columns: minmax(0, 1fr);
}

.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-actions {
  display: grid;
  padding: 0;
  border: 0;
  background: transparent;
}

.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-actionbar {
  position: sticky;
  bottom: 0;
  padding: var(--space-2) 0 0;
  border: 0;
  background: linear-gradient(to bottom, transparent, #0a1d3c 24%);
}

.automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-actionbar .ui-button {
  width: 100%;
}

.automata-task-surface-pair {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(22rem, 1.1fr);
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
  min-width: 0;
  padding-inline: clamp(16px, 2vw, 24px);
}

.automata-task-surface-pair > .automata-interaction-area,
.automata-task-surface-pair > .automata-task-response-workspace {
  min-width: 0;
  margin: 0;
}

.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-free-controls,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-free-controls {
  display: none;
}

.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-interaction-area,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-interaction-area {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-interaction-area > .automata-area-heading,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-interaction-area > .automata-area-heading,
.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-core-actions,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-core-actions {
  display: none;
}

.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-editor-grid,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-editor-grid {
  display: block;
  margin: 0;
}

.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-diagram-panel,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-diagram-panel {
  min-height: 0;
  padding: var(--space-3);
}

.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-panel-heading,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-panel-heading {
  display: none;
}

.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-canvas-wrap,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-canvas-wrap,
.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-canvas,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-canvas {
  min-width: 0;
  min-height: clamp(13rem, 24vw, 19rem);
}

.automata-canvas--readonly-preview {
  pointer-events: none;
  touch-action: auto;
}

.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-task-response,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-task-response {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  max-width: none;
}

.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-task-response > h3,
.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-task-response > p,
.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-task-response > section,
.automata-task-layout[data-automata-spatial-profile="source-response"] .automata-task-response > .automata-task-evaluation,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-task-response > h3,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-task-response > p,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-task-response > section,
.automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-task-response > .automata-task-evaluation {
  grid-column: 1 / -1;
}

.automata-task-layout[data-automata-spatial-profile="compact"] .automata-task-response {
  width: min(100%, 52rem);
}

.automata-task-layout[data-automata-spatial-profile="editor"] .automata-task-response:has(.automata-task-response-field:only-of-type) {
  max-width: 52rem;
}

.automata-task-response > .automata-task-evaluation {
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(115, 240, 191, 0.42);
  border-left: 3px solid rgba(115, 240, 191, 0.78);
  border-radius: 8px;
  background: rgba(115, 240, 191, 0.07);
}

.automata-task-evaluation__summary {
  margin: 0;
  font-weight: 800;
}

@container (max-width: 68rem) {
  .automata-task-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .automata-task-surface-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  /* `backdrop-filter` would turn the hero into the containing block of the
     fixed task drawer and context sheet. The mobile overlays must attach to
     the viewport, not to the scrolling lesson card. */
  .automata-tool-page .hero {
    backdrop-filter: none;
  }

  .automata-task-layout {
    /* The rail becomes an overlay below this breakpoint, so it must no
       longer reserve its desktop grid column. */
    grid-template-columns: minmax(0, 1fr);
  }

  .automata-task-layout > .automata-task-disclosure-shell.is-task-active {
    position: fixed;
    z-index: 20;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: min(76dvh, 46rem);
    overflow: auto;
    border: 1px solid rgba(115, 240, 191, 0.68);
    border-radius: 14px;
    background: #071a35;
    box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.38);
  }

  .automata-task-layout > .automata-task-disclosure-shell.is-task-active .automata-task-runtime {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 620px) {
  .automata-task-surface-pair,
  .automata-task-layout[data-automata-spatial-profile="source-response"] .automata-task-response,
  .automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-task-response {
    grid-template-columns: minmax(0, 1fr);
  }

  .automata-task-layout[data-automata-spatial-profile="source-response"] .automata-canvas-wrap,
  .automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-canvas-wrap,
  .automata-task-layout[data-automata-spatial-profile="source-response"] .automata-canvas,
  .automata-task-layout[data-automata-spatial-profile="run-analysis"] .automata-canvas {
    min-height: 14rem;
  }

  .automata-context-panel--open {
    position: fixed;
    z-index: 24;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: min(70dvh, 38rem);
    overflow: auto;
    margin: 0;
    border-color: rgba(115, 240, 191, 0.72);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.42);
  }

  /* A context sheet is the active mobile layer. Keep the task drawer in the
     layout, but do not show a competing sheet below it. Escape restores it. */
  .automata-task-layout:has(.automata-context-panel--open) > .automata-task-disclosure-shell.is-task-active {
    visibility: hidden;
    pointer-events: none;
  }
}

/* Below the desktop breakpoint the rail is a real, closed-by-default drawer.
   The task band owns opening it; the visible native summary owns closing it. */
@media (max-width: 1100px) {
  .automata-task-layout > .automata-task-disclosure-shell.is-task-active:not([open]) {
    position: static;
    z-index: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .automata-task-layout > .automata-task-disclosure-shell.is-task-active:not([open]) > summary {
    display: none;
  }

  .automata-task-layout > .automata-task-disclosure-shell.is-task-active[open] {
    position: fixed;
    z-index: 20;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: min(76dvh, 46rem);
    overflow: auto;
    border: 1px solid rgba(115, 240, 191, 0.68);
    border-radius: 14px;
    background: #071a35;
    box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.38);
  }

  .automata-task-layout > .automata-task-disclosure-shell.is-task-active[open] > summary {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 12px var(--space-4);
    border-bottom: 1px solid rgba(115, 240, 191, 0.38);
    color: #eafbf4;
    background: #071a35;
  }

  .automata-task-drawer-toggle__close {
    padding: 4px 8px;
    border: 1px solid rgba(115, 240, 191, 0.6);
    border-radius: 6px;
    font-size: 0.9rem;
  }
}

/* AUT-T1B: the task data keeps the established response keys. These rules
   only make word runs, comparisons and declared response groups legible. */
.automata-run-workspace,
.automata-comparison-workspace,
.automata-response-group {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid rgba(145, 183, 244, 0.28);
  border-radius: 10px;
  background: rgba(4, 15, 33, 0.2);
}

.automata-run-workspace > h4,
.automata-comparison-workspace > h4,
.automata-response-group > h4,
.automata-run-step-editor > h5,
.automata-run-summary > h5,
.automata-comparison-source > h5 {
  margin: 0;
}

.automata-run-selector,
.automata-run-step-navigation,
.automata-response-group-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.automata-run-selector__button,
.automata-run-step-button,
.automata-state-chip {
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(145, 183, 244, 0.42);
  border-radius: 999px;
  color: inherit;
  background: rgba(13, 42, 82, 0.58);
  cursor: pointer;
}

.automata-run-selector__button[aria-selected="true"],
.automata-run-step-button[aria-selected="true"],
.automata-state-chip[aria-pressed="true"],
.automata-response-group-tab[aria-selected="true"] {
  border-color: rgba(115, 240, 191, 0.86);
  background: rgba(115, 240, 191, 0.17);
  box-shadow: inset 0 0 0 1px rgba(115, 240, 191, 0.34);
}

.automata-run-selector__button:focus-visible,
.automata-run-step-button:focus-visible,
.automata-state-chip:focus-visible,
.automata-response-group-tab:focus-visible {
  outline: 3px solid #f7c95c;
  outline-offset: 2px;
}

.automata-run-steps,
.automata-run-step-editor,
.automata-run-summary,
.automata-run-completion-controls {
  display: grid;
  gap: var(--space-3);
}

.automata-run-word {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.automata-run-word > span:not(:first-child) {
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  background: rgba(145, 183, 244, 0.14);
}

.automata-run-step-editor,
.automata-run-summary {
  padding: var(--space-3);
  border-inline-start: 3px solid rgba(115, 240, 191, 0.6);
  border-radius: 0 8px 8px 0;
  background: rgba(5, 24, 51, 0.4);
}

.automata-run-step-editor > label,
.automata-run-completion-controls > label {
  display: grid;
  gap: var(--space-1);
}

.automata-run-completion-controls {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.automata-state-set-editor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.automata-state-set-editor > legend {
  width: 100%;
  margin-bottom: var(--space-1);
}

.automata-state-chip--empty {
  border-style: dashed;
}

.automata-comparison-workspace {
  grid-column: 1 / -1;
  border-color: rgba(115, 240, 191, 0.48);
}

.automata-comparison-sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-3);
}

.automata-comparison-source {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid rgba(145, 183, 244, 0.3);
  border-radius: 8px;
  background: rgba(4, 15, 33, 0.35);
}

.automata-comparison-source__diagram {
  display: block;
  width: 100%;
  min-height: 16rem;
  max-height: 24rem;
  border-radius: 6px;
  background: rgba(4, 15, 33, 0.45);
}

.automata-task-layout[data-automata-comparison-workspace="true"] .automata-interaction-area {
  display: none;
}

.automata-task-layout[data-automata-spatial-profile="wide"] .automata-task-response {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}

.automata-task-layout[data-automata-spatial-profile="wide"] .automata-task-response > h3,
.automata-task-layout[data-automata-spatial-profile="wide"] .automata-task-response > p,
.automata-task-layout[data-automata-spatial-profile="wide"] .automata-task-response > .automata-response-group,
.automata-task-layout[data-automata-spatial-profile="wide"] .automata-task-response > .automata-task-evaluation {
  grid-column: 1 / -1;
}

.automata-response-group[data-response-group-layout="comparison"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automata-response-group[data-response-group-layout="comparison"] > h4,
.automata-response-group[data-response-group-layout="comparison"] > .automata-task-evaluation {
  grid-column: 1 / -1;
}

.automata-response-group[data-response-group-layout="state-meanings"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automata-response-group[data-response-group-layout="state-meanings"] > h4,
.automata-response-group[data-response-group-layout="examples"] > h4 {
  grid-column: 1 / -1;
}

.automata-response-group[data-response-group-layout="examples"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automata-response-group[data-response-group-layout="examples"] > .automata-task-response-field:first-of-type {
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .automata-run-workspace,
  .automata-comparison-workspace,
  .automata-response-group {
    padding: var(--space-2);
  }

  .automata-run-selector__button,
  .automata-run-step-button,
  .automata-response-group-tab {
    flex: 1 1 10rem;
  }

  .automata-task-layout[data-automata-spatial-profile="wide"] .automata-task-response,
  .automata-response-group[data-response-group-layout="comparison"],
  .automata-response-group[data-response-group-layout="state-meanings"],
  .automata-response-group[data-response-group-layout="examples"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .automata-response-group[data-response-group-layout="examples"] > .automata-task-response-field:first-of-type {
    grid-column: auto;
  }

  .automata-comparison-source__diagram {
    min-height: 13rem;
  }
}

/* AUT-T1C: formalization keeps the canonical source/response model, but the
   declarative response surface gives the relation enough working width. */
.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-free-controls {
  display: none;
}

.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-interaction-area {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-interaction-area > .automata-area-heading,
.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-core-actions,
.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-panel-heading {
  display: none;
}

.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-editor-grid {
  display: block;
  margin: 0;
}

.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-diagram-panel {
  min-height: 0;
  padding: var(--space-3);
}

.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-canvas-wrap,
.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-canvas {
  min-width: 0;
  min-height: clamp(13rem, 24vw, 19rem);
}

.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-task-response {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  max-width: none;
}

.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-task-response > h3,
.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-task-response > p,
.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-task-response > section,
.automata-task-layout[data-automata-spatial-profile="formalization"] .automata-task-response > .automata-task-evaluation {
  grid-column: 1 / -1;
}

@container (min-width: 68.0625rem) {
  .automata-task-layout[data-automata-spatial-profile="formalization"] .automata-task-surface-pair {
    grid-template-columns: minmax(16rem, 0.75fr) minmax(32rem, 1.45fr);
  }
}

.automata-task-response[data-response-layout="formalization"] .automata-response-group[data-response-group-layout="formal-definition"],
.automata-response-group[data-response-group-layout="reasoning"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automata-task-response[data-response-layout="formalization"] .automata-response-group[data-response-group-layout="formal-definition"] > h4,
.automata-task-response[data-response-layout="formalization"] .automata-response-group[data-response-group-layout="formal-transitions"] > h4,
.automata-response-group[data-response-group-layout="reasoning"] > h4 {
  grid-column: 1 / -1;
}

.automata-task-response[data-response-layout="formalization"] .automata-response-group[data-response-group-layout="formal-transitions"] {
  grid-template-columns: minmax(0, 1fr);
  border-color: rgba(115, 240, 191, 0.48);
}

.automata-task-response[data-response-layout="formalization"] .automata-task-response-table {
  overflow-x: clip;
}

.automata-task-response[data-response-layout="formalization"] .automata-transition-table {
  min-width: 0;
  table-layout: fixed;
}

.automata-task-response[data-response-layout="formalization"] .automata-transition-table th,
.automata-task-response[data-response-layout="formalization"] .automata-transition-table td {
  min-width: 0;
}

.automata-task-response[data-response-layout="formalization"] .automata-transition-table td:has(.ui-select + .ui-select) {
  display: grid;
  gap: 6px;
}

.automata-task-response[data-response-layout="formalization"] .automata-transition-table td:has(.ui-select + .ui-select)::before {
  content: 'Zielzustand und Ausgabe';
  color: rgba(220, 231, 249, 0.84);
  font-size: 0.78rem;
  font-weight: 800;
}

.automata-task-layout[data-automata-source-emphasis="compact-reference"] .automata-diagram-panel {
  min-height: 0;
  padding: var(--space-3);
}

.automata-task-layout[data-automata-source-emphasis="compact-reference"] .automata-canvas-wrap,
.automata-task-layout[data-automata-source-emphasis="compact-reference"] .automata-canvas {
  min-height: clamp(12rem, 20vw, 16rem);
}

.automata-task-layout[data-automata-source-emphasis="compact-reference"] .automata-canvas--readonly-preview {
  cursor: default;
}

@media (min-width: 621px) and (max-width: 1200px) {
  .automata-task-layout[data-automata-spatial-profile="transformation"] .automata-task-response-table table {
    min-width: 0;
    table-layout: fixed;
  }

  .automata-task-layout[data-automata-spatial-profile="transformation"] .automata-task-response-table th,
  .automata-task-layout[data-automata-spatial-profile="transformation"] .automata-task-response-table td {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 620px) {
  .automata-task-response[data-response-layout="formalization"] .automata-response-group[data-response-group-layout="formal-definition"],
  .automata-response-group[data-response-group-layout="reasoning"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .automata-task-response[data-response-layout="formalization"] .automata-task-response-table {
    overflow: visible;
  }

  .automata-task-response[data-response-layout="formalization"] .automata-transition-table,
  .automata-task-response[data-response-layout="formalization"] .automata-transition-table tbody,
  .automata-task-response[data-response-layout="formalization"] .automata-transition-table tr,
  .automata-task-response[data-response-layout="formalization"] .automata-transition-table th,
  .automata-task-response[data-response-layout="formalization"] .automata-transition-table td {
    display: block;
  }

  .automata-task-response[data-response-layout="formalization"] .automata-transition-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .automata-task-response[data-response-layout="formalization"] .automata-transition-table tbody {
    display: grid;
    gap: var(--space-2);
  }

  .automata-task-response[data-response-layout="formalization"] .automata-transition-table tr {
    padding: var(--space-2);
    border: 1px solid rgba(145, 183, 244, 0.3);
    border-radius: 8px;
    background: rgba(5, 24, 51, 0.4);
  }

  .automata-task-response[data-response-layout="formalization"] .automata-transition-table th[scope="row"] {
    margin-bottom: var(--space-1);
    border: 0;
    font-weight: 800;
  }

  .automata-task-response[data-response-layout="formalization"] .automata-transition-table td {
    display: grid;
    gap: 4px;
    border-width: 1px 0 0;
  }

  .automata-task-response[data-response-layout="formalization"] .automata-transition-table td::before {
    content: 'bei ' attr(data-transition-symbol);
    font-weight: 800;
  }
}