/* The taxi ride card. Self-contained on purpose: the rest of the quest keeps its
   own fonts and colours, and this screen follows the reference - a white card on
   a light-grey panel, black headings, grey secondary labels, big round buttons.
   The colour names are the ones the reference asks for, scoped to the sheet so
   they never touch the global tokens. */

.sheet--taxi {
  --background: #f3f3f1;
  --card: #ffffff;
  --text: #111111;
  /* The reference asked for #999, but on white that is only 2.8:1. #6f6f6f is
     the same grey family and clears 4.5:1 on every surface the card uses,
     including the #f5f5f5 buttons. See docs/DECISIONS.md, 2026-10-01. */
  --secondary: #6f6f6f;
  --divider: #dedede;
  --button-background: #f5f5f5;
  background: var(--background);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sheet--taxi .sheet__grip {
  background: rgb(0 0 0 / 14%);
}

.sheet--taxi .sheet__footer {
  background: var(--background);
}

/* A ghost button keeps its theme colours elsewhere; on this always-light sheet
   they would be pale. Pin it to the card's own greys. */
.sheet--taxi .btn--ghost {
  color: #555555;
  border-color: #d4d4d1;
}

/* --- card --------------------------------------------------------------- */

.taxi__card {
  padding: 22px 20px 26px;
  border-radius: 30px;
  background: var(--card);
  border: 1px solid rgb(0 0 0 / 4%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
}

.taxi__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.taxi__headline {
  min-width: 0;
  flex: 1 1 auto;
}

.taxi__eta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.taxi__chevron {
  color: var(--secondary);
  font-weight: 500;
}

.taxi__car {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.taxi__aside {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.taxi__image {
  width: 118px;
  height: auto;
  max-height: 74px;
  object-fit: contain;
}

.taxi__plate {
  padding: 11px 18px;
  border-radius: 14px;
  background: var(--button-background);
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.taxi__divider {
  height: 1px;
  margin: 20px 0 24px;
  background: var(--divider);
}

.taxi__bottom {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.taxi__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.taxi__col--action {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.taxi__photo,
.taxi__action {
  width: 100%;
  max-width: 122px;
  aspect-ratio: 1 / 1;
}

.taxi__photo {
  position: relative;
}

.taxi__photo-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--button-background);
}

.taxi__rating {
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgb(0 0 0 / 14%);
}

.taxi__label {
  margin: 0;
  max-width: 100%;
  color: var(--secondary);
  font-size: 18px;
  line-height: 1.15;
  text-align: center;
}

.taxi__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  background: var(--button-background);
  color: var(--text);
  transition: transform 0.15s ease, background 0.15s ease;
}

.taxi__col--action:hover .taxi__action {
  transform: scale(1.05);
}

.taxi__col--action:active .taxi__action {
  transform: scale(0.96);
}

.taxi__icon {
  width: 32px;
  height: 32px;
  display: block;
}

/* --- the two round panels under the card -------------------------------- */

.taxi__panel {
  padding: 16px 18px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.taxi__panel-title {
  margin: 0;
  color: var(--secondary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.taxi__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

.taxi__row .taxi__icon {
  width: 24px;
  height: 24px;
}

.taxi__row-note {
  margin-left: auto;
  color: var(--secondary);
}

.taxi__row--muted {
  color: var(--secondary);
}

/* --- search ------------------------------------------------------------- */

.taxi__search {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-height: 260px;
  padding: 40px 20px;
  border-radius: 30px;
  background: var(--card);
  box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
}

.taxi__radar {
  position: relative;
  width: 150px;
  height: 150px;
}

.taxi__ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgb(17 17 17 / 22%);
  border-radius: 50%;
  opacity: 0;
  animation: taxi-ping 2.4s cubic-bezier(0.22, 0.9, 0.3, 1) infinite;
}

.taxi__ring:nth-child(2) {
  animation-delay: 0.8s;
}

.taxi__ring:nth-child(3) {
  animation-delay: 1.6s;
}

.taxi__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--text);
}

@keyframes taxi-ping {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  30% {
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.taxi__search-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

/* --- found -------------------------------------------------------------- */

.taxi__found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 24px;
  border-radius: 30px;
  background: var(--card);
  box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
  text-align: center;
}

.taxi__found-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

.taxi__found-eta {
  margin: 0;
  color: var(--secondary);
  font-size: 20px;
}

.taxi__found-note {
  margin: 8px 0 0;
  color: var(--secondary);
  font-size: 17px;
}

/* --- waiting ------------------------------------------------------------ */

.taxi__wait {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--button-background);
}

.taxi__wait-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.taxi__wait-time {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.taxi__wait-note {
  margin: 0;
  color: var(--secondary);
  font-size: 16px;
}

/* --- demo advance button ------------------------------------------------ */

.taxi__dev-btn {
  font-family: inherit;
}

/* --- reduced motion: the radar holds still but still reads --------------- */

@media (prefers-reduced-motion: reduce) {
  .taxi__ring {
    animation: none;
    opacity: 0.35;
    transform: scale(0.78);
  }
}

/* --- tight phones: shrink the three columns so they still fit side by side */

@media (max-width: 380px) {
  .taxi__eta {
    font-size: 24px;
  }

  .taxi__car {
    font-size: 19px;
  }

  .taxi__image {
    width: 96px;
  }

  .taxi__plate {
    padding: 9px 14px;
    font-size: 15px;
  }

  .taxi__label {
    font-size: 16px;
  }

  .taxi__icon {
    width: 28px;
    height: 28px;
  }
}