/* The switcher between TableSync's five spaces (RM858, js/link/suite.js). It sits in the lockup strip every space
 * already has - the Player's #topbar banner and the family shell's .tf-banner - so switching costs no new row, only
 * a taller strip: 44px, the phone target. Tokens only; the logos are each space's own launcher icon.
 *
 * The space you are in is marked with a rule and its name; the others are their logos alone, each a 44px link. */

html.tf-suite-on { --topbar-banner-h: 44px; --tf-top-h: 100px; }

.tf-suite {
  display: flex; align-items: stretch; gap: 0;
  height: 100%; margin-left: auto;
}
.tf-suite-go {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-width: 44px; height: 44px; padding: 0 var(--s-2);
  color: var(--aa-ink-muted); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--aa-dur-state) var(--aa-ease), color var(--aa-dur-state) var(--aa-ease);
}
.tf-suite-go:hover { color: var(--aa-ink); border-bottom-color: var(--aa-hairline); }
.tf-suite-go:focus-visible { outline: 2px solid var(--aa-ink); outline-offset: -2px; }
.tf-suite-go.here { color: var(--aa-ink); border-bottom-color: var(--aa-ink); }
.tf-suite-logo { width: 28px; height: 28px; display: block; flex: 0 0 auto; }
.tf-suite-go:not(.here) .tf-suite-logo { opacity: .78; }
.tf-suite-go:not(.here):hover .tf-suite-logo { opacity: 1; }
.tf-suite-name {
  display: none;
  font-family: var(--aa-measure); font-size: var(--t-meta); letter-spacing: .12em; text-transform: uppercase;
}
.tf-suite-go.here .tf-suite-name { display: inline; }
@media (max-width: 399px) {
  .tf-suite-go { padding: 0; }
  .tf-suite-go.here .tf-suite-name { display: none; }
}

/* The Player: the strip is drawn by #topbar::before (the word) and ::after (the surface tag); the switcher takes
   the tag's place on the right. */
html.tf-suite-on #topbar::after { display: none; }
#topbar > .tf-suite {
  position: absolute; right: var(--s-3); top: var(--safe-t, 0px); height: var(--topbar-banner-h); z-index: 1;
}

/* The family shell: the banner is a flex row (word, tag); the switcher replaces the tag. */
html.tf-suite-on .tf-banner { height: 44px; }
html.tf-suite-on .tf-banner .tf-tag { display: none; }

/* The Player's first-run sheet: the other four spaces under the character actions. */
.picker-spaces { margin-top: var(--s-5); border-top: 1px solid var(--aa-hairline); padding-top: var(--s-4); }
.picker-spaces h3 { margin: 0 0 var(--s-2); font-family: var(--aa-read); font-weight: 400; font-size: var(--t-4); color: var(--aa-ink); }

/* The list of spaces in Settings and About: each with its logo. */
.tf-family-logo { width: 40px; height: 40px; flex: 0 0 auto; display: block; }

/* ---------------- switching between spaces ----------------
   A switch is a page load inside the bundle; cross-document View Transitions animate it (Chrome and the Android
   WebView 126+; elsewhere the page simply changes). The strip is one named element on both pages, so it holds still;
   the marker under the current logo is another, so it slides from the old space's logo to the new one's; the rest
   of the page slides a short way in from the side of the logo tapped (html.tf-dir-fwd / tf-dir-back, set in <head>
   by the entry page from js/link/suite.js markSwitch). History steps carry no direction and cross-fade. */
@view-transition { navigation: auto; }
.tf-suite { view-transition-name: tf-suite; }
.tf-suite-go.here { view-transition-name: tf-suite-here; }

::view-transition-group(tf-suite-here) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(tf-suite-here), ::view-transition-new(tf-suite-here) { animation-duration: 280ms; }
::view-transition-group(root) { animation-duration: 240ms; }
html.tf-dir-fwd::view-transition-old(root) { animation: 200ms cubic-bezier(0.4, 0, 1, 1) both tf-out-left; }
html.tf-dir-fwd::view-transition-new(root) { animation: 260ms cubic-bezier(0.22, 1, 0.36, 1) both tf-in-right; }
html.tf-dir-back::view-transition-old(root) { animation: 200ms cubic-bezier(0.4, 0, 1, 1) both tf-out-right; }
html.tf-dir-back::view-transition-new(root) { animation: 260ms cubic-bezier(0.22, 1, 0.36, 1) both tf-in-left; }
@keyframes tf-in-right { from { transform: translateX(28px); opacity: 0; } }
@keyframes tf-in-left { from { transform: translateX(-28px); opacity: 0; } }
@keyframes tf-out-left { to { transform: translateX(-28px); opacity: 0; } }
@keyframes tf-out-right { to { transform: translateX(28px); opacity: 0; } }

/* the first frame of a switch (js/apps/shared/hold.js): the strip, where the space's own will be, over a plain ground */
.tf-skel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  height: calc(44px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--s-4) 0;
  display: flex; align-items: center;
  background: var(--aa-sheet); border-bottom: 1px solid var(--aa-hairline);
}
.tf-skel-player { padding-left: var(--s-3); padding-right: var(--s-3); }
.tf-skel-word { font-family: var(--aa-read); font-weight: 600; font-size: var(--t-ui); color: var(--aa-ink); letter-spacing: .01em; }
#tfBoot.tf-boot-nav { background: var(--aa-ground) !important; }
#tfBoot.tf-boot-nav #tfBootIn { display: none; }

/* the press itself: the logo gives under the finger before the page goes */
.tf-suite-logo { transition: transform var(--aa-dur-state) var(--aa-ease), opacity var(--aa-dur-state) var(--aa-ease); }
.tf-suite-go:not(.here):active .tf-suite-logo { transform: scale(.88); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tf-suite-go, .tf-suite-logo { transition: none; }
  .tf-suite-go:not(.here):active .tf-suite-logo { transform: none; }
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}