/* The Layouts stop's card (sections/tour.css): one button per layout, with the app's picker glyph. While diving it
   lifts over the lower right of the desktop, which Grid leaves empty. */
.tour-chips .tour-glyph {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  background: currentColor;
  -webkit-mask: var(--glyph) center / 18px 18px no-repeat;
  mask: var(--glyph) center / 18px 18px no-repeat;
}
.tour-glyph[data-layout="master"] { --glyph: url("/assets/redesign/layout-master.svg"); }
.tour-glyph[data-layout="split"] { --glyph: url("/assets/redesign/layout-split.svg"); }
.tour-glyph[data-layout="grid"] { --glyph: url("/assets/redesign/layout-grid.svg"); }
.tour-glyph[data-layout="focus"] { --glyph: url("/assets/redesign/layout-focus.svg"); }
.tour-glyph[data-layout="free"] { --glyph: url("/assets/redesign/layout-freeform.svg"); }
.tour-card[data-stop="layouts"] .tour-chips button {
  gap: 7px;
  padding: 0 14px 0 8px;
}
/* The note changes with the layout; two lines' room keeps the buttons from jumping. */
.tour-card[data-stop="layouts"] .tour-sub {
  min-height: 3em;
}
/* An iPad held upright: the five in one row under the note. */
@media (max-aspect-ratio: 5/6) and (min-height: 700px) and (min-width: 700px) {
  .hero > .tour-card[data-stop="layouts"] .tour-chips button {
    padding: 0 13px 0 7px;
  }
}
/* A phone has room for five glyphs but not five names: the five are a segmented control of the app's picker glyphs,
   and the one shown opens to its name, as the picker in the app's menu does. Every width follows its content, so the
   name opening and the last one closing share the row smoothly. (The caption, sections/tour.css, has room for all five
   names in its row.) */
@media (max-width: 699.98px), (max-height: 519.98px), (max-aspect-ratio: 1/1) and (max-height: 699.98px) {
  .hero > .tour-card[data-stop="layouts"] .tour-chips {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .hero > .tour-card[data-stop="layouts"] .tour-chips button {
    position: relative;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    gap: 0;
    padding: 0 10px;
    font-size: 13px;
    transition: padding var(--t-move) var(--ease-in-out), gap var(--t-move) var(--ease-in-out),
      background-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui);
  }
  /* Its target takes in half the gap on either side. */
  .hero > .tour-card[data-stop="layouts"] .tour-chips button::after {
    content: "";
    position: absolute;
    inset: 0 -4px;
  }
  .hero > .tour-card[data-stop="layouts"] .tour-chips .tour-glyph {
    margin: 0;
  }
  .hero > .tour-card[data-stop="layouts"] .tour-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width var(--t-move) var(--ease-in-out), opacity var(--t-fast) var(--ease-in);
  }
  .hero > .tour-card[data-stop="layouts"] .tour-chips button[aria-pressed="true"] {
    flex-shrink: 0;
    gap: 7px;
    padding: 0 13px 0 10px;
  }
  .hero > .tour-card[data-stop="layouts"] .tour-chips button[aria-pressed="true"] .tour-label {
    max-width: 9em;
    opacity: 1;
    transition: max-width var(--t-move) var(--ease-in-out), opacity var(--t-reveal) var(--ease-out) 180ms;
  }
}
/* A phone held sideways: the side card is narrower than a phone; the row keeps to one line, a little tighter. On the
   narrowest (an iPhone SE) there is no room for a name at all, and the five are glyphs alone. */
@media (max-height: 519.98px) and (min-aspect-ratio: 5/4) {
  .hero > .tour-card[data-stop="layouts"] .tour-chips {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .hero > .tour-card[data-stop="layouts"] .tour-chips button {
    padding: 0 7px;
    font-size: 12px;
  }
  .hero > .tour-card[data-stop="layouts"] .tour-chips button::after {
    top: -5px;
    bottom: -5px;
  }
  .hero > .tour-card[data-stop="layouts"] .tour-chips button[aria-pressed="true"] {
    gap: 6px;
    padding: 0 11px 0 8px;
  }
}
@media (max-height: 519.98px) and (min-aspect-ratio: 5/4) and (max-width: 759.98px) {
  .hero > .tour-card[data-stop="layouts"] .tour-chips button,
  .hero > .tour-card[data-stop="layouts"] .tour-chips button[aria-pressed="true"] {
    flex: 1 1 0;
    gap: 0;
    padding: 0;
  }
  .hero > .tour-card[data-stop="layouts"] .tour-chips button[aria-pressed="true"] .tour-label {
    max-width: 0;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero > .tour-card[data-stop="layouts"] .tour-chips button,
  .hero > .tour-card[data-stop="layouts"] .tour-label {
    transition-duration: 0s;
  }
}