/* City Finder: a focused three-band tuning form. */

:root[data-style="city"] .finder-page {
  --finder-desk-ink: var(--fp-ink);
  --finder-desk-field: color-mix(in srgb, var(--color-secondary) 13%, var(--color-surface));
  background: var(--color-surface);
  min-width: 0;
}

:root[data-style="city"] .finder-page .finder-tuning-stage {
  background:
    linear-gradient(
      180deg,
      var(--finder-desk-field) 0,
      var(--finder-desk-field) 46%,
      var(--color-surface) 46%
    );
}

:root[data-style="city"] .finder-page .finder-tuning-layout {
  max-width: 760px;
  width: 100%;
}

:root[data-style="city"] .finder-page .finder-control-sheet {
  align-self: start;
  background: var(--color-surface-container-lowest);
  min-height: 620px;
  padding: 32px;
}

:root[data-style="city"] .finder-page .finder-step-panel {
  margin-top: 40px;
}

:root[data-style="city"] .finder-page .finder-signal-path {
  min-width: 0;
  position: relative;
}

:root[data-style="city"] .finder-page .finder-signal-path::before,
:root[data-style="city"] .finder-page .finder-signal-path::after {
  content: '';
  height: 4px;
  left: 16.666%;
  position: absolute;
  top: 17px;
  transform-origin: left center;
  width: 66.666%;
}

:root[data-style="city"] .finder-page .finder-signal-path::before {
  background: color-mix(in srgb, var(--finder-desk-ink) 16%, transparent);
}

:root[data-style="city"] .finder-page .finder-signal-path::after {
  background: var(--color-secondary);
  transform: scaleX(calc(var(--finder-signal-step) / 2));
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-style="city"] .finder-page .finder-signal-bands {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

:root[data-style="city"] .finder-page .finder-signal-band {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  text-align: center;
}

/* Classic's between-band connector segments have no place on City — the
   signal-path track on .finder-signal-path is the connector. */
:root[data-style="city"] .finder-page .finder-signal-band-connector {
  display: none;
}

:root[data-style="city"] .finder-page .finder-signal-band-index {
  align-items: center;
  background: var(--color-surface-container-lowest);
  border: var(--fp-outline-width) solid var(--finder-desk-ink);
  border-radius: 0;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  height: 36px;
  justify-content: center;
  width: 36px;
}

:root[data-style="city"] .finder-page .finder-signal-band[data-signal-state="complete"] .finder-signal-band-index {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

:root[data-style="city"] .finder-page .finder-signal-band[data-signal-state="current"] .finder-signal-band-index {
  background: var(--color-tertiary);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--finder-desk-ink) 24%, transparent);
  color: var(--color-on-tertiary);
}

/* Future bands mute by color, never by band-level opacity — a translucent
   square background lets the signal-path track bleed through it. */
:root[data-style="city"] .finder-page .finder-signal-band[data-signal-state="future"] .finder-signal-band-index {
  border-color: color-mix(in srgb, var(--finder-desk-ink) 45%, transparent);
  color: color-mix(in srgb, var(--color-on-surface) 45%, transparent);
}

:root[data-style="city"] .finder-page .finder-signal-band[data-signal-state="future"] .finder-signal-band-label {
  opacity: 0.56;
}

:root[data-style="city"] .finder-page .finder-signal-band-label {
  color: var(--color-on-surface);
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

:root[data-style="city"] .finder-page .finder-budget-ticket {
  background: var(--color-surface-container-low);
  border: var(--fp-outline-width) solid var(--finder-desk-ink);
  min-width: 116px;
  padding: 8px 10px;
  position: relative;
}

:root[data-style="city"] .finder-page .finder-budget-ticket::before,
:root[data-style="city"] .finder-page .finder-budget-ticket::after {
  background: var(--color-surface-container-lowest);
  border: var(--fp-outline-width) solid var(--finder-desk-ink);
  border-radius: 50%;
  content: '';
  height: 10px;
  position: absolute;
  top: 50%;
  width: 10px;
}

:root[data-style="city"] .finder-page .finder-budget-ticket::before {
  left: -7px;
}

:root[data-style="city"] .finder-page .finder-budget-ticket::after {
  right: -7px;
}

:root[data-style="city"] .finder-page .finder-budget-ruler {
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--finder-desk-ink) 22%, transparent) 0 2px,
      transparent 2px 10%
    );
  border: var(--fp-outline-width) solid var(--finder-desk-ink);
  padding-top: 8px;
}

