/* Demo journey: an editorial agenda beside a clear, light enquiry panel. */
.ax-demo-editorial {
  background: var(--ax-bg);
}

.ax-demo-introduction {
  background: var(--ax-bg);
  padding-top: calc(var(--ax-nav-h) + 56px);
}

.ax-demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro contact"
    "agenda contact";
  align-items: start;
  gap: var(--ax-6) clamp(var(--ax-4), 5cqi, var(--ax-10));
}

.ax-demo-intro {
  grid-area: intro;
}

.ax-demo-layout .ax-h1 {
  font-size: var(--ax-h3-fluid);
  line-height: var(--ax-h3-lh-fluid);
  max-width: 15ch;
}

.ax-demo-selected {
  display: flex;
  align-items: center;
  gap: var(--ax-1);
  color: var(--ax-accent);
  font-size: var(--ax-button);
  line-height: 24px;
}

.ax-demo-selected > span {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background: currentColor;
}

.ax-demo-agenda {
  grid-area: agenda;
  display: grid;
  gap: var(--ax-4);
  padding-block-start: var(--ax-4);
}

.ax-demo-agenda__list {
  border-top: 1px solid var(--ax-border);
}

.ax-demo-agenda__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--ax-2);
  padding-block: var(--ax-3);
  border-bottom: 1px solid var(--ax-border);
}

.ax-demo-agenda__item h3 {
  font-size: var(--ax-body);
  line-height: 1.3;
}

.ax-demo-agenda__number {
  font-family: var(--ax-font-mono);
  font-size: 14px;
  line-height: 26px;
  color: var(--ax-accent);
}

.ax-demo-panel {
  grid-area: contact;
  --ax-bg: var(--ax-gray-11);
  --ax-bg-raised: var(--ax-gray-12);
  --ax-text: var(--ax-gray-01);
  --ax-text-2: var(--ax-gray-03);
  --ax-text-muted: var(--ax-gray-06);
  --ax-text-dim: var(--ax-gray-06);
  --ax-border: var(--ax-gray-09);
  --ax-surface: var(--ax-gray-12);
  --ax-surface-hover: var(--ax-gray-10);
  --ax-surface-strong: var(--ax-gray-10);
  --ax-accent: var(--ax-green-05);
  --ax-accent-hover: var(--ax-green-03);
  --ax-danger: var(--ax-red-06);
  min-width: 0;
  display: grid;
  gap: var(--ax-4);
  padding: clamp(var(--ax-3), 3cqi, var(--ax-6));
  background: var(--ax-bg);
  color: var(--ax-text);
  scroll-margin-top: 112px;
}

.ax-demo-panel__header {
  display: grid;
  gap: var(--ax-2);
  padding-bottom: var(--ax-3);
  border-bottom: 1px solid var(--ax-border);
}

.ax-demo-panel__header .ax-h3 {
  font-size: var(--ax-subhead);
  line-height: var(--ax-subhead-lh);
}

.ax-demo-panel .ax-control {
  color-scheme: light;
  font-size: 16px;
}

.ax-demo-panel .ax-btn--primary {
  --ax-accent: var(--ax-green-09);
  --ax-accent-hover: var(--ax-green-11);
  color: var(--ax-gray-01);
}

.ax-demo-panel .ax-btn:focus-visible {
  outline: 3px solid var(--ax-green-05);
  outline-offset: 4px;
}

.ax-demo-fields {
  min-width: 0;
}

.ax-demo-fields .ax-form__grid {
  grid-template-columns: minmax(0, 1fr);
}

.ax-demo-context,
.ax-demo-preview__notice {
  display: grid;
  gap: var(--ax-1);
  padding: var(--ax-2);
  background: var(--ax-green-12);
  border-left: 2px solid var(--ax-green-05);
}

.ax-demo-preview {
  display: grid;
  gap: var(--ax-3);
  padding-block-start: var(--ax-3);
  border-top: 1px solid var(--ax-border);
}

.ax-demo-preview__notice {
  background: var(--ax-gold-12);
  border-color: var(--ax-gold-06);
}

.ax-demo-confirmation {
  display: grid;
  gap: var(--ax-2);
  padding: var(--ax-3);
  border: 1px solid var(--ax-green-05);
  background: var(--ax-green-12);
  color: var(--ax-gray-01);
  scroll-margin-top: 112px;
}

.ax-demo-confirmation .ax-small {
  color: var(--ax-gray-05);
}

.ax-demo-confirmation:focus-visible {
  outline: 2px solid var(--ax-green-05);
  outline-offset: 4px;
}

.ax-demo-confirmation__mark {
  display: grid;
  place-items: center;
  width: var(--ax-6);
  height: var(--ax-6);
  background: var(--ax-green-09);
}

.ax-demo-next {
  --ax-text: var(--ax-gray-01);
  --ax-text-2: var(--ax-gray-03);
  --ax-text-muted: var(--ax-green-04);
  padding-block: clamp(var(--ax-6), 7cqi, var(--ax-10));
  background: var(--ax-green-09);
  color: var(--ax-text);
}

.ax-demo-next__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--ax-3) var(--ax-6);
  align-items: end;
}

.ax-demo-next__inner > .ax-label {
  grid-column: 1 / -1;
}

.ax-demo-next .ax-h2 {
  font-size: var(--ax-h3-fluid);
  line-height: var(--ax-h3-lh-fluid);
}

@media (max-width: 960px) {
  .ax-demo-introduction {
    padding-top: calc(var(--ax-nav-h-m) + 32px);
  }

  .ax-demo-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "intro"
      "contact"
      "agenda";
    gap: var(--ax-6);
  }

  .ax-demo-layout .ax-h1 {
    font-size: var(--ax-h1-fluid);
    line-height: var(--ax-h1-lh-fluid);
  }

  .ax-demo-next__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}