:root {
  --learning-accent: #124e78;
  --learning-border: #cbd5e1;
  --learning-muted: #394b61;
  --learning-surface: #f8fbff;
}

.learning-introduction,
.guided-panel,
.free-panel {
  margin-top: 1.25rem;
}

#lab-overview {
  margin: 1rem 0;
  border: 1px solid var(--learning-border);
  border-radius: .6rem;
  background: #fff;
  padding: .75rem;
}

#lab-overview summary,
.other-controls summary {
  cursor: pointer;
  font-weight: 700;
}

#lab-overview[open] > summary {
  margin-bottom: .75rem;
}

.service-roles {
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 1rem 0;
}

.service-role,
.learning-question,
.stage-after,
.learning-notes section {
  border: 1px solid var(--learning-border);
  border-radius: .6rem;
  background: #fff;
  padding: .8rem;
}

.service-role h3,
.learning-question h4,
.stage-after h4,
.learning-notes h5 {
  margin: .05rem 0 .4rem;
}

.service-role p,
.learning-question p,
.stage-after p {
  margin: .25rem 0;
}

.learning-mode {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--learning-border);
  margin-top: 1.25rem;
}

.learning-mode button {
  border: 1px solid var(--learning-border);
  border-bottom: 3px solid var(--learning-border);
  background: #fff;
  color: #172033;
  min-height: 44px;
  padding: .55rem .8rem;
  font-weight: 700;
}

.learning-mode button[aria-selected="true"] {
  border-color: var(--learning-accent);
  background: var(--learning-surface);
  color: var(--learning-accent);
}

.guided-panel,
.free-panel {
  border: 1px solid var(--learning-border);
  border-radius: .7rem;
  padding: 1rem;
  background: var(--learning-surface);
}

.stage-progress,
.stage-setting,
.stage-run-note {
  font-weight: 600;
}

.stage-progress {
  color: var(--learning-accent);
}

.secondary-action,
.primary-action {
  min-height: 44px;
  padding: .6rem .9rem;
  border-radius: .45rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.secondary-action {
  border: 1px solid var(--learning-accent);
  background: #fff;
  color: var(--learning-accent);
}

.primary-action {
  border: 1px solid var(--learning-accent);
  background: var(--learning-accent);
  color: #fff;
  margin-top: 1rem;
}

.learning-notes {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: .75rem;
}

.stage-after {
  margin-top: 1rem;
}

.stage-after ul {
  margin: .3rem 0;
  padding-left: 1.2rem;
}

.control-description,
.option-description {
  display: block;
  margin-top: .25rem;
}

.control-description {
  color: var(--learning-muted);
}

.option-description {
  color: #4c5b6e;
  font-size: .93rem;
}

.other-controls {
  margin-top: 1rem;
  border: 1px solid var(--learning-border);
  border-radius: .6rem;
  background: #fff;
  padding: .75rem;
}

.other-controls[open] > summary {
  margin-bottom: .75rem;
}

.result-summary-card {
  margin: 1rem 0;
  padding: 1rem;
  border: 2px solid var(--learning-accent);
  border-radius: .7rem;
  background: var(--learning-surface);
}

.result-summary-card h3 {
  font-size: 1.2rem;
  margin: .1rem 0 .5rem;
}

.result-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .45rem .8rem;
  margin: 1rem 0 0;
}

.result-facts dt {
  font-weight: 700;
}

.result-facts dd {
  margin: 0;
}

.result-secondary {
  margin: 1.25rem 0;
}

.result-details,
.technical-details {
  margin: 1rem 0;
  padding: .75rem;
  border: 1px solid var(--learning-border);
  border-radius: .6rem;
}

.result-details summary,
.technical-details summary {
  cursor: pointer;
  font-weight: 700;
}

.technical-details li {
  overflow-wrap: anywhere;
}

.topology-node[data-state="not_reached"] {
  opacity: .62;
  border-style: dashed;
}

.topology-node[data-state="generated_response"],
.topology-node[data-origin="true"] {
  border: 2px solid var(--learning-accent);
  background: #f3f9ff;
}

.policy[data-origin="true"] {
  font-weight: 700;
  border: 2px solid var(--learning-accent);
}

@media (max-width: 767px) {
  .service-roles,
  .learning-notes {
    grid-template-columns: 1fr;
  }

  .learning-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .learning-mode button {
    padding: .55rem .25rem;
  }

  .guided-panel,
  .free-panel {
    padding: .8rem;
  }

  .secondary-action,
  .primary-action {
    width: 100%;
  }

  .result-facts {
    grid-template-columns: 1fr;
    gap: .2rem;
  }

  .result-facts dd {
    margin-bottom: .55rem;
  }
}

@media (min-width: 768px) {
  .guided-layout {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
    margin-top: 1.25rem;
  }

  .guided-panel,
  .free-panel {
    grid-column: 1;
    margin-top: 0;
  }

  .experiment-workspace {
    grid-column: 2;
    min-width: 0;
  }

  .guided-panel,
  .free-panel {
    position: sticky;
    top: 1rem;
  }

  .topology-node {
    padding: .65rem;
  }
}