:root[data-style="city"] .finder-page .quiz-range-input {
  height: 48px;
}

:root[data-style="city"] .finder-page .quiz-range-input::-webkit-slider-thumb {
  height: 44px;
  width: 44px;
}

:root[data-style="city"] .finder-page .quiz-range-input::-moz-range-thumb {
  height: 44px;
  width: 44px;
}

:root[data-style="city"] .finder-page .quiz-range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-tertiary) 44%, transparent);
}

:root[data-style="city"] .finder-page .quiz-range-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-tertiary) 44%, transparent);
}

:root[data-style="city"] .finder-page .finder-budget-availability {
  border: var(--fp-outline-width) solid var(--finder-desk-ink);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--finder-desk-ink) 16%, transparent);
}

:root[data-style="city"] .finder-page .finder-priority-meter {
  background: var(--color-surface-container-low);
  border: var(--fp-outline-width) solid var(--finder-desk-ink);
  border-left: 8px solid var(--color-tertiary);
  padding: 9px 12px;
  width: fit-content;
}

:root[data-style="city"] .finder-page .finder-priority-meter-track {
  gap: 5px;
}

:root[data-style="city"] .finder-page .finder-priority-meter-dot {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--finder-desk-ink);
  border-radius: 0;
  height: 10px;
  width: 18px;
}

:root[data-style="city"] .finder-page .finder-priority-meter-dot.is-filled {
  background: var(--color-secondary);
}

:root[data-style="city"] .finder-page .finder-priority-meter-label {
  color: var(--color-on-surface);
  font-size: 0.8125rem;
  font-weight: 700;
}

:root[data-style="city"] .finder-page .finder-priority-pad {
  gap: 14px;
}

:root[data-style="city"] .finder-page .finder-priority-option,
:root[data-style="city"] .finder-page .finder-condition-channel {
  border-width: var(--fp-outline-width);
  transform: none;
  transition: none;
}

:root[data-style="city"] .finder-page .finder-priority-option {
  --finder-priority-signal: var(--color-tertiary);
  align-items: center;
  background: var(--color-surface-container-lowest);
  border-color: var(--finder-desk-ink);
  border-radius: 0;
  box-shadow:
    inset 0 7px 0 var(--finder-priority-signal),
    3px 3px 0 color-mix(in srgb, var(--finder-desk-ink) 16%, transparent);
  column-gap: 16px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 116px;
  padding: 19px 16px 14px;
}

:root[data-style="city"] .finder-page .finder-priority-option:nth-child(3n + 2) {
  --finder-priority-signal: var(--color-secondary);
}

:root[data-style="city"] .finder-page .finder-priority-option:nth-child(3n) {
  --finder-priority-signal: var(--color-primary);
}

:root[data-style="city"] .finder-page .finder-priority-option:nth-child(3n) .finder-priority-icon {
  color: var(--color-on-primary);
}

:root[data-style="city"] .finder-page .finder-priority-icon {
  align-self: center;
  background: var(--finder-priority-signal);
  border: var(--fp-outline-width) solid var(--finder-desk-ink);
  border-radius: 0;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--finder-desk-ink) 20%, transparent);
  color: var(--color-on-tertiary);
  height: 48px;
  width: 48px;
}

:root[data-style="city"] .finder-page .finder-condition-channel {
  gap: 8px;
  min-height: 168px;
  padding: 16px;
}

:root[data-style="city"] .finder-page .finder-priority-option:hover,
:root[data-style="city"] .finder-page .finder-condition-channel:hover {
  transform: none;
}

:root[data-style="city"] .finder-page .finder-priority-option[aria-pressed="false"]:not(:disabled):hover {
  background: var(--finder-desk-field);
  box-shadow:
    inset 0 7px 0 var(--finder-priority-signal),
    5px 5px 0 color-mix(in srgb, var(--finder-desk-ink) 24%, transparent);
}

:root[data-style="city"] .finder-page .finder-priority-option:focus-visible {
  outline: 4px solid color-mix(in srgb, var(--color-tertiary) 64%, transparent);
  outline-offset: 3px;
}

:root[data-style="city"] .finder-page .finder-priority-option[aria-pressed="true"],
:root[data-style="city"] .finder-page .finder-condition-channel[aria-pressed="true"] {
  border-color: var(--finder-desk-ink);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--finder-desk-ink) 20%, transparent);
}

