/* CONFYRA R62 · One learning view, one place for the next action.
   Base tokens, dialogs and experiment styles remain in app-r58.css.
   Desktop: three quarters model, one quarter explanation. Long optional
   reading is a dialog; no page-length tool wall. Short screens / large fonts
   retain a local overflow escape so every action remains reachable. */
body#diesel-learning.diesel-app[data-app-status="ready"] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body#diesel-learning.diesel-app[data-app-status="ready"] .app-header {
  min-height: 56px;
  padding-block: 4px;
}
body#diesel-learning.diesel-app[data-app-status="ready"] .mode-nav { min-height: 50px; padding-block: 3px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .app-footer { display: none; }
body#diesel-learning.diesel-app[data-app-status="ready"] #workspace,
body#diesel-learning.diesel-app[data-app-status="ready"].large-view #workspace {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr);
  grid-template-rows: minmax(0, 1fr) auto !important;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  align-items: stretch;
  background: var(--graphite);
  overflow: hidden;
}
body#diesel-learning.diesel-app[data-app-status="ready"] #workspace > .stage-wrap {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border: 0;
  background: radial-gradient(ellipse at 45% 20%, #405561, #26343d 80%);
}
body#diesel-learning.diesel-app[data-app-status="ready"] .stage-toolbar {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-height: 50px;
  padding: 3px 18px;
  border-bottom: 1px solid #75889455;
}
body#diesel-learning.diesel-app[data-app-status="ready"] .stage-label { font-size: .75rem; letter-spacing: .045em; }
body#diesel-learning.diesel-app[data-app-status="ready"] .stage-toolbar > .stage-label { flex-basis: auto; }
body#diesel-learning.diesel-app[data-app-status="ready"] #workspace .model-stage,
body#diesel-learning.diesel-app[data-app-status="ready"] #workspace #supply-scene {
  flex: 1 1 0;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
}
body#diesel-learning.diesel-app[data-app-status="ready"] #supply-scene { padding: 10px 18px; }
body#diesel-learning.diesel-app[data-app-status="ready"] #supply-scene > svg { width: 100%; height: 100%; max-height: none; }
body#diesel-learning.diesel-app[data-app-status="ready"] #model-stage { overflow: hidden; }
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation {
  grid-column: 2;
  grid-row: 1 / 3;
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  padding: clamp(20px, 2vw, 32px);
  border-top: 0;
  border-left: 2px solid var(--amber);
  background: #fffdf8;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 35rem;
  margin: auto;
}
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation-title {
  font-size: clamp(1.3rem, 1.55vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation-text {
  max-width: 45ch;
  font-size: 1rem !important;
  line-height: 1.5;
  color: #3c4c56;
}
body#diesel-learning.diesel-app[data-app-status="ready"] .explanation-copy { gap: 9px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .step-label { line-height: 1.35; font-size: .6875rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 8px;
}
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions > button,
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .context-actions > button {
  width: 100%;
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 0;
  padding: 10px 12px;
  font-size: .9375rem;
  line-height: 1.3;
}
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions .primary { min-height: 48px; }
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .entry-actions { grid-template-columns: minmax(0, 1fr); }
body#diesel-learning.diesel-app[data-app-status="ready"] .course-context { margin: 0; min-width: 0; }
body#diesel-learning.diesel-app[data-app-status="ready"] .next-instruction { font-size: .9375rem; line-height: 1.4; }
body#diesel-learning.diesel-app[data-app-status="ready"] .course-return { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: .8125rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .course-return button { padding: 6px 0; min-height: 44px; font-size: .8125rem; text-align: left; }
body#diesel-learning.diesel-app[data-app-status="ready"] #stage-tools,
body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip {
  grid-column: 1;
  grid-row: 2;
  order: 2;
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 0;
  max-height: none;
  padding: 7px 16px;
  color: #edf4f6;
  background: #263943;
  border-top: 1px solid #69828d66;
  overflow: visible;
}
body#diesel-learning.diesel-app[data-app-status="ready"] #stage-tools:empty { display: none; }
body#diesel-learning.diesel-app[data-app-status="ready"][data-insight] #stage-tools { display: none; }
body#diesel-learning.diesel-app[data-app-status="ready"] .stage-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
body#diesel-learning.diesel-app[data-app-status="ready"] #stage-tools button { min-height: 44px; font-size: .875rem; padding: 8px 12px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .source-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 10px; font-size: .8125rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .source-summary .animation-note { display: none; }
body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip { grid-template-columns: minmax(0, 1fr); font-size: .875rem; }
body#diesel-learning.diesel-app[data-app-status="ready"][data-insight] .model-caption { display: none; }
body#diesel-learning.diesel-app[data-app-status="ready"] .model-caption { padding: 4px 8px; border-radius: 5px; background: #26343de8; }
body#diesel-learning.diesel-app[data-app-status="ready"] .large-view-return { position: relative; z-index: 1; }
body#diesel-learning.diesel-app[data-app-status="ready"].large-view #workspace { position: fixed; inset: 0; z-index: 25; }
body#diesel-learning.diesel-app[data-app-status="ready"].large-view #notice { z-index: 35; }
body#diesel-learning.diesel-app[data-app-status="ready"] #notice { top: auto; bottom: 16px; max-width: min(560px, calc(100% - 32px)); }
body#diesel-learning.diesel-app[data-app-status="ready"] dialog { z-index: 40; }

.diesel-app .insight-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  color: #fff0d5;
  border: 1px solid #ac8e5e;
  border-radius: 5px;
  background: #3d3d34;
  font-size: .8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.diesel-app .insight-badge[data-kind="actual"],
.diesel-app .insight-badge.is-actual {
  color: #ddf5ff;
  border-color: #7396a8;
  background: #2a424f;
}
.diesel-app .insight-badge strong { font-weight: 750; }
.diesel-app .insight-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.diesel-app .insight-toolbar :where(button, .button, select),
.diesel-app .insight-steps :where(button, .button) {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  color: #f6f7f8;
  background: #314751;
  border: 1px solid #899fa8;
  border-radius: 7px;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
  box-shadow: none;
}
.diesel-app .insight-toolbar :where(button, .button):hover,
.diesel-app .insight-steps :where(button, .button):hover {
  color: #fff;
  border-color: #e6af52;
  background: #405a65;
}
.diesel-app .insight-toolbar .primary,
.diesel-app .insight-toolbar [aria-pressed="true"],
.diesel-app .insight-steps [aria-current="step"],
.diesel-app .insight-steps [aria-current="true"],
.diesel-app .insight-steps [aria-pressed="true"],
.diesel-app .insight-steps [aria-selected="true"] {
  color: #1d2932;
  background: #e6af52;
  border-color: #e6af52;
  font-weight: 750;
  box-shadow: inset 0 -2px 0 #956519;
}
.diesel-app .insight-toolbar :where(button, .button):disabled,
.diesel-app .insight-steps :where(button, .button):disabled {
  color: #becbd0;
  background: #2f3f48;
  border-color: #69818b;
  cursor: not-allowed;
  box-shadow: none;
}
.diesel-app .insight-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.diesel-app .insight-toolbar select { max-width: 100%; }
.diesel-app .insight-toolbar > .insight-badge { margin-inline-end: auto; }
.diesel-app .insight-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr));
  gap: 6px;
  min-width: 0;
}
.diesel-app .insight-steps button {
  justify-content: flex-start;
  text-align: left;
  gap: 7px;
}
.diesel-app .insight-steps button > span:first-child {
  font-variant-numeric: tabular-nums;
}
.diesel-app #insight-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  min-width: 0;
}

