/* View controls (north / reset, zoom), the first-visit hint and the tour's
   button. See js/ui.js. */

.controls {
  position: absolute;
  z-index: 4;
  right: calc(var(--edge) + env(safe-area-inset-right, 0px));
  bottom: var(--foot-row);
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgb(253 251 246 / 0.86);
  box-shadow: inset 0 0 0 1px var(--ink-45), 0 14px 30px -22px rgb(20 18 14 / 0.4);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

[data-state="error"] .controls,
[data-mode="edit"] .controls {
  display: none;
}

/* A two-finger gesture that lands on the chrome must not zoom the page. */
.controls,
.switch {
  touch-action: none;
}

.control {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-70);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-estate);
  -webkit-tap-highlight-color: transparent;
}

/* The hover tint is its own layer, so only opacity and transform ever animate. */
.control::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(20 18 14 / 0.08);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity var(--dur-2) var(--ease-estate), transform var(--dur-3) var(--ease-estate);
}

.control svg {
  position: relative;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The needle turns with the view: its filled half points to the map's north. */
.control--north svg {
  transform: rotate(var(--heading, 0deg));
}

.control__north {
  fill: currentColor;
}

@media (hover: hover) {
  .control:hover:not([aria-disabled="true"]) {
    color: var(--ink);
  }

  .control:hover:not([aria-disabled="true"])::before {
    opacity: 1;
    transform: none;
  }
}

.control:active:not([aria-disabled="true"]) {
  transform: scale(0.94);
}

.control:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The pause button exists only where the model sways by itself: not under
   reduced motion, and not on a portrait screen, where it holds still. */
.control--motion {
  display: none;
}

@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 4 / 5) {
  .control--motion {
    display: grid;
  }
}

.control--motion .control__play,
.control--motion[aria-pressed="true"] .control__pause {
  display: none;
}

.control--motion[aria-pressed="true"] .control__play {
  display: block;
}

.control__play {
  fill: currentColor;
  stroke-width: 1;
}

/* Nothing to reset: said by the cursor and the attribute, not by colour alone. */
.control[aria-disabled="true"] {
  color: var(--ink-30);
  cursor: default;
}

/* ---- Hint -------------------------------------------------------------- */

.hint {
  position: absolute;
  z-index: 4;
  bottom: calc(var(--index-room, var(--foot-row)) + 14px); /* above the index of places, however tall it is */
  left: calc(var(--edge) + env(safe-area-inset-left, 0px));
  max-width: 40vw;
  margin: 0;
  color: var(--ink-60);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition: opacity var(--dur-5) var(--ease-rise), transform var(--dur-5) var(--ease-rise);
}

.hint.is-on {
  opacity: 1;
  transform: none;
}

/* ---- Small screens and coarse pointers --------------------------------- */

@media (pointer: coarse) {
  .control {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  /* The list of places takes the foot of a narrow screen, however tall it is,
     so the controls move up beside the tags, under the names switch. */
  .controls {
    top: calc(var(--edge) + 44px + env(safe-area-inset-top, 0px));
    bottom: auto;
  }

  .hint {
    top: calc(var(--edge) + 102px + env(safe-area-inset-top, 0px));
    bottom: auto;
    max-width: calc(100vw - 2 * var(--edge));
  }

  /* With all names on, the note has that row, and the hint is not needed:
     whoever turned the internal names on has already used the map. */
  [data-names="all"] .hint {
    display: none;
  }
}

/* A phone on its side keeps the view controls in the foot row, however narrow
   it is: where the list of places has no room at the foot, it stands at the
   left instead (places.css). */
@media (max-height: 500px) and (orientation: landscape) {
  .controls {
    top: auto;
    bottom: var(--foot-row);
  }

  .hint {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .controls {
    background: var(--bone);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---- Tour ----------------------------------------------------------------
   The left-hand twin of the view controls: the same pill, the same height,
   the same bottom line, and inside the room --foot-side keeps free of the
   index. ui.js marks it .is-running, writes the count ("2/7"), and sets
   --tour-done (the share of the tour done once this place is) and --tour-ms
   (how long this place takes): the line under the label grows to the one over
   the other. */

.tour {
  position: absolute;
  z-index: 4;
  bottom: var(--foot-row);
  left: calc(var(--edge) + env(safe-area-inset-left, 0px));
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: rgb(253 251 246 / 0.86);
  box-shadow: inset 0 0 0 1px var(--ink-45), 0 14px 30px -22px rgb(20 18 14 / 0.4);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  touch-action: none; /* as on the controls: a pinch that lands here must not zoom the page */
  /* ui.js measures the pill the moment --index-room moves it, so it may not
     ease there: until the arrival gives it its own transition (chrome.css), the
     reduced-motion reset in base.css would give every property 0.01ms, and the
     pill would be measured where it was. */
  transition: none;
}

/* Nothing to visit with the names off. */
.tour[hidden],
[data-names="off"] .tour,
[data-state="error"] .tour,
[data-mode="edit"] .tour {
  display: none;
}

.tour__button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0;
  padding: 0 14px 0 8px; /* the icon centred in the pill's rounded end */
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-70);
  /* Chrome's own sheet gives a button its own type: the names switch's, set in full. */
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-feature-settings: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-estate);
  -webkit-tap-highlight-color: transparent;
}

/* The hover tint is its own layer, as on the controls, and comes in from the
   same 3px all round. */
.tour__button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(20 18 14 / 0.08);
  opacity: 0;
  transform: scale(0.96, 0.82);
  transition: opacity var(--dur-2) var(--ease-estate), transform var(--dur-3) var(--ease-estate);
}

.tour__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tour__play,
.tour__stop {
  fill: currentColor;
  stroke-width: 1;
}

.tour__stop,
.tour.is-running .tour__play {
  display: none;
}

.tour.is-running .tour__stop {
  display: inline;
}

.tour__label {
  position: relative;
}

/* How far the tour has got: a hairline under the label, grown from the left,
   clear of the descenders. */
.tour__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1.5px;
  left: 0;
  height: 1.5px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(var(--tour-done, 0));
  transform-origin: left center;
  transition: transform var(--tour-ms, 0ms) linear, opacity var(--dur-2) var(--ease-estate);
}

.tour.is-running .tour__label::after {
  opacity: 1;
}

.tour__count {
  position: relative;
  color: var(--ink-60);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.tour__count:empty {
  display: none;
}

@media (hover: hover) {
  .tour__button:hover {
    color: var(--ink);
  }

  .tour__button:hover::before {
    opacity: 1;
    transform: none;
  }
}

.tour__button:active {
  transform: scale(0.97);
}

.tour__button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (pointer: coarse) {
  .tour__button {
    height: 44px;
    padding: 0 16px 0 12px;
  }
}

/* A narrow screen: just above the list of places, at its left. */
@media (max-width: 640px) {
  .tour {
    bottom: calc(var(--index-room, var(--foot-row)) + 10px);
  }
}

/* A narrow screen on its side: at the head of the column the list makes at
   the left (places.css, base.css). */
@media (max-width: 640px) and (max-height: 500px) and (orientation: landscape) {
  .tour {
    top: var(--column-top);
    bottom: auto;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .tour {
    background: var(--bone);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}