/* SMACSS Module: the station search — the middle of the top bar, with a
   suggestion list that drops below it. */
.station-search {
  /* Room the ask opens above and below the field, for the sentence and the
     button. Symmetric, so the card it opens stays centred on the field. */
  --ask-inset: calc(var(--control-height) + var(--space-m));
  grid-column: 2;
  position: relative;
  width: 360px;
  /* The bar's middle column gives way to the clock on a narrow screen; the
     field goes with it rather than out over the edge. */
  max-width: 100%;
  min-width: 0;
  transition:
    transform var(--transition-panel),
    width var(--transition-panel),
    padding var(--transition-panel),
    margin var(--transition-panel),
    background var(--transition-panel);
}

/* The ask: the field moves out onto the empty stage and opens into a card
   holding the sentence, the field and the button together. The card is made by
   padding the field's own box, with the vertical padding taken straight back
   off as margin, so the margin box keeps the size the bar gave it and the
   buttons beside it never move. How far it has to travel depends on where the
   bar put it, which differs between the layouts, so the script measures it. */
.station-search.is-inviting {
  width: var(--invitation-width);
  /* The ask leaves the bar, so the column it came from no longer bounds it. */
  max-width: none;
  padding: var(--ask-inset) var(--space-m);
  margin-block: calc(-1 * var(--ask-inset));
  background: var(--color-surface);
  backdrop-filter: blur(6px);
  transform: translate(
    var(--invitation-shift-x, 0),
    var(--invitation-shift-y, 0)
  );
}

/* Both stand off the field rather than off the card, which is still opening its
   padding around them at the time. */
.station-search-prompt,
.station-search-lucky {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-panel);
}

.station-search-prompt {
  bottom: calc(100% + var(--space-m));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: var(--color-control-text);
  font-size: 15px;
  font-weight: 600;
}

.station-search-lucky {
  top: calc(100% + var(--space-m));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border: 0;
  background: var(--color-control-text);
  color: var(--color-background);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* Guarded: a tap leaves :hover standing on a touch screen. */
@media (hover: hover) {
  .station-search-lucky:hover {
    filter: brightness(1.1);
  }
}

.station-search.is-inviting .station-search-prompt,
.station-search.is-inviting .station-search-lucky {
  opacity: 1;
  pointer-events: auto;
}

/* The suggestions drop into the space the button stands in. */
.station-search.is-inviting.is-open .station-search-lucky {
  opacity: 0;
  pointer-events: none;
}

.station-search-input {
  width: 100%;
  height: var(--control-height);
  padding: 0 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  backdrop-filter: blur(6px);
  color: var(--color-text);
  font: inherit;
  /* The height is not among these: the button stands off the field's lower
     edge, so a height that grew over the transition would carry the button down
     with it. */
  transition:
    background var(--transition-panel),
    font-size var(--transition-panel);
}

/* A phone browser zooms the page in when a field under 16px takes focus, and
   does not take that zoom back when the keyboard goes -- which leaves the
   picture standing too large, the dock off its corner and under the browser's
   own bars. Held to the touch pointers this happens on, so a mouse keeps the
   bar's own size. */
@media (pointer: coarse) {
  .station-search-input {
    font-size: 16px;
  }
}

/* Grown for the ask. */
.station-search.is-inviting .station-search-input {
  height: calc(var(--control-height) + 12px);
  background: var(--color-background);
  font-size: 16px;
}

/* Room for the button that gives the station up. */
.station-search.is-showing-a-station .station-search-input {
  padding-right: var(--control-height);
}

/* Takes the field's full height, so a finger has the whole corner to hit. */
.station-search-give-up {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  width: var(--control-height);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.station-search.is-showing-a-station .station-search-give-up {
  display: block;
}

/* Guarded: a tap leaves :hover standing on a touch screen. */
@media (hover: hover) {
  .station-search-give-up:hover {
    color: var(--color-control-text);
  }
}

/* The box everything the ask shows is measured against: the field alone,
   whether it stands in the bar or in the opened card. */
.station-search-field {
  position: relative;
}

.station-search-suggestions {
  position: absolute;
  top: calc(100% + var(--space-s));
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-surface);
  backdrop-filter: blur(6px);
  /* A long list is held to the room actually left under the field and scrolls
     inside it. How much room that is only the script can tell; the fallback
     carries a list that opens before it has been measured. */
  max-height: var(--suggestions-height, 40vh);
  overflow-y: auto;
  display: none;
}

.station-search.is-open .station-search-suggestions {
  display: block;
}

.station-search-suggestion {
  padding: 8px 14px;
  cursor: pointer;
}

.station-search-suggestion.is-active {
  background: var(--color-control);
}

/* Guarded: a tap leaves :hover standing on a touch screen. */
@media (hover: hover) {
  .station-search-suggestion:hover {
    background: var(--color-control);
  }
}