.mode-page {
  min-inline-size: 0;
  min-height: 100vh;
  background: var(--wa-color-surface-lowered);
}

.mode-header {
  min-height: calc(var(--wa-space-4xl) + var(--wa-space-xl));
  padding: var(--wa-space-s) max(var(--wa-space-m), calc((100vw - var(--hw-content-wide)) / 2));
  border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.mode-header img {
  width: auto;
  height: calc(var(--wa-space-2xl) + var(--wa-space-m));
}

.mode-header > a:last-child {
  color: var(--wa-color-text-link);
  font-weight: var(--wa-font-weight-action);
}

.mode-shell {
  width: min(calc(100% - (2 * var(--wa-space-l))), var(--hw-content-wide));
  margin-inline: auto;
  padding-block: var(--wa-space-3xl);
}

.mode-shell h1 {
  margin-block: var(--wa-space-2xs) var(--wa-space-m);
}

.mode-lede {
  max-width: var(--hw-content-reading);
  margin-block-end: var(--wa-space-2xl);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-l);
}

.mode-choice,
.mode-task-choice {
  width: 100%;
}

.mode-choice::part(base) {
  min-height: calc(var(--wa-space-4xl) + var(--wa-space-3xl));
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--wa-space-l);
  border-radius: var(--wa-border-radius-l);
  text-align: start;
}

.mode-choice__label,
.mode-choice__kicker,
.mode-task-choice__copy,
.mode-task-choice__kicker {
  display: block;
}

.mode-choice__kicker,
.mode-task-choice__kicker {
  margin-block-end: var(--wa-space-2xs);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-action);
  letter-spacing: var(--hw-tracking-eyebrow);
  text-transform: uppercase;
}

.mode-choice strong,
.mode-task-choice strong {
  display: block;
  color: var(--wa-color-text-normal);
  font-size: var(--wa-font-size-l);
}

.mode-back {
  margin-block-end: var(--wa-space-xl);
}

.mode-task-choice::part(base) {
  height: auto;
  min-height: calc(var(--wa-space-4xl) + var(--wa-space-xl));
  justify-content: flex-start;
  padding: var(--wa-space-l);
  border-radius: var(--wa-border-radius-l);
  text-align: start;
  white-space: normal;
}

.mode-task-choice__copy {
  min-width: 0;
  inline-size: 100%;
  overflow-wrap: anywhere;
}

.mode-task-choice__copy > :last-child {
  display: block;
  margin-block-start: var(--wa-space-2xs);
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-body);
}