/* An ordinary flow item within the strip. This is deliberately not a canvas
   overlay: labels and the waveform must never obscure a piston or connection. */
.diesel-app #insight-overlay {
  position: static;
  inset: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0;
  pointer-events: auto;
  color: #e1ebef;
  font-size: .8125rem;
  line-height: 1.4;
}
.diesel-app #insight-overlay:empty { display: none; }
.diesel-app .interior-key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  max-width: 100%;
}
.diesel-app .interior-key > :where(span, li) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.diesel-app .interior-key :where(i, .key-dot) {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid #c4d3d8;
  background: var(--key-color, #c4d3d8);
}
.diesel-app svg.generator-wave {
  display: block;
  flex: 1 1 240px;
  width: min(100%, 360px);
  max-width: 360px;
  height: auto;
  max-height: 100px;
  margin: 0;
  overflow: visible;
  border-radius: 6px;
  background: #22313a;
}
.diesel-app div.generator-wave {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(100%, 530px);
  max-width: 100%;
  min-width: 0;
  color: #edf4f6;
}
.diesel-app div.generator-wave > svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  border-radius: 6px;
  background: #22313a;
}
.diesel-app div.generator-wave > span {
  min-width: 0;
  font-size: .8125rem;
  line-height: 1.45;
}
.diesel-app svg.generator-wave text {
  fill: #edf4f6;
  font-family: inherit;
}
.diesel-app svg.generator-wave .axis {
  fill: none;
  stroke: #a3b7c1;
}
.diesel-app svg.generator-wave .wave {
  fill: none;
  stroke: #70c9f2;
  stroke-width: 2;
}
.diesel-app svg.generator-wave .cursor {
  stroke: #e6af52;
  fill: #e6af52;
}

