/*
  nextCard — the band at the bottom of every page with ONE card naming the next page
  (component.json nextCard, 22 tokens; replaces prevNext, approved by Vivek 2026-10-19).
  The card: a small "Next" label, the destination's title in bold, a plain arrow on the right.
  The whole card is one link (no button inside it: one object, one action). No "previous":
  the Work menu and the browser's back button cover it, so no page shows a disabled button.
  States: flat at rest; hover lifts with the buttons' resting shadow (mouse only);
  pressed shows the ambient shadow, a soft glow with no lift; focus gets the button's ring.
*/

.next-card {
  background-color: var(--next-card-band-fill-all);
  padding-block-start: var(--next-card-band-padding-vertical-all);
  /* plus the iPhone home bar, so the card never sits against the bottom edge */
  padding-block-end: calc(var(--next-card-band-padding-vertical-all) + env(safe-area-inset-bottom, 0px));
  padding-inline: var(--next-card-band-padding-horizontal-all);
}

/* Same structure as every section: a centered container, and the card is the text column's width,
   so it lines up with the text above at every screen width. */
.next-card__container {
  max-width: calc(var(--next-card-content-max-width-all) - 2 * var(--next-card-band-padding-horizontal-all));
  margin-inline: auto;
}

.next-card__link {
  max-width: var(--next-card-text-max-width-all);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--next-card-gap-all);
  padding: var(--next-card-padding-all);
  background-color: var(--next-card-fill-all);
  border-radius: var(--next-card-radius-all);
  color: var(--next-card-content-all);
  text-decoration: none;
  box-shadow: var(--next-card-shadow-default);
  transition: box-shadow var(--next-card-transition-all-duration) var(--next-card-transition-all-easing);
  -webkit-tap-highlight-color: transparent;
}

.next-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--next-card-label-gap-all);
  min-width: 0;
}

.next-card__label {
  font-family: var(--next-card-label-text-style-all-font-family);
  font-size: var(--next-card-label-text-style-all-font-size);
  font-weight: var(--next-card-label-text-style-all-font-weight);
  line-height: var(--next-card-label-text-style-all-line-height);
  color: var(--next-card-label-content-all);
}

.next-card__title {
  font-family: var(--next-card-title-text-style-all-font-family);
  font-size: var(--next-card-title-text-style-all-font-size);
  font-weight: var(--next-card-title-text-style-all-font-weight);
  line-height: var(--next-card-title-text-style-all-line-height);
  color: var(--next-card-title-content-all); /* titles on their own line use ink.900; the arrow stays ink.800 (2026-10-19) */
  text-wrap: balance;
}

.next-card__icon {
  flex: none;
  width: var(--next-card-icon-size-all);
  height: var(--next-card-icon-size-all);
}

@media (hover: hover) {
  .next-card__link:hover {
    box-shadow: var(--next-card-shadow-hover);
  }
}

.next-card__link:active {
  box-shadow: var(--next-card-shadow-pressed);
  transition-duration: 0s;
}

.next-card__link:focus-visible {
  outline: var(--next-card-focus-ring-width-focus) solid var(--next-card-focus-ring-color-focus);
  outline-offset: var(--next-card-focus-ring-offset-focus);
}