/* The pairing tour in "Multiple devices. One session.": the phone scans the
   desktop's code, lands on home, opens a session and scrolls back through its
   history. tour.js plays it; with no script the scan screen simply stands.

   Home is drawn the way the graphite app draws it: a bar of controls (the
   plan as a chip of fill with its light, the account, the menu), the
   desktop's name as the large title, its state as two readings, the
   projects as one inset grouped list, and the floating glass dock whose
   destination sits in a lit pill.
   Sizes are the app's at about 0.55 of its 412px screen. The scan screen is
   app-ui.css; the session and the fingertip are tour-term.css. */

/* ---------------------------------------------------------------- frame --- */

/* tour.js sets the zoom from the room it has; zoom rather than a transform,
   so the layout makes room for it. */
.tour {
  zoom: var(--tour-zoom, 1);
}

/* The three screens sit on top of each other. `hidden` is drawn as opacity 0
   so a change of screen can cross-fade (base.css hides [hidden] with
   !important, so the display is forced back). */
.tour-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--base);
  transition: opacity 420ms var(--ease-out-soft), translate 300ms cubic-bezier(0.22, 0.78, 0.2, 1);
}

.tour-screen.scan,
.tour-screen.scan[hidden] {
  display: grid !important;
}

/* The scanner is a camera feed, dark in either theme: two classes outrank the
   theme's surface above, so it keeps the backdrop app-ui.css gives .scan. */
.tour-screen.scan {
  background: var(--scan-backdrop);
}

.tour-screen[hidden] {
  display: flex !important;
  opacity: 0;
  pointer-events: none;
}

/* A session arrives from the right, as every forward screen in the app does;
   leaving at the end of a pass it fades in place. */
.tour-term-screen {
  z-index: 2;
  box-shadow: -18px 0 30px -12px rgba(0, 0, 0, 0.5);
}

.tour-term-screen[hidden]:not(.is-fading) {
  opacity: 1;
  translate: 101% 0;
}

/* The view is held square and centred, so the reticle hugs the code. */
.tour .scan-view {
  align-self: center;
  aspect-ratio: 1;
}

.tour .scan-corner.tl,
.tour .scan-corner.tr {
  top: 14%;
}

.tour .scan-corner.bl,
.tour .scan-corner.br {
  bottom: 14%;
}

.tour .scan-corner.tl,
.tour .scan-corner.bl {
  left: 14%;
}

.tour .scan-corner.tr,
.tour .scan-corner.br {
  right: 14%;
}

.tour .scan-line {
  inset: 19% 21%;
}

/* Found: the reticle turns green for a beat. */
.scan[data-found] .scan-corner {
  border-color: var(--green);
}

/* ----------------------------------------------------------------- home --- */

.tour-home-head {
  position: relative;
  padding: calc(var(--status-h) + 32px) 12px 12px
}

.tour-host {
  display: flex;
  align-items: center;
  margin: 3px 0 4px;
  color: var(--label);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tour-host.is-typing .tc {
  opacity: 0;
}

.tour-host.is-typing .tc.is-on {
  opacity: 1;
}

.tour-host .caret {
  width: 2px;
  margin-left: 1px;
}

.tour-online {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--label-2);
  font-size: 7.5px;
  font-variant-numeric: tabular-nums
}

.tour-online i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 3px var(--green-glow)
}

.tour-online b {
  margin-right: 2px;
  color: var(--label);
  font-weight: 510;
}

/* The bar along the top: the plan's chip at the leading edge, the account
   and the menu at the trailing one. */
.tour-home-actions {
  position: absolute;
  top: calc(var(--status-h) + 6px);
  right: 6px;
  left: 8px;
  display: flex;
  gap: 2px;
  align-items: center
}

.tour-plan {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  margin-right: auto;
  padding: 0 7px 0 6px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--label-2);
  font-size: 6.5px;
  font-weight: 510
}

.tour-plan i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 3px var(--green-glow)
}

.tour-round {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--label-2)
}

.tour-round svg {
  width: 10px;
  height: 10px;
}

.tour-section {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 5px;
  color: var(--label-2);
  font-size: 7px;
  font-weight: 600;
}

.tour-new {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--tint);
  font-weight: 600;
}

.tour-new svg {
  width: 7px;
  height: 7px;
}

/* The projects as one inset grouped list. */
.tour-group {
  margin: 0 8px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--highlight);
  overflow: hidden;
}

.tour-card {
  position: relative;
  isolation: isolate;
  transition: background-color 260ms var(--ease-out-soft);
}

.tour-card + .tour-card {
  box-shadow: inset 0 0.5px 0 var(--hairline);
}

.tour-card.is-pressed {
  background: var(--fill-2);
  transition-duration: 0s;
}

.tour-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8px;
  gap: 5px;
  align-items: start;
  padding: 8px 10px 7px;
}

.tour-card-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tour-card-copy b {
  color: var(--label);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.2;
}

.tour-card-copy small,
.tour-session,
.tour-more,
.tour-hint {
  overflow: hidden;
  color: var(--label-2);
  font-size: 6.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-persist {
  padding-top: 1px;
  color: var(--label-3);
}

.tour-persist svg {
  width: 8px;
  height: 8px;
}

/* The project's sessions, as small pills led by a state dot. */
.tour-sessions {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: -2px;
  padding: 0 10px 8px;
}

.tour-session {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 14px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--fill-2);
  color: var(--label);
  transition: opacity 260ms var(--ease-out-soft);
}

.tour-session.is-pressed {
  opacity: 0.5;
  transition-duration: 0s;
}

.tour-dot {
  width: 4px;
  height: 4px;
  flex: none;
  border-radius: 50%;
}

.tour-dot.is-running {
  background: var(--green);
  animation: breathe 2.4s var(--ease-in-out) infinite;
}

.tour-dot.is-idle {
  border: 1px solid var(--label-2);
}

.tour-hint {
  margin: 8px 12px 0;
  text-align: center;
}

/* The floating dock: frosted, with one pill under the page in view. */
.tour-dock {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 38px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--material-thick);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  box-shadow: var(--highlight), 0 0 0 0.5px var(--hairline), 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}

.tour-dock span {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: var(--r-pill);
  color: var(--label-2);
  font-size: 5.5px;
  font-weight: 510;
}

.tour-dock svg {
  width: 11px;
  height: 11px;
}

.tour-dock .is-on svg {
  color: var(--tint);
}

.tour-dock .is-on {
  background: var(--fill);
  box-shadow: var(--highlight);
  color: var(--label)
}

/* --------------------------------------------------------------- motion --- */

/* Home's arrival, replayed each pass from an is-entering class tour.js adds
   and takes off again: the head fades, the list rises after it. */
.tour-home.is-entering > :not(.tour-dock) {
  animation: app-row-rise 640ms var(--ease-out-soft) backwards;
}

.tour-home.is-entering > :nth-child(1) {
  animation-name: app-row-fade;
  animation-delay: 60ms;
}

.tour-home.is-entering > :nth-child(2) { animation-delay: 140ms; }
.tour-home.is-entering > :nth-child(3) { animation-delay: 190ms; }
.tour-home.is-entering > :nth-child(n + 4) { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .tour-home.is-entering > * {
    animation: none;
    opacity: 1;
    translate: none;
  }
}