.swap-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink);
}

/* Clear of a phone's notch, rounded corners and home bar: see .page-shell in styles.css. */
.swap-page-shell {
  width: min(100% - 2 * max(20px, env(safe-area-inset-left), env(safe-area-inset-right)), 980px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(var(--space-6), env(safe-area-inset-top)) 0 max(var(--space-16), env(safe-area-inset-bottom));
}

.swap-page-header {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
}

.home-link {
  display: inline-flex;
  min-height: 44px;
  padding: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--soft-white);
  font-size: var(--text-supporting);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.home-link:active {
  color: var(--warm-white);
}

@media (hover: hover) and (pointer: fine) {
  .home-link:hover {
    color: var(--warm-white);
  }
}

.home-link .icon {
  width: 17px;
  height: 17px;
}

.swap-screen {
  padding-top: clamp(var(--space-8), 8vh, var(--space-20));
}

.swap-page-intro {
  max-width: 590px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.swap-page-intro h1 {
  max-width: 520px;
  margin: var(--space-2) auto var(--space-3);
  color: var(--warm-white);
  font-size: var(--text-display);
  font-weight: var(--weight-emphasis);
  letter-spacing: -0.062em;
  line-height: 0.99;
}

.swap-page-intro > p:last-child {
  max-width: 420px;
  margin: 0 auto;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.55;
}

/* The swap and tracking pages show a headline for the step. It is tighter than the other pages' intro. */
.flow-screen {
  padding-top: clamp(var(--space-6), 5vh, var(--space-12));
}

.flow-intro {
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.flow-intro h1 {
  max-width: 640px;
  margin-top: var(--space-4);
}

.flow-intro.swap-page-intro > p:last-child {
  max-width: 460px;
  text-wrap: balance;
}

.flow-intro h1:focus {
  outline: 0;
}

.flow-intro h1:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 6px;
}

/* The card is the hero. The summary beside it is slim and secondary; on a phone it sits under the card. */
.swap-workspace {
  display: grid;
  width: min(100%, 780px);
  margin: 0 auto;
  align-items: start;
  justify-content: center;
  gap: 16px 24px;
  /* The summary's floor is 224 px at any text size. In rem it grew with the text, and at 200% it took
     448 px and squeezed the card to 308. */
  grid-template-columns: minmax(0, 476px) minmax(min(14rem, 224px), 264px);
}

.route-card {
  max-width: none;
}

.route-card .amount-field {
  min-height: 108px;
}

.destination-field {
  display: grid;
  margin: 0 0 var(--space-2);
  gap: var(--space-2);
}

.destination-field > :is(span, label) {
  color: var(--soft-white);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
}

.destination-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  outline: 0;
  color: var(--warm-white);
  background: var(--well);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: -0.02em;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.destination-field input::placeholder {
  color: var(--color-placeholder);
  font-family: var(--font-sans);
  letter-spacing: -0.015em;
}

.destination-field input:focus {
  border-color: var(--color-line-focus);
  background: var(--color-field-active);
}

.destination-field input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

.route-card[data-invalid] .form-error {
  margin-bottom: var(--space-2);
}

.review-button {
  margin-top: 0;
}

.route-review-preview {
  min-height: 236px;
  padding: var(--space-4) var(--space-4) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--color-surface-preview);
  box-shadow: var(--shadow-inset-highlight);
  container-type: inline-size;
}

.preview-heading {
  display: flex;
  padding-bottom: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.preview-heading h2 {
  margin: 4px 0 0;
  color: var(--warm-white);
  font-size: var(--text-heading);
  font-weight: var(--weight-emphasis);
  letter-spacing: -0.035em;
}

/* The state chip's colours. Its shape is the one pill (material.css). */
.route-state {
  border-color: var(--color-provisional-line);
  color: var(--color-provisional-text);
  background: var(--color-provisional-bg);
}

.preview-list,
.review-list {
  margin: 0;
}

.preview-list {
  padding: 8px 0 0;
}

.preview-list > div,
.review-list > div {
  display: grid;
  min-height: 35px;
  align-items: center;
  gap: var(--space-4);
  grid-template-columns: minmax(72px, 0.55fr) 1fr;
}

.preview-list dt,
.review-list dt {
  color: var(--dim);
  font-size: var(--text-label);
}

.preview-list dd,
.review-list dd {
  min-width: 0;
  margin: 0;
  color: var(--soft-white);
  font-size: var(--text-body);
  font-weight: var(--weight-label);
  letter-spacing: -0.015em;
  text-align: right;
  overflow-wrap: anywhere;
}

.execution-status {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--color-provisional-copy);
  font-size: var(--text-supporting);
  line-height: 1.5;
}

.execution-status::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  /* 1px: lifts the dot onto the middle of the words. */
  margin: 0 var(--space-2) 1px 0;
  border-radius: var(--radius-pill);
  content: "";
  background: var(--amber);
  box-shadow: var(--shadow-provisional);
}

.review-dialog {
  width: min(calc(100% - 32px), 510px);
  max-height: min(650px, calc(100% - 2 * max(16px, env(safe-area-inset-top), env(safe-area-inset-bottom))));
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--color-line-focus);
  border-radius: var(--radius-card);
  color: var(--warm-white);
  background: var(--color-dialog);
  box-shadow: var(--shadow-dialog);
  overscroll-behavior: contain;
}

.review-dialog::backdrop {
  background: var(--color-overlay-dialog);
  backdrop-filter: blur(4px);
}

.review-dialog-panel {
  padding-bottom: var(--space-4);
  container-type: inline-size;
}

.review-list {
  margin-top: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.review-list > div {
  min-height: 41px;
}

.review-list .address-value {
  max-width: 290px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: 1.35;
}

.review-status {
  margin-top: 12px;
}

.review-close-button {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-4);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-interactive);
  border-radius: var(--radius-control);
  color: var(--warm-white);
  background: var(--color-control);
  cursor: pointer;
  font-size: var(--text-supporting);
  font-weight: var(--weight-emphasis);
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.review-close-button:active {
  border-color: var(--color-line-focus);
  background: var(--color-control-raised-hover);
}

@media (hover: hover) and (pointer: fine) {
  .review-close-button:hover {
    border-color: var(--color-line-focus);
    background: var(--color-control-raised-hover);
  }
}

.review-close-button:active {
  transform: translateY(1px);
}

/* With no summary beside it (a swap that was returned or failed), the card stands alone, in the middle. */
.swap-workspace[data-solo] {
  grid-template-columns: minmax(0, 476px);
}

@media (max-width: 760px) {
  .swap-workspace {
    max-width: 476px;
    grid-template-columns: minmax(0, 1fr);
  }

  .route-review-preview {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .swap-page-shell {
    width: min(100% - 2 * max(14px, env(safe-area-inset-left), env(safe-area-inset-right)), 720px);
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }

  .swap-screen {
    padding-top: 48px;
  }

  .swap-page-intro {
    margin-bottom: 20px;
  }

  .swap-page-intro h1 {
    max-width: 390px;
  }
}

@media (max-width: 380px) {
  .swap-page-shell {
    width: min(100% - 2 * max(10px, env(safe-area-inset-left), env(safe-area-inset-right)), 720px);
  }
}

@container (max-width: 14rem) {
  .preview-list > div,
  .review-list > div {
    padding: var(--space-2) 0;
    align-items: start;
    gap: var(--space-1);
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-list dd,
  .review-list dd {
    text-align: left;
  }

  .review-list .address-value {
    max-width: none;
  }
}