/* Clear invitation, contextual help and a short readable reason. */
.diesel-app .entry-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.diesel-app .entry-actions > button {
  min-width: 0;
  min-height: 56px;
  padding: 12px 16px;
  font-size: 1rem;
  line-height: 1.35;
}
.diesel-app .context-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.diesel-app .context-actions > button {
  flex: 1 1 150px;
  min-height: 44px;
  font-size: .9375rem;
  line-height: 1.35;
}
.diesel-app .why-summary {
  display: grid;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.5;
}
.diesel-app .why-summary > p { max-width: 70ch; }
.diesel-app dl.why-summary,
.diesel-app .why-summary dl {
  display: grid;
  grid-template-columns: minmax(7rem, .65fr) minmax(0, 1.8fr);
  gap: 8px 18px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #c4ccc6;
  border-radius: 8px;
  background: #f4f1e9;
}
.diesel-app .why-summary dt { font-weight: 750; }
.diesel-app .why-summary dd { margin: 0; min-width: 0; color: #384b55; }
.diesel-app .why-summary .context-actions { padding-top: 4px; }
.diesel-app .why-summary .small-note { font-size: .875rem; color: #536068; }



/* Compact playback uses one labelled section choice instead of six buttons. */
body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar { justify-content: flex-start; gap: 6px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar > .insight-badge { margin-inline-end: auto; }
body#diesel-learning.diesel-app[data-app-status="ready"] .insight-step-select { display: flex; flex: 1 1 220px; align-items: center; gap: 8px; min-width: 0; }
body#diesel-learning.diesel-app[data-app-status="ready"] .insight-step-select label { flex: 0 0 auto; font-size: .8125rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .insight-step-select select { width: 100%; min-width: 0; margin: 0; min-height: 44px; padding: 8px 10px; color: #f6f7f8; background: #314751; border: 1px solid #899fa8; font-size: .875rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .insight-compact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body#diesel-learning.diesel-app[data-app-status="ready"] #insight-overlay { justify-content: flex-start; gap: 8px 18px; font-size: .8125rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] div.generator-wave { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); max-width: 470px; }
body#diesel-learning.diesel-app[data-app-status="ready"] div.generator-wave > svg { max-height: 66px; }
body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip .interior-key { gap: 4px 12px; }
body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip .insight-badge { font-size: .75rem; }
/* Experiments take the same workspace; optional depth opens in the dialog. */
body#diesel-learning.diesel-app[data-app-status="ready"].lab-open #workspace,
body#diesel-learning.diesel-app[data-app-status="ready"].quiz-open #workspace {
  display: block;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  background: var(--paper);
}
body#diesel-learning.diesel-app[data-app-status="ready"] #lab,
body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.phase-board-r57) {
  width: 100%;
  max-width: 1440px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 16px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
body#diesel-learning.diesel-app[data-app-status="ready"] .lab-header { margin-bottom: 12px; gap: 12px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .lab-header h2 { font-size: 1.35rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .lab-header p { font-size: .9375rem; line-height: 1.4; }
body#diesel-learning.diesel-app[data-app-status="ready"] .lab-header button { min-height: 44px; flex-shrink: 0; }
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r57 { max-width: 1080px; margin: 0 auto; }
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-foot { align-items: center; }
body#diesel-learning.diesel-app[data-app-status="ready"] .lab-detail-action { min-height: 44px; font-size: .875rem; padding: 8px 12px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .experiment-context { margin-bottom: 12px; padding: 9px 12px; font-size: .9375rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .comparison-tabs { margin-bottom: 12px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .switch-consumer { padding: 14px; gap: 5px 8px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .switch-reading { padding: 12px 18px; margin-top: 12px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .switch-reading strong { font-size: 1.7rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .lab-bottom { padding: 10px 0 6px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .switch-reading ~ p { font-size: .9375rem; line-height: 1.4; margin-top: 6px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .switch-reading ~ .small-note { font-size: .8125rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board { max-width: 960px; gap: 14px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-header { gap: 12px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-header h2 { font-size: 1.5rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-question { gap: 9px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-question legend { font-size: 1.15rem; margin-bottom: 10px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-choice { min-height: 48px; padding: 10px 14px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-choice.is-selected { padding: 9px 13px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-state { min-height: 0; font-size: .9375rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-review { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-review button { min-height: 52px; font-size: .875rem; padding: 8px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-page { border: 1px solid #c4cfcb; border-left: 3px solid #b48231; border-radius: 10px; padding: 16px; background: #fffdf8; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-page > * + * { margin-top: 8px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-page h3, body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-page h4 { font-size: 1.1rem; margin: 0; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-nav button { min-height: 44px; }
@media (max-width: 959px) and (min-height: 561px) {
  body#diesel-learning.diesel-app[data-app-status="ready"] #workspace,
  body#diesel-learning.diesel-app[data-app-status="ready"].large-view #workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(210px, 1fr) auto auto !important;
    overflow: auto;
  }
  body#diesel-learning.diesel-app[data-app-status="ready"] #workspace > .stage-wrap { grid-column: 1; grid-row: 1; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation { grid-column: 1; grid-row: 2; padding: 12px 16px; border-left: 0; border-top: 2px solid var(--amber); overflow: visible; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-inner { margin: 0 auto; gap: 9px; max-width: 100%; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation-title { font-size: 1.2rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation-text { max-width: none; font-size: 1rem !important; line-height: 1.4; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .explanation-copy { gap: 5px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions > .primary { grid-column: 1 / -1; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions > :only-child { grid-column: 1 / -1; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions > .entry-actions,
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions > .context-actions { grid-column: 1 / -1; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions > button { font-size: .875rem; padding: 8px 10px; min-height: 44px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions .primary { min-height: 46px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .entry-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .entry-actions > button { min-height: 48px; font-size: .875rem; padding: 9px 10px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .next-instruction { font-size: .875rem; line-height: 1.4; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .course-return { font-size: .8125rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .course-return button { padding: 4px 6px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #stage-tools, body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip { grid-column: 1; grid-row: 3; padding: 6px 10px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .stage-toolbar { min-height: 48px; padding: 2px 12px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .source-summary { font-size: .75rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #stage-tools button { min-height: 44px; padding: 7px 9px; font-size: .8125rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip { gap: 6px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar { display: flex; flex-wrap: wrap; gap: 5px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar > .insight-badge { flex: 1 1 110px; margin: 0; max-width: 50%; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-step-select { flex: 1 1 100%; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-step-select label { font-size: .75rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar button, body#diesel-learning.diesel-app[data-app-status="ready"] .insight-compact-actions button { flex: 1 1 0; padding: 7px 8px; font-size: .8125rem; min-height: 44px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .interior-key { font-size: .75rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] div.generator-wave { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 8px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] div.generator-wave > svg { max-height: 52px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] div.generator-wave > span { font-size: .75rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #lab, body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.phase-board-r57) { padding: 12px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .lab-header h2 { font-size: 1.2rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .lab-header p { font-size: .875rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-foot { gap: 6px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chip { min-height: 54px; padding: 7px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line { min-height: 65px; padding: 8px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-next { margin-block: 8px 6px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-outcome { padding-bottom: 8px; margin-top: 8px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board { gap: 11px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-header h2 { font-size: 1.2rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-header button { max-width: 110px; min-height: 44px; font-size: .8125rem; padding: 7px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-review { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-review button { min-height: 44px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-question legend { font-size: 1.075rem; line-height: 1.35; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-choice { padding: 10px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-choice.is-selected { padding: 9px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-page { padding: 12px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-results { gap: 12px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .switch-consumers { gap: 8px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .switch-consumer { padding: 10px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .switch-consumer > strong { font-size: .9375rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .switch-consumer > span:not(.switch-dot) { font-size: .8125rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .switch-reading { padding: 9px 12px; }
}
@media (min-width: 560px) and (max-height: 560px) {
  body#diesel-learning.diesel-app[data-app-status="ready"] { grid-template-rows: 48px 48px minmax(0, 1fr); }
  body#diesel-learning.diesel-app[data-app-status="ready"] .app-header { min-height: 48px; padding-block: 2px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .app-title .brand { display: none; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .app-header [data-action=ideas] { display: none; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .mode-nav { min-height: 48px; padding-block: 2px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #workspace, body#diesel-learning.diesel-app[data-app-status="ready"].large-view #workspace { grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); grid-template-rows: minmax(0, 1fr) auto !important; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .stage-toolbar { min-height: 46px; padding: 1px 10px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .stage-label { font-size: .6875rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .stage-toolbar button { padding: 6px 8px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation { padding: 10px 14px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-inner { gap: 8px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation-title { font-size: 1.125rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation-text { font-size: 1rem !important; line-height: 1.35; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .explanation-copy { gap: 4px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions > button { flex: 1 1 130px; width: auto; min-height: 44px; padding: 7px 9px; font-size: .8125rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation .explanation-actions > .primary { flex-basis: 100%; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .next-instruction { font-size: .8125rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #stage-tools, body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip { padding: 4px 8px; gap: 4px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #stage-tools button, body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar button { min-height: 44px; padding: 7px 8px; font-size: .8125rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .source-summary { display: none; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar { gap: 4px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-step-select { flex-basis: 150px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-step-select label { display: none; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar > .insight-badge { font-size: .6875rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] div.generator-wave { max-width: 330px; grid-template-columns: 135px minmax(0, 1fr); }
  body#diesel-learning.diesel-app[data-app-status="ready"] div.generator-wave > svg { max-height: 45px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #lab, body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.phase-board-r57) { padding: 10px 16px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r57 { display: grid; grid-template-columns: minmax(210px, .85fr) minmax(0, 1.5fr); gap: 6px 16px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r57 .lab-header { grid-column: 1 / -1; margin: 0; align-items: center; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r57 .lab-header h2 { font-size: 1.05rem; margin: 0; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r57 .lab-header p { font-size: .8125rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chips { grid-column: 1; grid-row: 2; gap: 4px; align-self: start; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chip { flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px; min-height: 48px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chip strong { font-size: .75rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chip > span { font-size: .6875rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-next { grid-column: 1; grid-row: 3; margin: 0; font-size: .8125rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-lines { grid-column: 2; grid-row: 2 / 5; gap: 4px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line { min-height: 48px; padding: 6px 8px; gap: 8px; grid-template-columns: 64px minmax(0, 1fr) 88px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line-name { font-size: 1rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line-name small { font-size: .6875rem; margin-top: 2px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line-value strong { font-size: 1rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line-center { gap: 4px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line-loads { font-size: .6875rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-outcome { grid-column: 1; grid-row: 4; margin: 0; padding: 0; border: 0; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-outcome p, body#diesel-learning.diesel-app[data-app-status="ready"] .phase-outcome > span { font-size: .75rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-foot { grid-column: 1 / -1; margin: 0; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .phase-foot-actions > span { display: none; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board { gap: 8px; max-width: 100%; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-header h2 { font-size: 1.15rem; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-header .step-label { display: none; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-question { gap: 5px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-question legend { font-size: 1rem; margin-bottom: 6px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-choice { min-height: 44px; padding: 7px 10px; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-choice.is-selected { padding: 6px 9px; }
}
/* Accessibility escape: layout stays readable at extreme zoom / small height.
   The normal model never scrolls separately; only text can exceed its panel. */
@media (max-width: 359px), (max-height: 339px) {
  body#diesel-learning.diesel-app[data-app-status="ready"] { height: auto; min-height: 100dvh; overflow: auto; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #workspace, body#diesel-learning.diesel-app[data-app-status="ready"].large-view #workspace { position: relative; height: auto; min-height: calc(100dvh - 106px); grid-template-columns: minmax(0, 1fr); grid-template-rows: 230px auto auto !important; overflow: visible; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #workspace > .stage-wrap { grid-column: 1; grid-row: 1; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation { grid-column: 1; grid-row: 2; overflow: visible; border-left: 0; border-top: 2px solid var(--amber); }
  body#diesel-learning.diesel-app[data-app-status="ready"] #stage-tools, body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip { grid-column: 1; grid-row: 3; }
  body#diesel-learning.diesel-app[data-app-status="ready"] #lab { height: auto; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip *, body#diesel-learning.diesel-app[data-app-status="ready"] #insight-overlay *, body#diesel-learning.diesel-app[data-app-status="ready"] .entry-actions *, body#diesel-learning.diesel-app[data-app-status="ready"] .context-actions * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  body#diesel-learning.diesel-app[data-app-status="ready"] #explanation, body#diesel-learning.diesel-app[data-app-status="ready"] .insight-badge, body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar button, body#diesel-learning.diesel-app[data-app-status="ready"] .insight-step-select select { border: 1px solid ButtonText; }
  body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar [aria-pressed=true] { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* R62 contextual actions are deliberately outside the main learning surface. */
body#diesel-learning.diesel-app[data-app-status="ready"] .context-menu, body#diesel-learning.diesel-app[data-app-status="ready"] .practice-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .context-menu > button, body#diesel-learning.diesel-app[data-app-status="ready"] .practice-choices > button { min-height: 48px; justify-content: flex-start; text-align: left; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-heading h3 { font-size: 1.2rem; }
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-heading p { color: #52616b; font-size: .875rem; }
@media (max-width: 600px) {
 body#diesel-learning.diesel-app[data-app-status="ready"] .context-menu, body#diesel-learning.diesel-app[data-app-status="ready"] .practice-choices { grid-template-columns: minmax(0, 1fr); }
 body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar .insight-badge { padding: 4px 6px; font-size: .6875rem; line-height: 1.25; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar > button { flex: 0 1 auto; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #insight-strip > .interior-key { font-size: .75rem; line-height: 1.3; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-heading h3 { font-size: 1.075rem; }
}

/* Labs already have an explicit return button. Keep their experiment area
   instead of repeating the two background-view tabs above it. */
body#diesel-learning.diesel-app[data-app-status="ready"].lab-open { grid-template-rows: auto minmax(0, 1fr); }
body#diesel-learning.diesel-app[data-app-status="ready"].lab-open .mode-nav { display: none; }
@media (min-width: 560px) and (max-height: 560px) {
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-question) { height: 100%; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 18px; align-content: start; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-question) .quiz-header { grid-column: 1 / -1; grid-row: 1; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-question) > p:not(.quiz-state) { grid-column: 2; grid-row: 2; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-question) .quiz-question { grid-column: 1; grid-row: 2 / 5; align-content: start; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-question) .quiz-state { grid-column: 2; grid-row: 3; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-question) .quiz-actions { grid-column: 2; grid-row: 4; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-result-page) { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); grid-template-rows: auto auto auto auto; gap: 8px 18px; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-result-page) .quiz-header { grid-column: 1 / -1; grid-row: 1; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-result-page) .quiz-result-heading { grid-column: 2; grid-row: 2; align-content: start; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-result-page) .quiz-result-page { grid-column: 1; grid-row: 2 / 5; padding: 10px 12px; font-size: .875rem; line-height: 1.4; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-result-page) .quiz-result-page h4 { font-size: 1rem; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-result-page) .quiz-result-page > * + * { margin-top: 5px; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-result-page) .quiz-result-nav { grid-column: 2; grid-row: 3; align-content: start; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-result-page) .quiz-actions { grid-column: 2; grid-row: 4; align-items: start; }
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-result-nav button, body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-actions button { font-size: .8125rem; padding: 7px 10px; }
}
@media (min-width: 560px) and (max-height: 560px) {
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: start; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) > * { width: 100%; max-width: none; margin: 0; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .lab-header { grid-column: 1 / -1; grid-row: 1; align-items: center; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .lab-header .step-label,
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .lab-header p:not(.step-label) { display: none; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .lab-header h2 { font-size: 1.1rem; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .experiment-context { grid-column: 1; grid-row: 2; padding: 5px 9px; font-size: .8125rem; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .comparison-tabs { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .comparison-tabs button { min-width: 0; min-height: 44px; padding: 6px; font-size: .8125rem; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .switch-consumers { grid-column: 1; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; align-self: center; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .switch-consumer { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .switch-consumer strong { font-size: .8125rem; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .switch-consumer > span:not(.switch-dot) { font-size: .75rem; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .switch-dot { margin: 0 0 2px; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .switch-reading { grid-column: 1; grid-row: 4; padding: 8px 12px; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .switch-reading > span { font-size: .8125rem; max-width: 65%; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .switch-reading strong { font-size: 1.5rem; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .lab-bottom { grid-column: 2; grid-row: 3; display: grid; gap: 5px; padding: 0; align-self: center; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .lab-bottom button { min-height: 44px; font-size: .8125rem; padding: 7px 9px; }
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers) .switch-conclusion { grid-column: 2; grid-row: 4; font-size: .8125rem; line-height: 1.35; }
}

/* Interior explanations already expose return-to-trial / previous-view
   actions. Reclaim the background view tabs for the active learning step. */
body#diesel-learning.diesel-app[data-app-status="ready"][data-insight] { grid-template-rows: auto minmax(0, 1fr); }
body#diesel-learning.diesel-app[data-app-status="ready"][data-insight] .mode-nav { display: none; }

/* R64 — instructions, action and observed change belong to one workspace. */
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64{max-width:1280px;margin:0 auto;display:grid;gap:10px;align-content:start}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64 .lab-header,
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64 .experiment-context{margin-bottom:0}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-guidance{padding:12px 16px;border:1px solid #aac3c2;border-left:4px solid #1f5c63;border-radius:9px;background:#e6efed;color:#1d343d}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-guidance h3{margin:2px 0 5px;font-size:1.1rem}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-guidance p{margin:4px 0;line-height:1.4}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-guidance>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chips{margin:0;gap:10px}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:48px}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chip[aria-pressed="true"]{outline:2px solid #216775;outline-offset:1px;background:#eff8f7;color:#193b45;border-color:#216775}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64 button:disabled{opacity:.8;cursor:default}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line.is-current{border-color:#b7e5ed;box-shadow:inset 0 0 0 1px #b7e5ed}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line{min-height:62px;grid-template-columns:120px minmax(0,1fr) 125px}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line-name small{font-size:.7rem;line-height:1.3;color:#dbebef}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line-value small{font-size:.75rem;color:#e5eff2}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-motor-base{display:flex;gap:16px;padding:10px 14px;border:1px solid #a7bdc3;border-radius:8px;background:#eef3f1;align-items:center;font-size:.875rem}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-motor-base strong{white-space:nowrap}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-outcome{margin:0;padding:7px 0;font-size:.9375rem}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-outcome p{margin:0 0 5px}
@keyframes phase-arrival-r64{from{transform:translateX(-8px);box-shadow:inset 5px 0 #a2e0d7}to{transform:translateX(0);box-shadow:inset 0 0 #a2e0d7}}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line.received-load{animation:phase-arrival-r64 .45s ease-out}
body#diesel-learning.diesel-app[data-app-status="ready"] .menu-section+.menu-section{margin-top:24px;border-top:1px solid #c4d0ce;padding-top:18px}
body#diesel-learning.diesel-app[data-app-status="ready"] .menu-section h3{margin:0 0 10px}
body#diesel-learning.diesel-app[data-app-status="ready"] .control-contrast{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0 20px}
body#diesel-learning.diesel-app[data-app-status="ready"] .control-contrast article{border:1px solid #b1c1c5;border-radius:10px;padding:16px;background:#f0f5f2}
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-situation{background:#26343d;border-radius:12px;padding:10px;display:grid;grid-template-columns:minmax(160px,260px) 1fr;align-items:center;gap:18px;color:#f7f8f4}
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-situation svg{width:100%;max-height:190px;display:block}
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-situation .flow-motion{animation:none}
body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-situation p{color:inherit;font-weight:600;margin:0}
body#diesel-learning.diesel-app[data-app-status="ready"] .switch-chronology{display:flex;gap:10px;list-style:none;padding:0;margin:0 0 10px}
body#diesel-learning.diesel-app[data-app-status="ready"] .switch-chronology li{flex:1;display:grid;gap:4px;padding:10px;border-top:3px solid #a0aeb4;background:#edf2f0;font-size:.875rem}
body#diesel-learning.diesel-app[data-app-status="ready"] .switch-chronology li.is-done{border-top-color:#317b7e;background:#dcebe7}
body#diesel-learning.diesel-app[data-app-status="ready"] #explanation-actions button{white-space:normal;overflow-wrap:anywhere}
body#diesel-learning.diesel-app[data-app-status="ready"] .insight-toolbar{flex-wrap:wrap}
@media(max-width:680px){
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64{gap:9px}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-guidance{padding:10px 12px}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chip{display:grid;font-size:.8rem;padding:8px 6px;gap:4px;overflow-wrap:anywhere}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-chip>span:first-child{display:none}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line{grid-template-columns:44px minmax(0,1fr) 76px;padding:8px;gap:7px}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line-name small{display:none}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-line-loads{font-size:.75rem}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-motor-base{display:grid;gap:5px;font-size:.8rem}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-motor-base strong{white-space:normal}
 body#diesel-learning.diesel-app[data-app-status="ready"] .phase-foot{display:grid;gap:8px}
 body#diesel-learning.diesel-app[data-app-status="ready"] .control-contrast{grid-template-columns:1fr}
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-situation{grid-template-columns:minmax(130px,1fr) 1fr;gap:8px;font-size:.8rem}
 body#diesel-learning.diesel-app[data-app-status="ready"] .switch-chronology{flex-wrap:wrap}
 body#diesel-learning.diesel-app[data-app-status="ready"] .switch-chronology li{flex-basis:40%}
}
@media(min-width:560px) and (max-height:560px){
 body#diesel-learning.diesel-app[data-app-status="ready"] #lab:has(.switch-consumers){display:block;overflow:auto}
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-board:has(.quiz-question){display:block}
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-situation{float:left;width:38%;margin:0 18px 12px 0;box-sizing:border-box;display:block}
 body#diesel-learning.diesel-app[data-app-status="ready"] .quiz-situation svg{max-height:140px}
}
@media(prefers-reduced-motion:reduce){body#diesel-learning .phase-line.received-load{animation:none}}
body#diesel-learning.reduce-motion .phase-line.received-load{animation:none}
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64[data-guide="0"] .phase-chips,
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64[data-guide="1"] .phase-chips,
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64[data-guide="0"] .phase-next,
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64[data-guide="1"] .phase-next,
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64[data-guide="3"] .phase-next,
body#diesel-learning.diesel-app[data-app-status="ready"] .phase-board-r64:not([data-guide="4"]) .phase-foot{display:none}
.phase-moving-device{position:fixed;z-index:1000;pointer-events:none;border:1px solid #9bd4d2;border-radius:6px;padding:4px 8px;background:#e8f6f2;color:#193b45;box-shadow:0 4px 14px #193b4526;font:600 .875rem/1.4 "Confyra Learning",Arial,sans-serif}

/* R66: two persistent discovery modes; part information stays next to the model. */
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] {grid-template-rows:auto auto minmax(0,1fr)}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .mode-nav {display:flex}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #stage-tools {display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;align-items:center;padding:8px 18px;min-width:0;background:#22343c;border-top:1px solid #566e76}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #stage-tools[hidden] {display:none}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-modes {display:flex;gap:4px;padding:4px;border:1px solid #677b82;border-radius:9px;background:#1b2d35;min-width:0}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-modes button {border-color:transparent;color:#eff6f7;background:transparent;min-height:44px;line-height:1.25}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-modes button[aria-pressed="true"] {background:#e6af52;color:#1b2931;border-color:#e6af52;box-shadow:0 1px 5px #0002}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-utilities {display:flex;gap:6px;align-items:center;flex-wrap:wrap}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-utilities button {background:transparent;border-color:#748991;color:#e9f0f2;min-height:44px}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #explanation .explanation-inner {margin-block:auto;gap:15px}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .tour-next-hint {margin:0;padding:9px 0 9px 12px;border-left:3px solid #c08b39;color:#475b64;font-size:.85rem;line-height:1.45}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .detail-sections {display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 10px}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .detail-sections button {font-size:.8125rem;min-height:44px;min-width:0;padding:7px;white-space:normal}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .detail-sections button[aria-pressed="true"] {border-color:#236572;background:#dfefec;color:#153e47;box-shadow:inset 0 0 0 1px #236572}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #course-context .generator-wave {display:block;width:100%;margin:0 0 8px}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #course-context .generator-wave svg {width:100%;max-height:80px;background:#26343d;border-radius:7px}
body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #course-context .generator-wave>span {font-size:.6875rem;color:#52656c}
body#diesel-learning.diesel-app[data-app-status="ready"] .diesel-knowledge-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
body#diesel-learning.diesel-app[data-app-status="ready"] .diesel-knowledge-grid article {padding:16px;border:1px solid #aebfbe;border-radius:10px;background:#edf3ee}
body#diesel-learning.diesel-app[data-app-status="ready"] .diesel-knowledge-grid article+article {background:#f6f0e5;border-color:#c9bfa8}
body#diesel-learning.diesel-app[data-app-status="ready"] .diesel-knowledge-grid ul {margin:10px 0 0;padding-left:20px}
body#diesel-learning.diesel-app[data-app-status="ready"] .diesel-knowledge-grid li+li {margin-top:8px}
@media(max-width:959px){
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #stage-tools {padding:5px 10px;gap:4px 8px}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-modes {flex:1 1 100%;justify-content:center;padding:2px}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-modes button {flex:1;min-height:44px;padding:7px;font-size:.8125rem}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-utilities {flex:1;justify-content:center;gap:5px}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-utilities button {min-height:40px;font-size:.75rem;padding:7px 10px}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #explanation .explanation-inner {gap:8px}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .tour-next-hint {font-size:.75rem;padding:5px 0 5px 9px}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .detail-sections {grid-template-columns:repeat(4,minmax(0,1fr));margin:0;gap:4px}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .detail-sections button {font-size:.7rem;padding:5px;overflow-wrap:anywhere}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #course-context .generator-wave {display:none}
}
@media(max-width:600px){body#diesel-learning.diesel-app[data-app-status="ready"] .diesel-knowledge-grid{grid-template-columns:1fr}}
@media(min-width:760px) and (max-height:560px){
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] #stage-tools {padding:4px 8px;gap:4px}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-modes {flex:0 1 auto}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .discovery-utilities {flex:0 1 auto}
 body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] .tour-next-hint {display:none}
}
@media(prefers-reduced-motion:reduce){body#diesel-learning.diesel-app[data-app-status="ready"][data-discovery] *{scroll-behavior:auto}}