@media (min-width: 1100px) {
  .guided-layout {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  }

  .experiment-workspace .topology {
    display: flex;
    align-items: stretch;
    gap: .45rem;
  }

  .experiment-workspace .topology-node {
    flex: 1 1 0;
    min-width: 0;
  }

  .experiment-workspace .topology-arrow {
    align-self: center;
    flex: 0 0 auto;
  }
}

/* R-7E: the same workspace DOM changes presentation by form factor. */
.workspace-tabs {
  display: none;
}

.workspace-pane {
  min-width: 0;
}

.result-empty {
  margin: 0;
  border: 1px dashed var(--learning-border);
  border-radius: .6rem;
  background: var(--learning-surface);
  color: var(--learning-muted);
  padding: 1rem;
}

.mobile-actions {
  display: none;
}

@media (max-width: 699px) {
  #detail-view {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }

  .guided-layout {
    display: block;
    margin-top: .75rem;
  }

  .guided-panel,
  .free-panel {
    margin-top: 0;
  }

  .stage-progress,
  #stage-title,
  .stage-setting {
    margin: .35rem 0;
  }

  .stage-details {
    margin-top: .75rem;
    border: 1px solid var(--learning-border);
    border-radius: .6rem;
    background: #fff;
    padding: .65rem;
  }

  .stage-details summary {
    cursor: pointer;
    font-weight: 700;
  }

  .stage-details[open] > summary {
    margin-bottom: .65rem;
  }

  .experiment-workspace {
    margin-top: .75rem;
  }

  .workspace-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin: .75rem 0;
  }

  .workspace-tabs button {
    min-height: 44px;
    border: 1px solid var(--learning-border);
    background: #fff;
    color: #172033;
    font-weight: 700;
  }

  .workspace-tabs button[aria-selected="true"] {
    border-color: var(--learning-accent);
    background: var(--learning-surface);
    color: var(--learning-accent);
  }

  .workspace-pane {
    min-width: 0;
  }

  .settings-pane .topology {
    gap: .45rem;
  }

  .settings-pane .topology-node {
    min-height: 0;
    padding: .55rem .65rem;
  }

  .settings-pane .topology-node p {
    margin: .25rem 0;
  }

  .settings-pane .topology-arrow {
    font-size: 1.1rem;
    line-height: 1;
  }

  .settings-pane fieldset {
    margin: .75rem 0;
    padding: .65rem;
  }

  .settings-pane fieldset.focus-control {
    border: 2px solid var(--learning-accent);
    background: var(--learning-surface);
  }

  .settings-pane .option {
    margin: .4rem 0;
    padding: .6rem;
  }

  .settings-pane .run-area {
    min-height: 0;
    margin: 0;
  }

  .mobile-actions {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    border-top: 1px solid var(--learning-border);
    background: #fff;
    box-shadow: 0 -4px 12px rgb(23 32 48 / 12%);
    padding: .6rem max(.75rem, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-right));
  }

  .mobile-actions button:only-child {
    grid-column: 1 / -1;
  }

  .mobile-actions button {
    min-width: 0;
    margin-top: 0;
    padding: .6rem .45rem;
  }
}

@media (min-width: 700px) and (max-width: 1099px) {
  #detail-view {
    min-height: 100dvh;
  }

  .guided-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    align-items: stretch;
    gap: 1rem;
    min-height: calc(100dvh - 10rem);
    margin-top: 1rem;
  }

  .guided-panel,
  .free-panel {
    grid-column: 1;
    align-self: start;
    position: sticky;
    top: 1rem;
    margin-top: 0;
  }

  .stage-details {
    margin-top: .75rem;
  }

  .experiment-workspace {
    grid-column: 2;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
  }

  .workspace-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: .75rem;
  }

  .workspace-tabs button {
    min-height: 44px;
    border: 1px solid var(--learning-border);
    background: #fff;
    color: #172033;
    font-weight: 700;
  }

  .workspace-tabs button[aria-selected="true"] {
    border-color: var(--learning-accent);
    background: var(--learning-surface);
    color: var(--learning-accent);
  }

  .workspace-pane {
    min-height: 0;
    max-height: calc(100dvh - 14rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
  }

  .settings-pane .topology-node {
    padding: .65rem;
  }
}

@media (min-width: 1100px) {
  #detail-view {
    min-height: 100dvh;
  }

  .guided-layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(360px, .9fr) minmax(420px, 1.1fr);
    align-items: stretch;
    gap: 1rem;
    min-height: calc(100dvh - 10rem);
    margin-top: 1rem;
  }

  .guided-panel,
  .free-panel {
    grid-column: 1;
    align-self: start;
    position: sticky;
    top: 1rem;
    margin-top: 0;
  }

  .experiment-workspace {
    display: contents;
  }

  .workspace-tabs {
    display: none;
  }

  .settings-pane {
    grid-column: 2;
  }

  .result-pane {
    grid-column: 3;
  }

  .workspace-pane {
    min-width: 0;
    min-height: 0;
    max-height: calc(100dvh - 12rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 .45rem .75rem 0;
  }

  .settings-pane .topology {
    display: grid;
    grid-template-columns: 1fr;
  }

  .settings-pane .topology-arrow {
    transform: rotate(90deg);
  }

  .settings-pane .topology-node {
    padding: .65rem;
  }

  .result-pane #result {
    margin-top: 0;
  }

  .result-empty {
    margin-top: 0;
  }
}