:root[data-style="city"] .finder-page .finder-priority-option[aria-pressed="true"] {
  background: var(--color-primary-container);
  box-shadow:
    inset 0 7px 0 var(--finder-priority-signal),
    5px 5px 0 color-mix(in srgb, var(--finder-desk-ink) 30%, transparent);
}

:root[data-style="city"] .finder-page .finder-priority-option[aria-pressed="true"] .finder-priority-icon {
  background: var(--finder-priority-signal);
}

:root[data-style="city"] .finder-page .finder-priority-option[data-selection-order]::after {
  background: var(--color-tertiary);
  border: var(--fp-outline-width) solid var(--finder-desk-ink);
  color: var(--color-on-tertiary);
  content: attr(data-selection-order);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  height: 26px;
  line-height: 22px;
  position: absolute;
  right: -5px;
  text-align: center;
  top: -5px;
  width: 26px;
}

:root[data-style="city"] .finder-page .finder-priority-option[data-selection-order] > span:first-child {
  visibility: hidden;
}

:root[data-style="city"] .finder-page .finder-priority-option:disabled {
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--finder-desk-ink) 6%, transparent) 0 5px,
      transparent 5px 10px
    );
  border-style: dashed;
  opacity: 0.58;
}

:root[data-style="city"] .finder-page .finder-condition-channel {
  background: var(--color-surface-container-lowest);
  border-color: var(--finder-desk-ink);
  border-radius: 0;
  box-shadow:
    inset 0 7px 0 var(--color-secondary),
    3px 3px 0 color-mix(in srgb, var(--finder-desk-ink) 16%, transparent);
  justify-content: flex-start;
  padding-top: 22px;
}

:root[data-style="city"] .finder-page .finder-condition-icon {
  background: var(--color-secondary);
  border: var(--fp-outline-width) solid var(--finder-desk-ink);
  border-radius: 0;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--finder-desk-ink) 20%, transparent);
  color: var(--color-on-secondary);
}

:root[data-style="city"] .finder-page .finder-condition-stamp {
  background: var(--color-tertiary);
  border: 1px solid var(--finder-desk-ink);
  border-radius: 0;
  color: var(--color-on-tertiary);
  padding: 3px 7px;
}

:root[data-style="city"] .finder-page .finder-condition-channel[aria-pressed="false"]:hover {
  background: var(--finder-desk-field);
  box-shadow:
    inset 0 7px 0 var(--color-secondary),
    5px 5px 0 color-mix(in srgb, var(--finder-desk-ink) 24%, transparent);
}

:root[data-style="city"] .finder-page .finder-condition-channel[aria-pressed="true"],
:root[data-style="city"] .finder-page .finder-condition-channel[aria-pressed="true"]:hover {
  background: var(--color-primary-container);
  box-shadow:
    inset 0 7px 0 var(--color-secondary),
    5px 5px 0 color-mix(in srgb, var(--finder-desk-ink) 30%, transparent);
}

:root[data-style="city"] .finder-page .finder-condition-channel:focus-visible {
  outline: 4px solid color-mix(in srgb, var(--color-tertiary) 64%, transparent);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  :root[data-style="city"] .finder-page .finder-tuning-stage {
    padding-inline: 16px;
    padding-top: 40px;
  }

  :root[data-style="city"] .finder-page .finder-tuning-layout {
    max-width: 640px;
  }

  :root[data-style="city"] .finder-page .finder-control-sheet {
    min-height: 0;
    padding-block: 16px;
    padding-inline: 20px;
  }

  :root[data-style="city"] .finder-page .finder-signal-band-label {
    font-size: 0.6875rem;
  }

  :root[data-style="city"] .finder-page .finder-step-panel {
    margin-top: 24px;
  }

  :root[data-style="city"] .finder-page .finder-budget-readouts {
    margin-top: 24px;
  }

  :root[data-style="city"] .finder-page .finder-budget-availability {
    margin-top: 20px;
  }

  :root[data-style="city"] .finder-page .finder-quiz-navigation {
    margin-top: 24px;
  }

  :root[data-style="city"] .finder-page .finder-budget-ticket {
    min-width: 0;
  }

  :root[data-style="city"] .finder-page .finder-priority-pad {
    grid-template-columns: minmax(0, 1fr);
  }

  :root[data-style="city"] .finder-page .finder-priority-option {
    min-height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style="city"] .finder-page .finder-signal-path::after {
    transition: none;
  }
}