/* CONFYRA · Diesel verstehen · R46
   An independent learning surface. All component rules are scoped to this app. */
.diesel-app {
  --paper: #f4f1e9;
  --paper-bright: #fffdf8;
  --graphite: #26343d;
  --ink: #1d2932;
  --muted: #52616b;
  --amber: #e6af52;
  --amber-hover: #f2c477;
  --blue: #70c9f2;
  --line: #ccd0cd;
  --stage-line: #52616b;
  --stage-ink: #f6f7f8;
  --success: #246747;
  --warning: #865113;
  --danger: #9b3433;
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--paper);
  font: 400 16px / 1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  accent-color: var(--ink);
}
.diesel-app *, .diesel-app *::before, .diesel-app *::after { box-sizing: border-box; }
.diesel-app [hidden] { display: none !important; }
.diesel-app :where(h1, h2, h3, p, figure) { margin: 0; }
.diesel-app :where(h1, h2, h3) { line-height: 1.2; text-wrap: balance; }
.diesel-app :where(button, input, select, textarea) { font: inherit; }
.diesel-app :where(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
.diesel-app :where(a) { color: #214e66; text-underline-offset: .18em; }
.diesel-app :where(button, .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: 44px;
  min-height: 46px;
  padding: .65rem 1rem;
  border: 1px solid #bdc5c7;
  border-radius: 10px;
  color: var(--ink);
  background: var(--paper-bright);
  font-weight: 650;
  font-size: .9375rem;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.diesel-app :where(button, .button):hover { background: #ebe8de; border-color: #71828b; }
.diesel-app :where(button, .button):active { background: #dfded6; }
.diesel-app :where(button, .button).primary {
  min-height: 48px;
  background: var(--amber);
  color: var(--ink);
  border-color: #b28132;
  box-shadow: 0 2px 0 #ba8a3a33;
}
.diesel-app :where(button, .button).primary:hover { background: var(--amber-hover); border-color: #947028; }
.diesel-app :where(button, .button).secondary { background: var(--paper-bright); }
.diesel-app :where(button, .button).quiet { background: transparent; border-color: transparent; box-shadow: none; }
.diesel-app :where(button, .button).quiet:hover { background: #e8e6dd; border-color: #bdc5c7; }
.diesel-app :where(button, .button)[aria-pressed="true"],
.diesel-app :where(button, .button)[aria-selected="true"] { background: var(--graphite); color: var(--stage-ink); border-color: var(--graphite); }
.diesel-app :where(button, .button):disabled,
.diesel-app :where(button, .button)[aria-disabled="true"] {
  color: #536068;
  background: #e7ebed;
  border-color: #b6c0c6;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}
.diesel-app :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #215e7c;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--paper-bright);
}
.diesel-app :where(button, a, h2, h3, p, label, li, dd, dt) { overflow-wrap: anywhere; }
.diesel-app .icon { width: 20px; height: 20px; flex: 0 0 20px; }
.diesel-app .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.diesel-app .skip-link { position: absolute; z-index: 100; left: 1rem; top: -10rem; padding: .8rem 1rem; background: var(--paper-bright); }
.diesel-app .skip-link:focus { top: 1rem; }

/* One broad stage and one calm explanation strip. */
.diesel-app .app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  padding: 8px max(24px, env(safe-area-inset-right)) 8px max(24px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--paper-bright);
}
.diesel-app .app-header > :last-child { justify-self: end; }
.diesel-app .brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 800; letter-spacing: .1em; text-decoration: none; }
.diesel-app .brand-mark, .diesel-app .brand-dot { color: #855315; }
.diesel-app .back-link, .diesel-app .back { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .9375rem; color: #344852; text-decoration: none; }
.diesel-app .back-link:hover, .diesel-app .back:hover { text-decoration: underline; }
.diesel-app .app-title { font-size: 1.05rem; font-weight: 750; letter-spacing: -.025em; text-align: center; }
.diesel-app .app-title h1 { font-size: 1.05rem; font-weight: 750; line-height: 1.3; letter-spacing: -.025em; }
.diesel-app .app-title .brand { display: flex; justify-content: center; gap: 0; font-size: .6875rem; line-height: 1.35; letter-spacing: .13em; }
.diesel-app .app-title .brand > span { color: #855315; }
.diesel-app .app-title small { display: block; color: var(--muted); font-size: .6875rem; font-weight: 650; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.diesel-app .header-actions { display: flex; gap: .5rem; align-items: center; }
.diesel-app .mode-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  min-height: 54px;
  padding: 4px 16px;
  background: var(--paper);
  border-bottom: 1px solid #bfc8cb;
}
.diesel-app .mode-nav button { min-width: 155px; min-height: 44px; padding: .45rem 1.1rem; border-color: transparent; background: transparent; border-radius: 8px; }
.diesel-app .mode-nav button[aria-selected="true"], .diesel-app .mode-nav button[aria-pressed="true"], .diesel-app .mode-nav button.active { color: var(--stage-ink); background: var(--graphite); border-color: var(--graphite); }
.diesel-app #workspace { display: flex; flex-direction: column; min-width: 0; }
.diesel-app .stage-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  order: 0;
  min-width: 0;
  min-height: 0;
  color: var(--stage-ink);
  background: radial-gradient(ellipse at 48% 33%, #41545e 0%, #2e3d46 45%, var(--graphite) 78%);
  isolation: isolate;
}
/* Keep the scene toolbar in flow: it must never cover a component or diagram. */
.diesel-app .stage-label { color: #d4e1e8; font-size: .8125rem; font-weight: 650; line-height: 1.35; letter-spacing: .03em; }
.diesel-app .stage-label strong { color: #fff; }
.diesel-app .stage-toolbar { display: flex; position: relative; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; flex: 0 0 auto; min-height: 56px; padding: 6px max(24px, env(safe-area-inset-right)) 6px max(24px, env(safe-area-inset-left)); border-bottom: 1px solid #68808d55; }
.diesel-app .stage-toolbar > .stage-label { flex: 1 1 10rem; min-width: 0; }
.diesel-app .stage-toolbar > button { flex: 0 0 auto; }
.diesel-app .stage-toolbar button, .diesel-app .stage-button {
  min-height: 44px;
  padding: .55rem .75rem;
  color: var(--stage-ink);
  border: 1px solid #778993;
  background: #26343deb;
  font-size: .8125rem;
  box-shadow: 0 2px 8px #101a2230;
}
.diesel-app .stage-toolbar button:hover, .diesel-app .stage-button:hover { border-color: #d4e1e8; background: #3d515e; }
.diesel-app .stage-toolbar button[aria-pressed="true"] { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.diesel-app .stage-toolbar :focus-visible, .diesel-app .stage-wrap :focus-visible { outline-color: var(--amber); box-shadow: 0 0 0 2px var(--graphite); }
.diesel-app .model-stage, .diesel-app #supply-scene { position: relative; min-width: 0; width: 100%; }
.diesel-app .model-stage { overflow: hidden; }
.diesel-app #model-canvas, .diesel-app #model-fallback { display: block; width: 100%; height: 100%; min-height: 0; }
.diesel-app #model-canvas { position: absolute; inset: 0; touch-action: none; outline-offset: -5px; }
.diesel-app #model-fallback { position: absolute; inset: 0; }
.diesel-app #model-fallback svg { display: block; width: 100%; height: 100%; }
.diesel-app .model-caption { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); color: #dce6ea; font-size: .75rem; text-align: center; pointer-events: none; }
.diesel-app .stage-tools:empty { display: none; }
.diesel-app .stage-tools button { min-height: 44px; background: #26343deb; border-color: #778993; color: #f6f7f8; box-shadow: 0 2px 8px #101a2230; }
.diesel-app .stage-tools button:hover { background: #3d515e; border-color: #d4e1e8; }
.diesel-app .stage-tools button[aria-pressed="true"] { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.diesel-app .scene-hint { position: absolute; bottom: 16px; left: max(24px, env(safe-area-inset-left)); right: 24px; color: #e2e9ed; font-size: .8125rem; pointer-events: none; }
.diesel-app .scene-hint span { display: inline-block; padding: .25rem .55rem; border-radius: 6px; background: #26343de8; }
.diesel-app .scene-loading { display: grid; place-content: center; position: absolute; inset: 0; padding: 2rem; text-align: center; color: var(--stage-ink); }
.diesel-app .scene-status { position: absolute; z-index: 2; bottom: 16px; right: 24px; max-width: 22rem; padding: .55rem .8rem; border: 1px solid #6d838f; border-radius: 9px; background: #26343ded; font-size: .8125rem; }
.diesel-app #explanation { order: 2; flex: 0 0 auto; position: relative; padding: 20px max(28px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); border-top: 3px solid var(--amber); background: var(--paper-bright); }
.diesel-app .explanation-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(20px, 4vw, 64px); row-gap: 5px; width: 100%; max-width: 1420px; margin: auto; }
.diesel-app .explanation-copy { display: grid; gap: 5px; min-width: 0; }
.diesel-app .step-label { grid-column: 1; color: #76501b; font-size: .75rem; font-weight: 750; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.diesel-app #explanation-title { grid-column: 1; font-size: clamp(1.125rem, 1.65vw, 1.55rem); font-weight: 750; letter-spacing: -.025em; }
.diesel-app #explanation-text { grid-column: 1; max-width: 74ch; color: #3c4c56; font-size: 1rem; line-height: 1.5; }
.diesel-app .explanation-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; max-width: 430px; }
.diesel-app .explanation-actions .primary { flex: 1 0 160px; }
.diesel-app .explanation-actions .quiet { font-size: .875rem; min-height: 44px; padding: .55rem .7rem; }
.diesel-app .explanation-extra { grid-column: 1 / -1; margin-top: .5rem; }
.diesel-app #notice { position: fixed; z-index: 50; top: calc(126px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(600px, calc(100% - 32px)); padding: .75rem 1rem; color: var(--ink); background: var(--paper-bright); border: 1px solid #a0adae; border-left: 4px solid #a77324; border-radius: 10px; box-shadow: 0 8px 28px #10202c30; font-size: .9375rem; pointer-events: none; }
.diesel-app #notice:empty { display: none; }
.diesel-app .app-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; padding: 0 max(24px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); min-height: 46px; color: #52616b; border-top: 1px solid var(--line); background: var(--paper); font-size: .75rem; }
.diesel-app .app-footer .quiet { padding: .4rem 0; font-size: .75rem; }
.diesel-app .app-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.diesel-app .reading-content { max-width: 80ch; margin: 2rem auto; padding: 0 20px; }
.diesel-app .reading-content > * + * { margin-top: 1rem; }

/* The energy diagram is intentionally a compact learning picture, never a
   scaled-down control cabinet. Its mobile geometry comes from the renderer. */
.diesel-app #supply-scene { display: grid; align-items: center; padding: 8px 24px 12px; }
.diesel-app #supply-scene > svg { width: 100%; height: 100%; max-height: 760px; display: block; overflow: visible; }
.diesel-app .supply-node { fill: #344a58; stroke: #8396a1; stroke-width: 1.5; }
.diesel-app .supply-node.active, .diesel-app .supply-node[data-active="true"] { stroke: var(--blue); stroke-width: 2.5; fill: #254758; }
.diesel-app .supply-node.selected { stroke: var(--amber); stroke-width: 2.5; }
.diesel-app .supply-label, .diesel-app .flow-label { fill: var(--stage-ink); font: 600 17px system-ui, sans-serif; }
.diesel-app .supply-caption { fill: #d6e2e9; font: 400 14px system-ui, sans-serif; }
.diesel-app .flow-path { fill: none; stroke: #758892; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.diesel-app .flow-active { stroke: var(--blue); stroke-width: 6; }
.diesel-app .flow-motion { stroke: #e3f6ff; stroke-dasharray: 6 26; animation: diesel-energy 1.4s linear infinite; }
.diesel-app .flow-inactive { stroke: #71818a; stroke-dasharray: 5 8; opacity: .8; }
.diesel-app .supply-warning { fill: #ffda9a; }
.diesel-app .supply-select { cursor: pointer; touch-action: manipulation; }
.diesel-app .supply-select:hover > rect { stroke: #e6af52; stroke-width: 3; }
.diesel-app .supply-select:focus-visible { outline: none; box-shadow: none; }
.diesel-app .supply-select:focus-visible > rect { stroke: #ffda99; stroke-width: 4; }
.diesel-app .source-tag { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #74828b; padding: .4rem .75rem; border-radius: 99px; font-size: .875rem; }
@keyframes diesel-energy { to { stroke-dashoffset: -64; } }

/* Shared learning surfaces; important meaning is also expressed in words. */
.diesel-app dialog { width: min(880px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #aab6b9; border-radius: 18px; color: var(--ink); background: var(--paper-bright); box-shadow: 0 24px 80px #0c192559; overflow: auto; overscroll-behavior: contain; }
.diesel-app dialog::backdrop { background: #14212dbb; backdrop-filter: blur(3px); }
.diesel-app dialog > header, .diesel-app .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; z-index: 3; top: 0; padding: 18px 24px; background: var(--paper-bright); border-bottom: 1px solid var(--line); }
.diesel-app dialog > header h2, .diesel-app .dialog-header h2 { font-size: 1.35rem; letter-spacing: -.025em; }
.diesel-app .dialog-content, .diesel-app #dialog-content { padding: 24px; }
.diesel-app .dialog-content > * + *, .diesel-app #dialog-content > * + * { margin-top: 1rem; }
.diesel-app .dialog-content p, .diesel-app #dialog-content p { max-width: 74ch; }
.diesel-app .dialog-content :where(ul, ol), .diesel-app #dialog-content :where(ul, ol) { padding-left: 1.5rem; }
.diesel-app .dialog-content li + li, .diesel-app #dialog-content li + li { margin-top: .5rem; }
.diesel-app .dialog-content h3, .diesel-app #dialog-content h3 { font-size: 1.1rem; }
.diesel-app .lesson-drawer { display: grid; gap: 12px; }
.diesel-app .lesson-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 18px; border: 1px solid #c5cecF; border-radius: 12px; background: #fbfaf5; text-align: left; }
.diesel-app button.lesson-card { width: 100%; }
.diesel-app .lesson-card:hover { background: #f0ede3; border-color: #778e9a; }
.diesel-app .lesson-card.active, .diesel-app .lesson-card[aria-current="step"] { border-color: #aa7d35; background: #fcf0d7; }
.diesel-app .lesson-number { display: grid; place-content: center; width: 38px; height: 38px; border: 1px solid #aab8be; border-radius: 50%; color: var(--ink); background: #e6ecee; font-weight: 750; }
.diesel-app .lesson-card.active .lesson-number { background: var(--amber); border-color: #ad7e31; }
.diesel-app .lesson-card h3, .diesel-app .lesson-card strong { display: block; font-size: 1rem; }
.diesel-app .lesson-card p, .diesel-app .lesson-card small { display: block; font-size: .9375rem; line-height: 1.45; color: #4b5e68; font-weight: 400; margin-top: 4px; }
.diesel-app .lesson-state { display: inline-flex; align-items: center; min-height: 28px; padding: .2rem .55rem; border-radius: 6px; background: #e3eee5; color: #25583c; font-size: .75rem; font-weight: 650; }
.diesel-app .component-grid, .diesel-app .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.diesel-app .component-grid button, .diesel-app .choice-grid button { justify-content: flex-start; text-align: left; min-height: 58px; padding: .85rem 1rem; }
.diesel-app .component-grid button small, .diesel-app .choice-grid button small { display: block; font-size: .875rem; font-weight: 400; color: inherit; }
.diesel-app .component-grid button[aria-pressed="true"], .diesel-app .choice-grid button[aria-pressed="true"] { border-color: var(--graphite); background: var(--graphite); color: var(--stage-ink); }
.diesel-app .detail-facts { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: .55rem 1rem; padding: 18px; border-radius: 10px; background: #e9eeeb; }
.diesel-app .detail-facts dt { font-weight: 700; }
.diesel-app .detail-facts dd { margin: 0; }
.diesel-app .learning-note, .diesel-app .feedback { padding: 16px 18px; border: 1px solid #bfd0d6; border-left: 4px solid #387998; border-radius: 9px; background: #eaf2f5; color: #243d4b; line-height: 1.55; }
.diesel-app .feedback.success { border-color: #a5c3b0; border-left-color: #246747; background: #e7f2e9; color: #244d35; }
.diesel-app .feedback.warning, .diesel-app .learning-note.warning { border-color: #d5bb8c; border-left-color: #a16717; background: #fbf0db; color: #674313; }
.diesel-app .feedback.error { border-color: #d3b2af; border-left-color: #9b3433; background: #fbefec; color: #742a29; }
.diesel-app .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.diesel-app .muted { color: var(--muted); }
.diesel-app .eyebrow { color: #76501b; font-size: .75rem; line-height: 1.5; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.diesel-app .reading { max-width: 76ch; }
.diesel-app details { border: 1px solid #bec9cb; border-radius: 9px; padding: .3rem 1rem; background: #faf9f4; }
.diesel-app summary { min-height: 44px; padding: .55rem 0; font-weight: 650; cursor: pointer; }
.diesel-app details[open] { padding-bottom: 1rem; }
.diesel-app details[open] > * + * { margin-top: .7rem; }
.diesel-app label { display: block; font-weight: 650; }
.diesel-app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
.diesel-app :where(select, textarea) { display: block; width: 100%; min-height: 46px; padding: .7rem .8rem; margin-top: .35rem; border: 1px solid #899da8; border-radius: 8px; background: white; color: var(--ink); font-size: 16px; }
.diesel-app input[type="range"] { display: block; width: 100%; min-height: 44px; margin: 4px 0; }
.diesel-app input[type="checkbox"], .diesel-app input[type="radio"] { width: 20px; height: 20px; flex: 0 0 20px; }
.diesel-app .check-label { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 400; }
.diesel-app textarea { min-height: 110px; resize: vertical; }

/* A separate experiment bench, with three persistent and labelled phases. */
.diesel-app #lab { flex: 1; background: var(--paper); padding: 26px max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); }
.diesel-app.lab-open .stage-wrap, .diesel-app.lab-open #explanation, .diesel-app.lab-open #stage-tools { display: none; }
.diesel-app .lab-header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 1rem; max-width: 1320px; margin: 0 auto 20px; }
.diesel-app .lab-header h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); letter-spacing: -.03em; }
.diesel-app .lab-header p { max-width: 70ch; color: #465a65; margin-top: .55rem; }
.diesel-app .lab-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: start; gap: 24px; max-width: 1320px; margin: auto; }
.diesel-app .phase-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 24px; color: var(--stage-ink); background: var(--graphite); border: 1px solid #617a88; border-radius: 14px; }
.diesel-app .phase-track { --phase: #70c9f2; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 12px; border: 1px solid #667d8a; background: #30434f; border-radius: 10px; }
.diesel-app .phase-track:nth-child(2) { --phase: #e6af52; }
.diesel-app .phase-track:nth-child(3) { --phase: #bca4ed; }
.diesel-app .phase-track h3, .diesel-app .phase-track strong { color: #fff; font-size: 1.1rem; }
.diesel-app .phase-track .phase-value, .diesel-app .phase-value { font-size: 1.4rem; font-weight: 750; color: var(--phase); font-variant-numeric: tabular-nums; }
.diesel-app .phase-track p, .diesel-app .phase-track small { font-size: .875rem; color: #e2e9ed; line-height: 1.4; }
.diesel-app .phase-bar { height: 12px; width: 100%; border: 1px solid #9dabb1; background: #192832; border-radius: 99px; overflow: hidden; }
.diesel-app .phase-bar > span, .diesel-app .phase-bar > i { display: block; height: 100%; max-width: 100%; background: var(--phase); border-radius: inherit; transition: width .25s ease; }
.diesel-app .phase-track[data-warning="true"] { border-color: #ffb978; }
.diesel-app .phase-track[data-warning="true"] .phase-bar > span { background: #ffb978; }
.diesel-app .phase-track[data-overload="true"] { border-color: #ffb1a7; }
.diesel-app .phase-track[data-overload="true"] .phase-bar > span { background: #ffb1a7; }
.diesel-app .load-list { display: grid; gap: 10px; }
.diesel-app .load-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: 16px; border: 1px solid #b6c6cd; border-radius: 10px; background: var(--paper-bright); }
.diesel-app .load-card[aria-pressed="true"], .diesel-app .load-card.selected { background: #fff1d7; color: var(--ink); border-color: #a8782c; }
.diesel-app .load-card strong { display: block; font-size: 1rem; }
.diesel-app .load-card small { display: block; font-size: .875rem; color: #4a606b; font-weight: 400; }
.diesel-app .load-card button { min-width: 56px; }
.diesel-app .phase-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.diesel-app .phase-actions button { min-height: 48px; }
.diesel-app .lab-result { grid-column: 1 / -1; }
.diesel-app .lab-footer { max-width: 1320px; margin: 20px auto 0; display: flex; flex-wrap: wrap; gap: 10px; }
.diesel-app .comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.diesel-app .comparison-card { padding: 20px; border: 1px solid #c4cdd1; background: #fbfaf5; border-radius: 12px; }
.diesel-app .comparison-card > * + * { margin-top: .75rem; }
.diesel-app .comparison-card h3 { font-size: 1.125rem; }
.diesel-app .comparison-card.active { border-color: #a8782c; background: #fff1d7; }
.diesel-app .metric-row { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; }
.diesel-app .metric-row strong { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* A bounded graphic, then actions in normal document flow. Large text can grow
   naturally; no body scroll lock or fixed-height explanation clips the content. */
.diesel-app .model-stage, .diesel-app #supply-scene { flex: 0 0 auto; height: clamp(310px, calc(100dvh - 420px), 700px); min-height: 0; }
.diesel-app #supply-scene { display: block; padding: 8px 28px 10px; }
.diesel-app #supply-scene > svg { height: 100%; max-height: none; }
.diesel-app .stage-tools { order: 1; position: relative; display: grid; flex: 0 0 auto; gap: 9px; width: 100%; padding: 10px max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left)); border-top: 1px solid #74899366; color: var(--stage-ink); background: #24323c; }
.diesel-app .stage-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; }
.diesel-app .status-chips { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 32px; color: #d9e4ea; font-size: .875rem; }
.diesel-app .status-chips > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.diesel-app .status-chips strong { color: var(--stage-ink); font-size: 1rem; }
.diesel-app .model-state { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; color: #d9e4ea; font-size: .875rem; }
.diesel-app .model-controls button[data-action^="rotate-"], .diesel-app .model-controls button[data-action^="zoom-"] { width: 44px; padding: .4rem; font-size: 1.3rem; }
.diesel-app .model-caption { bottom: 9px; padding: .2rem .5rem; border-radius: 5px; background: #26343de8; }
/* Keep route, app name and menu visible in the expanded view. */
.diesel-app.large-view .app-footer { display: none; }
.diesel-app.large-view .model-stage, .diesel-app.large-view #supply-scene { height: clamp(410px, calc(100dvh - 350px), 920px); }
.diesel-app.reduce-motion *, .diesel-app.reduce-motion *::before, .diesel-app.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.diesel-app.reduce-motion .flow-motion { stroke-dasharray: none; }

.diesel-app .topic-grid, .diesel-app .menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.diesel-app .topic-card, .diesel-app .component-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .45rem; min-height: 90px; padding: 17px 18px; text-align: left; border-left: 4px solid #6a929f; }
.diesel-app .topic-card:nth-child(3n+2), .diesel-app .component-card:nth-child(3n+2) { border-left-color: #bb8536; }
.diesel-app .topic-card:nth-child(3n+3), .diesel-app .component-card:nth-child(3n+3) { border-left-color: #638976; }
.diesel-app .topic-card strong, .diesel-app .component-card strong { font-size: 1rem; }
.diesel-app .topic-card > span, .diesel-app .component-card > span { color: #465a65; font-size: .9375rem; line-height: 1.5; font-weight: 400; }
.diesel-app .menu-grid button { justify-content: flex-start; text-align: left; }
.diesel-app .detail-lead { font-size: 1.125rem; line-height: 1.55; font-weight: 600; color: #294957; }
.diesel-app .detail-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: .4rem; }
.diesel-app .small-note { max-width: 100ch; font-size: .875rem; line-height: 1.55; color: #52616b; }
.diesel-app .status-definition { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr); gap: 8px 18px; padding: 18px; margin: 0; border: 1px solid #b9ced5; border-radius: 10px; background: #e9f0f2; }
.diesel-app .status-definition dt { font-weight: 700; }
.diesel-app .status-definition dd { margin: 0; }
.diesel-app .ups-example { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 24px; border: 1px solid #708c9a; border-radius: 12px; background: var(--graphite); color: var(--stage-ink); }
.diesel-app .ups-example > :not([aria-hidden]) { padding: 12px 16px; border: 1px solid #8da7b3; border-radius: 8px; background: #354b58; text-align: center; }
.diesel-app .ups-example > strong { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.diesel-app .ups-example > [aria-hidden] { color: var(--blue); font-size: 1.5rem; }

/* Runtime lab markup. The meter scale is relative and not a capacity limit. */
.diesel-app #lab > :not(.lab-header) { max-width: 1320px; margin-left: auto; margin-right: auto; }
.diesel-app .phase-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.diesel-app .phase-heading > span { color: var(--phase); font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.diesel-app .phase-meter { width: 100%; height: 15px; overflow: hidden; border: 1px solid #94a9b5; border-radius: 99px; background: #192832; }
.diesel-app .phase-meter > .phase-bar { display: block; width: clamp(0%, var(--level, 0%), 100%); height: 100%; margin: 0; border: 0; border-radius: inherit; background: var(--phase); transition: width .25s ease; }
.diesel-app .phase-track > span { color: #e2e9ed; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.diesel-app .phase-caption { padding: 8px 3px 0; font-size: .8125rem; color: #53646d; }
.diesel-app .phase-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 22px; }
.diesel-app .load-card { grid-template-columns: minmax(0, 1fr); justify-content: stretch; text-align: left; gap: 5px; padding: 14px 17px; }
.diesel-app .load-card > span { font-weight: 400; font-size: .9375rem; color: #49606c; }
.diesel-app .assign-panel { display: grid; align-content: start; gap: 12px; padding: 24px; border: 1px solid #b5c6cc; border-radius: 12px; background: #fffdf8; }
.diesel-app .assign-panel h3 { font-size: 1.25rem; }
.diesel-app .assign-panel select { margin: 0; }
.diesel-app .assign-panel .primary { justify-self: start; min-width: 210px; }
.diesel-app .notice-inline, .diesel-app .phase-feedback { padding: 13px 15px; border-left: 4px solid #2c708b; border-radius: 6px; background: #e9f2f5; color: #254554; }
.diesel-app .phase-feedback { border-left-color: #417952; background: #ebf3e9; color: #31503b; }
.diesel-app .lab-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 20px; padding-bottom: 14px; }
.diesel-app .comparison-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.diesel-app .comparison-tabs button { min-width: 180px; }
.diesel-app .switch-consumers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.diesel-app .switch-consumer { display: grid; align-content: start; grid-template-columns: 18px minmax(0, 1fr); gap: 8px 10px; padding: 20px; border: 1px solid #b3c4cc; border-radius: 12px; background: #fffdf8; }
.diesel-app .switch-consumer > strong { font-size: 1.0625rem; }
.diesel-app .switch-consumer > span:not(.switch-dot) { grid-column: 2; color: #4d626e; font-size: .9375rem; }
.diesel-app .switch-dot { width: 13px; height: 13px; margin-top: 6px; border: 2px solid #72858e; border-radius: 50%; background: #e6eae8; }
.diesel-app .switch-consumer.is-on { background: #e7f1f4; border-color: #3f7c97; box-shadow: inset 0 3px 0 #3f7c97; }
.diesel-app .switch-consumer.is-on .switch-dot { border-color: #245570; background: #3f83a5; }
.diesel-app .switch-reading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; padding: 18px 24px; background: var(--graphite); border-radius: 12px; color: var(--stage-ink); }
.diesel-app .switch-reading strong { color: var(--amber); font-size: 2rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.diesel-app .switch-reading + .lab-bottom + p { padding-top: 4px; padding-bottom: 12px; }

/* Experiment selection stays close to the response on a narrow screen. */
.diesel-app .load-picker { display: none; }
.diesel-app .load-options { min-width: 0; }
.diesel-app .experiment-context { padding: 12px 16px; margin-bottom: 16px; border-left: 4px solid #39748b; border-radius: 7px; background: #e8f1f3; color: #294a59; font-size: 1rem; }
.diesel-app .technical-detail { margin-top: 18px; }
.diesel-app .technical-detail > p, .diesel-app .technical-detail > div { max-width: 76ch; }
.diesel-app .glossary-list { margin: 0; display: grid; gap: 12px; }
.diesel-app .glossary-list > div { padding: 16px 18px; border: 1px solid #c6d1d4; border-left: 4px solid #678a9b; border-radius: 9px; background: #f4f7f5; }
.diesel-app .glossary-list dt { font-weight: 750; color: #243f4d; }
.diesel-app .glossary-list dd { margin: .4rem 0 0; color: #3d5360; }
.diesel-app .glossary-list p { margin-top: .5rem; }

/* Desktop keeps the broad model; text measure stays comfortable. */
@media (min-width: 1700px) {
  .diesel-app .model-stage, .diesel-app #supply-scene { height: clamp(470px, calc(100dvh - 420px), 860px); }
  .diesel-app #explanation { padding-top: 24px; padding-bottom: 24px; }
  .diesel-app #explanation-text { font-size: 1.0625rem; }
}
@media (max-width: 1000px) {
  .diesel-app .app-header { padding-right: 18px; padding-left: 18px; gap: .6rem; }
  .diesel-app .explanation-actions { max-width: 300px; }
  .diesel-app #explanation { padding: 18px 22px max(18px, env(safe-area-inset-bottom)); }
  .diesel-app .lab-body { grid-template-columns: minmax(0, 1fr); }
  .diesel-app .phase-tracks { gap: 14px; padding: 20px; }
  .diesel-app .switch-consumers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .diesel-app .app-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) auto; min-height: 58px; gap: .5rem; padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); }
  .diesel-app .app-header .back-link, .diesel-app .app-header .back { font-size: .875rem; gap: .25rem; }
  .diesel-app .app-header button { padding: .5rem .6rem; font-size: .875rem; }
  .diesel-app .app-title h1 { font-size: 1rem; }
  .diesel-app .app-title .brand { font-size: .625rem; letter-spacing: .1em; }
  .diesel-app .app-title small, .diesel-app .app-header [data-action="ideas"] { display: none; }
  .diesel-app .header-actions { min-width: 0; gap: 0; }
  .diesel-app .desktop-label { display: none; }
  .diesel-app .mode-nav { justify-content: stretch; padding: 4px 12px; gap: .45rem; min-height: 52px; }
  .diesel-app .mode-nav button { flex: 1; min-width: 0; padding: .5rem; font-size: 1rem; }
  .diesel-app .stage-wrap { flex-grow: 0; }
  .diesel-app .stage-toolbar { min-height: 52px; gap: .4rem; padding: 4px 12px; }
  .diesel-app .stage-label { font-size: .75rem; }
  .diesel-app .stage-toolbar > .stage-label { flex-basis: 8rem; }
  .diesel-app .stage-toolbar button { min-width: 44px; padding: .45rem .65rem; font-size: .8125rem; }
  .diesel-app .model-stage { height: clamp(270px, 38svh, 380px); }
  .diesel-app #supply-scene { height: clamp(280px, 82.5vw, 500px); padding: 4px 8px 8px; }
  .diesel-app .stage-tools { order: 3; gap: 11px; padding: 13px 12px 15px; }
  .diesel-app .stage-tools button { padding: .6rem .75rem; font-size: .875rem; }
  .diesel-app .stage-actions { gap: 7px; }
  .diesel-app .status-chips { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: .75rem; }
  .diesel-app .status-chips > span { display: flex; flex-direction: column; gap: 1px; text-align: center; align-items: center; }
  .diesel-app .status-chips strong { font-size: .9375rem; }
  .diesel-app .model-state { gap: .25rem .75rem; font-size: .8125rem; text-align: center; }
  .diesel-app .model-caption { font-size: .75rem; }
  .diesel-app .scene-hint { left: 12px; right: 12px; bottom: 10px; font-size: .8125rem; }
  .diesel-app .scene-status { right: 12px; bottom: 10px; max-width: calc(100% - 24px); font-size: .8125rem; }
  .diesel-app.large-view .model-stage { height: clamp(360px, 60svh, 680px); }
  .diesel-app.large-view #supply-scene { height: clamp(320px, 90vw, 620px); }
  .diesel-app #explanation { order: 1; padding: 14px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .diesel-app .explanation-inner { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .diesel-app .step-label { font-size: .75rem; }
  .diesel-app #explanation-title { font-size: 1.2rem; }
  .diesel-app #explanation-text { font-size: 1rem; line-height: 1.5; }
  .diesel-app .explanation-actions { grid-row: auto; grid-column: 1; max-width: none; width: 100%; justify-content: flex-start; margin-top: 6px; gap: 6px; }
  .diesel-app .explanation-actions .primary { flex: 1 1 100%; }
  .diesel-app .explanation-actions .secondary, .diesel-app .explanation-actions .quiet { flex: 1 1 auto; min-height: 44px; padding: .5rem .65rem; font-size: .9375rem; }
  .diesel-app #notice { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); padding: .7rem .85rem; font-size: .9375rem; }
  .diesel-app .app-footer { justify-content: center; padding-left: 14px; padding-right: 14px; column-gap: 12px; font-size: .8125rem; }
  .diesel-app .app-footer .quiet { font-size: .8125rem; }
  .diesel-app .app-footer > span { flex-basis: 100%; order: 1; text-align: center; padding: 0 0 8px; }
  .diesel-app dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 13px; }
  .diesel-app dialog > header, .diesel-app .dialog-header { padding: 12px 16px; gap: .6rem; }
  .diesel-app dialog > header h2, .diesel-app .dialog-header h2 { font-size: 1.2rem; }
  .diesel-app .dialog-header > button { flex: 0 0 auto; }
  .diesel-app .dialog-content, .diesel-app #dialog-content { padding: 18px 16px max(22px, env(safe-area-inset-bottom)); }
  .diesel-app .component-grid, .diesel-app .choice-grid, .diesel-app .topic-grid, .diesel-app .menu-grid { grid-template-columns: minmax(0, 1fr); }
  .diesel-app .topic-card, .diesel-app .component-card { min-height: 82px; padding: 15px; }
  .diesel-app .detail-actions { flex-direction: column; }
  .diesel-app .detail-actions button { width: 100%; }
  .diesel-app .detail-lead { font-size: 1.0625rem; }
  .diesel-app .status-definition { grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); gap: 8px 12px; padding: 15px; }
  .diesel-app .ups-example { flex-direction: column; padding: 18px; gap: 8px; }
  .diesel-app .ups-example > [aria-hidden] { transform: rotate(90deg); line-height: 1; }
  .diesel-app .component-grid button, .diesel-app .choice-grid button { min-height: 56px; }
  .diesel-app .detail-facts { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: 15px; }
  .diesel-app .detail-facts dd + dt { margin-top: .55rem; }
  .diesel-app .learning-note, .diesel-app .feedback { padding: 14px; }
  .diesel-app #lab { padding: 18px max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .diesel-app .lab-header { margin-bottom: 16px; gap: .65rem; }
  .diesel-app .lab-header h2 { font-size: 1.35rem; }
  .diesel-app .lab-body { gap: 16px; }
  .diesel-app .phase-tracks { gap: 7px; padding: 10px; border-radius: 12px; }
  .diesel-app .phase-track { gap: 8px; padding: 12px 8px; border-radius: 8px; }
  .diesel-app .phase-track h3, .diesel-app .phase-track strong { font-size: 1rem; }
  .diesel-app .phase-track .phase-value, .diesel-app .phase-value { font-size: 1.1rem; }
  .diesel-app .phase-heading { gap: 4px; }
  .diesel-app .phase-heading > span { font-size: 1.0625rem; }
  .diesel-app .phase-track > span { font-size: .8125rem; }
  .diesel-app .phase-caption { font-size: .8125rem; }
  .diesel-app .phase-workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
  .diesel-app .load-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diesel-app .load-options > .load-list { display: none; }
  .diesel-app .load-picker { display: grid; gap: 5px; }
  .diesel-app .load-picker select { margin-top: 0; min-height: 48px; }
  .diesel-app .experiment-context { padding: 12px 14px; }
  .diesel-app .load-card { align-content: start; padding: 13px; }
  .diesel-app .load-card > span { font-size: .875rem; }
  .diesel-app .assign-panel { padding: 17px; }
  .diesel-app .assign-panel .primary { width: 100%; min-width: 0; }
  .diesel-app .comparison-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .diesel-app .comparison-tabs button { min-width: 0; padding: .65rem .5rem; }
  .diesel-app .switch-consumers { gap: 10px; }
  .diesel-app .switch-consumer { padding: 14px 12px; gap: 7px; grid-template-columns: 13px minmax(0, 1fr); }
  .diesel-app .switch-consumer > strong { font-size: 1rem; }
  .diesel-app .switch-consumer > span:not(.switch-dot) { font-size: .875rem; }
  .diesel-app .switch-reading { padding: 15px 18px; }
  .diesel-app .switch-reading > span { max-width: 65%; font-size: .9375rem; }
  .diesel-app .switch-reading strong { font-size: 1.65rem; }
  .diesel-app .lab-bottom { gap: 8px; padding-top: 16px; }
  .diesel-app .lab-bottom button { flex: 1 1 auto; }
  .diesel-app .phase-track p, .diesel-app .phase-track small { font-size: .8125rem; }
  .diesel-app .phase-actions { gap: 7px; }
  .diesel-app .phase-actions button { padding: .6rem .4rem; }
  .diesel-app .comparison-grid { grid-template-columns: minmax(0, 1fr); }
  .diesel-app .comparison-card { padding: 16px; }
  .diesel-app .lab-footer button { flex: 1 1 auto; }
}
@media (max-width: 379px) {
  .diesel-app .app-header { gap: .35rem; padding-left: 9px; padding-right: 9px; }
  .diesel-app .app-title h1 { font-size: .9375rem; }
  .diesel-app .app-header .back-link, .diesel-app .app-header .back { font-size: .8125rem; }
  .diesel-app .status-chips { gap: 5px; }
}
/* Low landscape: model and explanation share the wide surface; the supply
   diagram retains the full width so its four labelled nodes stay legible. */
@media (max-height: 500px) and (min-width: 560px) and (max-width: 1100px) and (orientation: landscape) {
  .diesel-app .app-header { min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
  .diesel-app .app-title small { display: none; }
  .diesel-app .mode-nav { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .diesel-app #workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); align-items: start; }
  .diesel-app .stage-wrap { grid-column: 1; grid-row: 1; min-height: 0; }
  .diesel-app .stage-toolbar { padding: 4px 10px; min-height: 52px; gap: .4rem; }
  .diesel-app .stage-label { font-size: .75rem; }
  .diesel-app .stage-toolbar > .stage-label { flex-basis: 8rem; }
  .diesel-app .stage-toolbar button { padding: .4rem .5rem; font-size: .8125rem; }
  .diesel-app .model-stage { height: max(230px, calc(100dvh - 160px)); }
  .diesel-app #explanation { grid-column: 2; grid-row: 1; border-top: 0; border-left: 3px solid var(--amber); padding: 14px 16px; }
  .diesel-app .explanation-inner { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .diesel-app #explanation-title { font-size: 1.125rem; }
  .diesel-app #explanation-text { font-size: 1rem; }
  .diesel-app .explanation-actions { grid-column: 1; grid-row: auto; max-width: none; justify-content: flex-start; margin-top: 5px; gap: 5px; }
  .diesel-app .explanation-actions .primary { flex-basis: 100%; }
  .diesel-app .explanation-actions .quiet { min-height: 44px; padding: .45rem .6rem; }
  .diesel-app .stage-tools { grid-column: 1 / -1; grid-row: 2; padding: 10px 14px; }
  .diesel-app .status-chips { font-size: .8125rem; }
  .diesel-app .status-chips strong { font-size: .9375rem; }
  .diesel-app .stage-tools button { font-size: .875rem; padding: .5rem .7rem; }
  .diesel-app.large-view .model-stage { height: max(285px, calc(100dvh - 145px)); }
  .diesel-app[data-mode="simulator"] #workspace { display: flex; flex-direction: column; }
  .diesel-app[data-mode="simulator"] #explanation { order: 1; border-left: 0; border-top: 3px solid var(--amber); }
  .diesel-app[data-mode="simulator"] .explanation-inner { grid-template-columns: minmax(0, 1fr) minmax(210px, .65fr); column-gap: 20px; }
  .diesel-app[data-mode="simulator"] .explanation-actions { grid-column: 2; grid-row: 1; }
  .diesel-app[data-mode="simulator"] #supply-scene { height: clamp(215px, 33vw, 340px); padding: 6px 16px 8px; }
  .diesel-app[data-mode="simulator"] .stage-tools { order: 2; }
  .diesel-app.large-view[data-mode="simulator"] #supply-scene { height: max(265px, calc(100dvh - 140px)); }
  .diesel-app #lab { grid-column: 1 / -1; }
  .diesel-app #notice { top: auto; bottom: 10px; }
  .diesel-app .app-footer > span { flex-basis: auto; order: initial; padding-bottom: 0; }
}
/* Portrait/tablet diagram uses its compact topology instead of shrinking a wide
   desktop diagram into unreadable labels. Matches the controller geometry rule. */
@media (min-width: 681px) and (max-width: 899px) and (min-height: 501px) {
  .diesel-app #supply-scene { height: 430px; }
}
@media (min-width: 560px) and (max-width: 759px) and (max-height: 500px) and (orientation: landscape) {
  .diesel-app[data-mode="simulator"] #supply-scene { height: 310px; }
  .diesel-app[data-mode="simulator"] .explanation-inner { grid-template-columns: minmax(0, 1fr); }
  .diesel-app[data-mode="simulator"] .explanation-actions { grid-column: 1; grid-row: auto; }
}
/* Extra narrow/high zoom views may wrap controls and text, never shrink them. */
@media (max-width: 320px) {
  .diesel-app .app-header { grid-template-columns: minmax(0, 1fr) auto; }
  .diesel-app .app-title { grid-row: 1; grid-column: 1 / -1; }
  .diesel-app .app-header > .back { grid-row: 2; }
  .diesel-app .app-header > .header-actions { grid-row: 2; }
  .diesel-app .stage-toolbar > .stage-label { flex-basis: 100%; }
  .diesel-app .load-list { grid-template-columns: minmax(0, 1fr); }
  .diesel-app .switch-consumers { grid-template-columns: minmax(0, 1fr); }
  .diesel-app .status-chips { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .diesel-app *, .diesel-app *::before, .diesel-app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .diesel-app .flow-motion { animation: none; stroke-dasharray: none; }
}
@media (forced-colors: active) {
  .diesel-app :where(button, .button, .lesson-card, .phase-track) { border: 1px solid ButtonText; }
  .diesel-app :where(button, .button)[aria-pressed="true"], .diesel-app :where(button, .button)[aria-selected="true"] { outline: 2px solid Highlight; }
  .diesel-app .phase-bar > span, .diesel-app .phase-meter > .phase-bar { background: Highlight; }
}
@media print {
  .diesel-app { background: #fff; color: #000; }
  .diesel-app .app-header, .diesel-app .mode-nav, .diesel-app .stage-toolbar, .diesel-app #notice { display: none; }
  .diesel-app #workspace { min-height: 0; }
  .diesel-app .stage-wrap { break-inside: avoid; min-height: 350px; }
  .diesel-app #explanation { border: 0; }
  .diesel-app dialog[open] { position: static; width: 100%; max-height: none; box-shadow: none; border: 0; }
}

/* Local fonts remain unchanged. Earlier fixed-height viewport overrides are removed:
   the explanation must grow with larger type and remain adjacent to the model. */
@font-face{font-family:'Confyra Learning';src:url('./fonts/learning-sans-r57.woff') format('woff');font-style:normal;font-weight:400 500;font-display:swap}
@font-face{font-family:'Confyra Learning';src:url('./fonts/learning-sans-bold-r57.woff') format('woff');font-style:normal;font-weight:600 900;font-display:swap}
body.diesel-app{font-family:'Confyra Learning',Arial,Helvetica,sans-serif;line-height:1.45}
.diesel-app .source-summary{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;font-size:.875rem;color:#d9e4e8}
.diesel-app .source-summary strong{color:#fff}
.diesel-app .source-summary>span:not(.source-dot){padding-left:8px;border-left:1px solid #637782}
.diesel-app .source-dot{display:block;flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#70c9f2}
.diesel-app .source-dot.is-off{background:#e6af52}
.diesel-app .source-summary .animation-note{color:#f3d197}
.diesel-app .energy-chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}
.diesel-app .energy-chain button>span{display:inline-grid;place-content:center;width:22px;height:22px;border-radius:50%;background:#526974;color:#fff;font-size:.75rem}
.diesel-app .energy-arrow{color:#b4cbd5}
.diesel-app .camera-controls{display:flex;justify-content:center;gap:6px}
.diesel-app .camera-controls button{min-width:44px;min-height:44px}
.diesel-app #notice:empty{display:none}
/* R57: a clear 3D invitation and a two-action phase experiment. */
.diesel-app .model-tab{border:1px solid #9e702b;background:#fff3da;color:#26343d;font-weight:750}
.diesel-app .feature-badge{display:inline-grid;place-items:center;padding:2px 7px;border-radius:5px;font-size:.75rem;font-weight:800;line-height:1.5;background:#e6af52;color:#1d2932;letter-spacing:.02em}
.diesel-app .model-tab[aria-pressed=true]{background:#e6af52!important;color:#1d2932!important;border-color:#9e702b!important}
.diesel-app .model-tab[aria-pressed=true] .feature-badge{background:#26343d;color:#fff}
.diesel-app .diesel-highlight{background:#e6af52;color:#1d2932;border-color:#e6af52;font-weight:750;gap:6px}
.diesel-app .diesel-highlight:hover{background:#f2c77b;color:#1d2932;border-color:#f2c77b}
.diesel-app .diesel-highlight .feature-badge{background:#26343d;color:#fff}
.diesel-app .app-title-sub{font-weight:400;font-size:.8em}
.diesel-app .model-loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;text-align:center;background:#26343d;z-index:2;font-size:1rem;line-height:1.5;color:#f6f7f8}
.diesel-app .model-loading[hidden]{display:none}
.diesel-app .model-loading strong{font-size:1.2rem}.diesel-app .model-loading>span{max-width:36ch}
.diesel-app .loading-mark{width:48px;height:48px;border:3px solid #69828f;border-top-color:#e6af52;border-radius:50%}
.diesel-app .model-failure{inset:auto 12px 12px;gap:6px;padding:12px;background:#26343df2;border:1px solid #e6af52;border-radius:12px;font-size:.875rem}
.diesel-app .model-failure strong{font-size:1rem}
.diesel-app .model-caption{font-size:.75rem;max-width:calc(100% - 24px);line-height:1.4}
.diesel-app #model-stage:has(.model-failure:not([hidden])) .model-caption{display:none}
.diesel-app .source-summary{flex-wrap:wrap;justify-content:center;row-gap:2px}
.diesel-app .stage-actions{flex-shrink:0}
.diesel-app .lab-header .step-label{font-size:.6875rem}
.diesel-app .lab-header h2{font-size:clamp(1.15rem,2vw,1.5rem);margin:0}
.diesel-app .lab-header p{font-size:1rem;line-height:1.45;max-width:86ch}
.diesel-app #lab{max-width:1440px;width:100%;justify-self:center}
.diesel-app .phase-experiment{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.8fr);grid-template-rows:auto auto auto auto;gap:10px 20px;margin-top:14px}
.diesel-app .phase-instruction{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:32px;font-size:1rem;line-height:1.35}
.diesel-app .phase-instruction>span:last-child:not(.instruction-number){color:#49616b;font-size:.875rem}
.diesel-app .phase-instruction:nth-of-type(1){grid-column:1;grid-row:1}.diesel-app .phase-instruction:nth-of-type(3){grid-column:2;grid-row:1}
.diesel-app .instruction-number{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#26343d;color:#fff;font-size:.8125rem;font-weight:750}
.diesel-app .phase-device-row{grid-column:1;grid-row:2 / 4;display:grid;grid-template-columns:1fr;gap:7px;align-content:stretch}
.diesel-app .phase-device-row .load-card{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:1px;min-height:62px;padding:8px 10px;border-radius:10px;text-align:left;align-content:center}
.diesel-app .phase-device-row .load-card strong{font-size:1rem;line-height:1.25}.diesel-app .phase-device-row .load-card>span:last-child{font-size:.875rem;line-height:1.3;color:#4a606a;grid-column:2}
.diesel-app .phase-device-row .load-card[aria-pressed=true]{border:2px solid #8b6126;background:#fff0d2;padding:7px 9px}
.diesel-app .device-symbol{grid-column:1;grid-row:1 / 3;display:grid;place-items:center;align-self:center;width:34px;height:34px;border-radius:8px;background:#e7e8df;color:#26343d;font-size:1.5rem!important}
.diesel-app .phase-tracks{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px;margin:0;background:#26343d;border-radius:14px;align-items:stretch}
.diesel-app .phase-target{display:flex;flex-direction:column;align-items:stretch;gap:9px;text-align:left;min-width:0;min-height:150px;color:#f6f7f8;background:#344c59;border:1px solid #8097a3;border-radius:10px;padding:12px;cursor:pointer}
.diesel-app .phase-target:hover,.diesel-app .phase-target:focus-visible{background:#425f6e;border-color:#e6af52;outline-color:#e6af52}
.diesel-app .phase-target.current-phase{border:2px solid #e6af52;padding:11px}
.diesel-app .phase-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px}.diesel-app .phase-heading strong{font-size:1.15rem}.diesel-app .phase-heading>span{font-size:1.3rem;color:#d7effb}
.diesel-app .phase-target .phase-meter{display:block;width:100%;height:12px;background:#172c37;border:1px solid #7b929d;border-radius:10px;overflow:hidden}
.diesel-app .phase-target .phase-bar{display:block;height:100%;width:var(--level);border-radius:10px;background:#70c9f2}
.diesel-app .phase-target:nth-child(2) .phase-bar{background:#e6af52}.diesel-app .phase-target:nth-child(3) .phase-bar{background:#bca5ec}
.diesel-app .phase-target .phase-loads{font-size:.875rem;line-height:1.35;min-height:2.7em;color:#eef5f8;flex:1}
.diesel-app .phase-target .phase-target-label{font-size:.8125rem;min-height:0;color:#ffdc9b;line-height:1.25;font-weight:700}
.diesel-app .three-phase-note{grid-column:2;grid-row:3;display:flex;align-items:center;gap:10px;border-bottom:1px solid #cad0c8;padding:0 0 5px}
.diesel-app .three-phase-note button{font-size:.8125rem;white-space:nowrap;padding:6px 8px;border:1px solid #b6c2c6;min-height:44px;color:#243b47}
.diesel-app .three-phase-note>span{font-size:.8125rem;line-height:1.35;color:#465e67}
.diesel-app .phase-result{grid-column:1 / -1;grid-row:4;background:#eaf0e7;border:1px solid #bbcbb5;border-left:4px solid #42735a;border-radius:10px;padding:10px 14px;font-size:1rem;line-height:1.4}
.diesel-app .phase-result p{margin:3px 0}.diesel-app .phase-result>span{font-size:.8125rem;color:#405943}
.diesel-app .phase-before-after{display:flex;flex-wrap:wrap;gap:7px 22px;margin:5px 0;font-size:.875rem}.diesel-app .phase-before-after b{margin-right:5px;color:#334b58}
.diesel-app .phase-suggestion{margin:0 0 8px}.diesel-app .lab-bottom{display:flex;flex-wrap:wrap;gap:7px;padding-top:10px;padding-bottom:7px}
.diesel-app .lab-bottom button{font-size:.875rem;padding:7px 12px;min-height:44px}
.diesel-app .phase-experiment~.small-note{font-size:.8125rem;max-width:100ch}
@media(max-width:1100px){.diesel-app .source-summary{display:none}.diesel-app .app-title-sub{display:none}.diesel-app .stage-actions{justify-content:center}.diesel-app .stage-tools{gap:8px}.diesel-app .phase-experiment{grid-template-columns:minmax(190px,.6fr) minmax(0,1.6fr);gap:10px}.diesel-app .three-phase-note{flex-wrap:wrap;gap:4px}}
@media(max-width:760px){
 .diesel-app .app-title h1{font-size:1rem}.diesel-app .mode-nav button{min-width:0;flex:1 1 0;padding:5px 8px;font-size:1rem;gap:6px}
 .diesel-app .feature-badge{font-size:.6875rem;padding:2px 5px}.diesel-app .stage-tools button{font-size:.8125rem}
 .diesel-app #workspace,.diesel-app.large-view #workspace{grid-template-rows:minmax(0,1fr) auto 180px!important}
 .diesel-app .app-footer{display:none}.diesel-app #explanation-text{font-size:1rem!important;line-height:1.4}.diesel-app #explanation-title{font-size:1.125rem}.diesel-app .step-label{font-size:.6875rem}
 .diesel-app .explanation-actions .primary{font-size:.875rem}.diesel-app .explanation-actions .quiet{font-size:.75rem;flex-basis:106px}
 .diesel-app .model-caption{font-size:.6875rem;bottom:5px}.diesel-app .model-failure{font-size:.8125rem;padding:8px;bottom:5px;inset-inline:5px}.diesel-app .model-failure strong{font-size:.875rem}
 .diesel-app .phase-experiment{display:flex;flex-direction:column;gap:10px;margin-top:10px}
 .diesel-app .lab-header p{font-size:1rem}.diesel-app .lab-header h2{font-size:1.25rem}
 .diesel-app .phase-device-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .diesel-app .phase-device-row .load-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:82px;gap:4px;padding:8px}
 .diesel-app .phase-device-row .load-card[aria-pressed=true]{padding:7px}.diesel-app .phase-device-row .load-card strong{font-size:.8125rem;overflow-wrap:anywhere}.diesel-app .phase-device-row .load-card>span:last-child{font-size:.75rem}.diesel-app .device-symbol{display:none}
 .diesel-app .phase-tracks{padding:8px;gap:6px}.diesel-app .phase-target{padding:8px 6px;min-height:160px;gap:8px}.diesel-app .phase-target.current-phase{padding:7px 5px}.diesel-app .phase-heading{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.diesel-app .phase-heading strong{font-size:1rem}.diesel-app .phase-heading>span{font-size:1.125rem}
 .diesel-app .phase-target .phase-loads{font-size:.75rem;overflow-wrap:anywhere}.diesel-app .phase-target .phase-target-label{font-size:.75rem;min-height:2.5em}.diesel-app .phase-target .phase-meter{height:10px}
 .diesel-app .phase-result{font-size:1rem;padding:10px}.diesel-app .phase-before-after{gap:4px 10px}.diesel-app .three-phase-note{display:flex;align-items:flex-start;gap:5px}.diesel-app .three-phase-note button{font-size:.8125rem;white-space:normal}.diesel-app .three-phase-note>span{font-size:.8125rem}
 .diesel-app .phase-instruction{font-size:1rem;gap:6px}.diesel-app .phase-instruction>span:last-child:not(.instruction-number){flex-basis:100%;margin-left:34px;font-size:.875rem}
 .diesel-app .lab-bottom button{flex:1 1 130px}.diesel-app .phase-suggestion{align-items:stretch}
}
@media(orientation:landscape) and (max-height:560px){.diesel-app #workspace,.diesel-app.large-view #workspace{grid-template-rows:minmax(0,1fr) 52px!important}.diesel-app .mode-nav{min-height:46px}.diesel-app .stage-actions .quiet{display:none}.diesel-app .phase-experiment{display:grid;grid-template-columns:190px minmax(0,1fr)}.diesel-app .phase-device-row{grid-template-columns:1fr}.diesel-app .phase-device-row .load-card{min-height:62px}.diesel-app #explanation-text{font-size:1rem!important}}
@media(max-width:320px), (min-resolution:2dppx) and (max-width:280px){.diesel-app .phase-device-row{grid-template-columns:1fr}.diesel-app .phase-tracks{grid-template-columns:1fr}.diesel-app .phase-target{min-height:125px}.diesel-app .phase-heading{flex-direction:row}.diesel-app .phase-target .phase-target-label{min-height:0}}
.diesel-app .mode-nav .model-tab{border:1px solid #9e702b;background:#fff3da;color:#26343d;font-weight:750}
.diesel-app .stage-tools .diesel-highlight{background:#e6af52;color:#1d2932;border-color:#e6af52;font-weight:750}
.diesel-app .stage-tools .diesel-highlight:hover{background:#f2c77b;color:#1d2932;border-color:#f2c77b}
.diesel-app .phase-target>span{min-height:0}.diesel-app .phase-target .phase-loads{min-height:2.7em}
.diesel-app.lab-open #workspace{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
/* Keep model actions in normal flow: an absolutely raised toolbar inside an
   overflow container would clip the buttons on touch screens. */
.diesel-app[data-mode=model] .model-controls{position:static;inset:auto;bottom:auto;padding:0;pointer-events:auto;flex-wrap:wrap;justify-content:center}
@media(max-width:760px), (orientation:landscape) and (max-height:560px){.diesel-app[data-mode=model] .stage-tools{overflow-x:visible;flex-wrap:wrap;gap:2px;padding:3px 6px}.diesel-app[data-mode=model] .model-controls{width:100%;gap:4px;justify-content:center}.diesel-app[data-mode=model] .model-controls button{font-size:.75rem;padding:5px 7px;min-height:44px}.diesel-app .energy-chain button{min-height:44px}.diesel-app[data-mode=model] #workspace{grid-template-rows:minmax(0,1fr) auto 180px!important}}
@media(orientation:landscape) and (max-height:560px){.diesel-app[data-mode=model] #workspace{grid-template-rows:minmax(0,1fr) auto!important}.diesel-app[data-mode=model] .energy-chain{display:none}.diesel-app[data-mode=model] .model-controls{gap:3px}.diesel-app[data-mode=model] .model-controls button{font-size:.6875rem;padding:4px 5px}.diesel-app[data-mode=model].lab-open #workspace{grid-template-rows:minmax(0,1fr)!important}}
@media(max-width:760px){.diesel-app[data-mode=model].lab-open #workspace{grid-template-rows:minmax(0,1fr)!important}}

/* R57: legible controls; pausing learning motion keeps camera interaction available. */
.diesel-app.motion-paused .flow-motion { animation-play-state: paused; }
.diesel-app[data-mode=model] .model-controls button,
.diesel-app .energy-chain button { font-size:.875rem; min-height:44px; line-height:1.3; padding:7px 10px; }
.diesel-app .model-controls { gap:6px; }
@media(max-width:760px), (orientation:landscape) and (max-height:560px) {
 .diesel-app[data-mode=model] .model-controls button { font-size:.875rem; min-height:44px; padding:6px 8px; }
 .diesel-app .energy-chain button { font-size:.8125rem; }
 .diesel-app .explanation-actions .quiet { font-size:.875rem; min-height:44px; }
 .diesel-app .phase-target .phase-loads,.diesel-app .phase-target .phase-target-label { font-size:.8125rem; }
 .diesel-app[data-mode=model] .model-controls { flex-wrap:wrap; gap:6px; }
 .diesel-app[data-mode=model] .stage-tools { max-height:34dvh; overflow-y:auto; }
}

/* R57: compact phase experiment, one current action, optional explanation. */
.diesel-app .app-title .brand {display:flex;justify-content:center;align-items:center;gap:2px;font-size:.6875rem}
.diesel-app .app-title h1{font-size:1rem;line-height:1.2}
.diesel-app .app-title .confyra-release-badge{margin-left:6px;letter-spacing:0}
.diesel-app #supply-scene>svg{overflow:hidden}
.diesel-app #lab:has(.phase-board-r57){max-width:1080px;padding:12px 24px;overflow-y:auto}
.diesel-app .phase-board-r57{width:100%;font-size:1rem}
.diesel-app .phase-board-r57 .lab-header{margin:0 0 12px;gap:18px;align-items:center}
.diesel-app .phase-board-r57 .lab-header .step-label{display:none}
.diesel-app .phase-board-r57 .lab-header h2{font-size:1.375rem;line-height:1.2;margin:0 0 5px}
.diesel-app .phase-board-r57 .lab-header p{font-size:1rem;line-height:1.35;margin:0;max-width:60ch}
.diesel-app .phase-board-r57 .lab-header button{min-height:44px;font-size:.875rem;padding:8px 12px;flex:none}
.diesel-app .phase-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.diesel-app .phase-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;min-height:48px;border:1px solid #a9b9bd;border-radius:8px;background:#fffdf7;color:#213b47;text-align:left}
.diesel-app .phase-chip strong{font-size:.9375rem;font-weight:700;overflow-wrap:anywhere}
.diesel-app .phase-chip>span{font-size:.8125rem;white-space:nowrap;color:#465d69}
.diesel-app .phase-chip[aria-pressed=true]{background:#ffe8b6;border-color:#90601d;box-shadow:inset 0 0 0 1px #90601d}
.diesel-app .phase-next{margin:10px 0 8px;line-height:1.35;font-size:.9375rem}
.diesel-app .phase-lines{display:grid;gap:7px}
.diesel-app .phase-line{display:grid;grid-template-columns:94px minmax(0,1fr) 130px;gap:16px;align-items:center;width:100%;padding:8px 14px;min-height:60px;border:1px solid #879da7;border-radius:9px;background:#304854;color:#f6f7f8;text-align:left}
.diesel-app .phase-line:hover,.diesel-app .phase-line:focus-visible{background:#3b5866;border-color:#f0c570}
.diesel-app .phase-line.is-current{border-color:#e6af52;box-shadow:inset 0 0 0 1px #e6af52}
.diesel-app .phase-line-name{font-size:1.125rem;font-weight:750;line-height:1.2}
.diesel-app .phase-line-name small{display:block;font-size:.75rem;font-weight:500;color:#f4d295;margin-top:4px}
.diesel-app .phase-line-center{min-width:0;display:grid;gap:6px}
.diesel-app .phase-line .phase-meter{display:block;width:100%;height:11px;border-radius:8px;border:1px solid #90a5af;background:#1c313e;overflow:hidden}
.diesel-app .phase-line .phase-bar{display:block;height:100%;width:var(--level);background:#86d9f9;border-radius:8px}
.diesel-app .phase-line:nth-child(2) .phase-bar{background:#e6af52}.diesel-app .phase-line:nth-child(3) .phase-bar{background:#c1b0ed}
.diesel-app .phase-line-loads{font-size:.8125rem;line-height:1.3;color:#e3edf1;overflow-wrap:anywhere}
.diesel-app .phase-line-value{text-align:right;line-height:1.2}.diesel-app .phase-line-value strong{font-size:1.125rem;white-space:nowrap}.diesel-app .phase-line-value small{display:block;font-size:.8125rem;margin-top:4px;color:#dce8ee}
.diesel-app .phase-outcome{margin:10px 0 0;padding:0 0 10px;border-bottom:1px solid #b7c3bd;line-height:1.35}
.diesel-app .phase-outcome p{margin:0 0 5px;font-size:.9375rem}.diesel-app .phase-outcome>span{font-size:.875rem;color:#3c545b}
.diesel-app .phase-foot{margin-top:8px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px}
.diesel-app .phase-foot-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diesel-app .phase-foot-actions button{font-size:.875rem;min-height:44px;padding:7px 12px}.diesel-app .phase-foot-actions>span{font-size:.8125rem;color:#48606a}
.diesel-app .phase-more{padding:0;border:0;background:transparent}.diesel-app .phase-more>summary{display:block;min-height:44px;padding:11px 12px;text-align:right;font-size:.875rem;font-weight:700;text-decoration:underline;cursor:pointer}.diesel-app .phase-more>summary:before{content:'+';margin-right:8px}.diesel-app .phase-more[open]>summary:before{content:'−'}.diesel-app .phase-more>p{font-size:.9375rem;line-height:1.45;margin:12px 0}.diesel-app .phase-more>div{display:flex;flex-wrap:wrap;gap:8px}.diesel-app .phase-more button{min-height:44px;font-size:.875rem;padding:8px 12px}
@media(max-width:760px){
 .diesel-app #lab:has(.phase-board-r57){padding:12px}
 .diesel-app .phase-board-r57 .lab-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start;margin-bottom:10px}
 .diesel-app .phase-board-r57 .lab-header h2{font-size:1.15rem}.diesel-app .phase-board-r57 .lab-header p{font-size:.875rem;line-height:1.4}.diesel-app .phase-board-r57 .lab-header button{font-size:.8125rem;max-width:100px;padding:6px 8px;white-space:normal}
 .diesel-app .phase-chips{gap:5px}.diesel-app .phase-chip{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:62px;padding:8px}.diesel-app .phase-chip strong{font-size:.8125rem}.diesel-app .phase-chip>span{font-size:.75rem}
 .diesel-app .phase-next{font-size:.875rem;line-height:1.4;margin:10px 0 8px}
 .diesel-app .phase-line{grid-template-columns:66px minmax(0,1fr) 88px;gap:8px;padding:9px;min-height:70px}.diesel-app .phase-line-name{font-size:1.05rem}.diesel-app .phase-line-name small{font-size:.6875rem}.diesel-app .phase-line-value strong{font-size:1.125rem}.diesel-app .phase-line-value small{font-size:.75rem}.diesel-app .phase-line-loads{font-size:.75rem}
 .diesel-app .phase-outcome p{font-size:.875rem}.diesel-app .phase-outcome>span{font-size:.8125rem}.diesel-app .phase-foot{grid-template-columns:1fr;gap:3px}.diesel-app .phase-foot-actions{justify-content:space-between}.diesel-app .phase-more>summary{text-align:left;padding-left:0}
}
@media(orientation:landscape) and (max-height:560px){.diesel-app #lab:has(.phase-board-r57){padding:12px 20px}.diesel-app .phase-board-r57 .lab-header h2{font-size:1.125rem}.diesel-app .phase-board-r57 .lab-header p{font-size:.875rem}.diesel-app .phase-board-r57 .phase-line{min-height:60px}.diesel-app .phase-board-r57 .phase-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* R58: the single explanation stays beside / directly after the active model. */
.diesel-app #explanation {order:1;}
.diesel-app .stage-tools {order:2;}
.diesel-app .course-context {grid-column:1;grid-row:2;margin-top:10px;}
.diesel-app .next-instruction {font-size:.95rem;line-height:1.5;color:#26343d;}
.diesel-app .course-practice {margin-top:12px;padding-top:12px;border-top:1px solid #c5cec9;}
.diesel-app .course-practice>div {display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.diesel-app .course-practice button {text-align:left;flex:1 1 200px;}
.diesel-app .practice-feedback {margin-top:8px;padding:10px 12px;background:#eef2e8;border-left:3px solid #376b55;font-size:.95rem;}
.diesel-app .course-optional {text-align:center;}
.diesel-app .course-optional>summary {min-height:44px;display:list-item;align-content:center;cursor:pointer;width:fit-content;margin:auto;font-size:.875rem;}
.diesel-app .course-return {font-size:.875rem;color:#475962;}
.diesel-app .learning-progress {display:grid;grid-template-columns:auto 1fr;gap:12px;}
.diesel-app .learning-progress dt {font-weight:700;}
.diesel-app .learning-progress dd {margin:0;}
.diesel-app .chapter-list,.diesel-app .quiz-review {display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));}
.diesel-app .chapter-list button {justify-content:flex-start;text-align:left;}
.diesel-app .quiz-board {width:100%;max-width:850px;margin:auto;display:grid;gap:20px;}
.diesel-app .quiz-header {display:flex;align-items:start;justify-content:space-between;gap:20px;}
.diesel-app .quiz-header h2 {font-size:clamp(1.35rem,2.7vw,2rem);}
.diesel-app .quiz-question {border:0;padding:0;margin:0;display:grid;gap:12px;min-width:0;}
.diesel-app .quiz-question legend {font-size:1.25rem;font-weight:700;margin-bottom:16px;line-height:1.45;}
.diesel-app .quiz-choice {display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 18px;border:1px solid #a9b9bc;border-radius:9px;background:#fffdf8;cursor:pointer;}
.diesel-app .quiz-choice input {width:22px;height:22px;min-width:22px;margin:0;accent-color:#855315;}
.diesel-app .quiz-choice.is-selected {background:#fff0d4;border:2px solid #93651e;padding:13px 17px;}
.diesel-app .quiz-choice:focus-within {outline:3px solid #215e7c;outline-offset:3px;}
.diesel-app .quiz-actions,.diesel-app .quiz-topics {display:flex;gap:10px;flex-wrap:wrap;}
.diesel-app .quiz-state {min-height:3em;color:#465a65;}
.diesel-app .quiz-results {padding-left:1.7rem;display:grid;gap:24px;}
.diesel-app .quiz-results li {padding:16px;border:1px solid #c4cfcb;border-radius:8px;background:#fffdf8;}
.diesel-app .quiz-results li>*+* {margin-top:8px;}
.diesel-app .quiz-results h4 {font-size:1.05rem;}
.diesel-app.quiz-open #workspace {display:block;}
.diesel-app .confyra-release-badge {font-size:10px;}
@media(min-width:960px) {
 .diesel-app[data-mode="model"]:not(.lab-open) #workspace {display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,370px);grid-template-rows:auto auto;}
 .diesel-app[data-mode="model"] #workspace>.stage-wrap {grid-column:1;grid-row:1;}
 .diesel-app[data-mode="model"] #explanation {grid-column:2;grid-row:1;border-top:0;border-left:3px solid var(--amber);padding:24px;display:flex;align-items:center;}
 .diesel-app[data-mode="model"] .explanation-inner {display:flex;flex-direction:column;align-items:stretch;gap:12px;}
 .diesel-app[data-mode="model"] .explanation-actions {max-width:none;justify-content:flex-start;margin-top:4px;}
 .diesel-app[data-mode="model"] .explanation-actions .primary {flex:1 1 100%;}
 .diesel-app[data-mode="model"] .stage-tools {grid-column:1/-1;grid-row:2;}
 .diesel-app[data-mode="model"] .model-stage {height:clamp(370px,calc(100dvh - 260px),780px);}
 .diesel-app[data-mode="model"].large-view .model-stage {height:clamp(420px,calc(100dvh - 190px),900px);}
 .diesel-app[data-mode="simulator"] .explanation-actions {grid-row:1/3;}
}
@media(max-width:959px) and (min-height:501px) {
 .diesel-app[data-mode="model"] #workspace {display:flex;}
 .diesel-app[data-mode="model"] .model-stage,.diesel-app[data-mode="model"].large-view .model-stage {height:clamp(210px,32svh,350px);}
 .diesel-app[data-mode="model"].large-view .stage-tools {display:none;}
 .diesel-app[data-mode="model"] .stage-toolbar {min-height:44px;padding:4px 12px;}
 .diesel-app[data-mode="model"] .stage-toolbar button {min-height:44px;}
 .diesel-app .explanation-inner {display:flex;flex-direction:column;align-items:stretch;gap:8px;}
 .diesel-app .explanation-actions {width:100%;max-width:none;justify-content:flex-start;}
 .diesel-app .course-context {margin-top:0;}
 .diesel-app .course-practice button {flex:1 1 100%;}
}
@media(max-width:600px) {
 .diesel-app .quiz-header {display:grid;gap:12px;}
 .diesel-app.quiz-open #lab {padding:20px 16px;}
 .diesel-app .quiz-review,.diesel-app .chapter-list {grid-template-columns:1fr;}
 .diesel-app .quiz-actions .primary {flex:1 1 100%;}
 .diesel-app .quiz-question legend {font-size:1.1rem;}
 .diesel-app .quiz-choice {padding:12px;}
 .diesel-app .quiz-choice.is-selected {padding:11px;}
}