/* Fluid UI: styles for this topic's components only. */
/* Fluid UI: a question asked in iMessage and a widget crafted on the page, with
   drafting guides like quest crafting mode in the app. The page places the
   scene's middle at 380, high in the stage; it is moved down so the section
   sits in the middle of the space between the top bar and the
   sentence. */
.fluid-scene {
  --fluid-ink: 20, 18, 17;
  position: relative;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
  font-weight: 500;
  color: rgb(var(--fluid-ink));
  user-select: none;
}
.fluid-ask {
  align-self: flex-end;
  cursor: pointer;
  max-width: 72%;
  padding: 15px 22px;
  border-radius: 30px 30px 8px 30px;
  background: #0A84FF;
  box-shadow: 0 2px 6px rgba(10, 132, 255, .14), 0 14px 32px rgba(10, 132, 255, .2);
  color: #FFFFFF;
  font-size: 26px;
  line-height: 32px;
  transform-origin: right bottom;
}
.fluid-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  border-radius: 1px;
  background: #FFFFFF;
  opacity: 0;
}
/* One dot per sample, iOS page control style. Each button's padding is its tap area. */
.fluid-pages {
  display: flex;
  justify-content: center;
  margin: 2px 0 -8px;
}
.fluid-pages button {
  padding: 6px 3px;
  border: 0;
  background: none;
  cursor: pointer;
}
.fluid-pages button::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: .4;
  transition: opacity .3s;
}
.fluid-pages button[aria-current]::before { opacity: 1; }
.fluid-typing {
  display: flex;
  gap: 4px;
  height: 7px;
  padding-left: 4px;
}
.fluid-typing i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(var(--fluid-ink), .4);
}
.fluid-draft {
  position: relative;
  margin-top: 14px;
}

/* Guides reach past the frame and fade to nothing at both ends. */
.fluid-guide {
  position: absolute;
  pointer-events: none;
}
.fluid-guide.across {
  left: -56px;
  right: -56px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--fluid-ink), .3) 56px, rgba(var(--fluid-ink), .3) calc(100% - 56px), transparent);
  transform: scaleX(var(--ruled, 0));
}
.fluid-guide.down {
  top: -48px;
  bottom: -48px;
  width: 1px;
  background: linear-gradient(transparent, rgba(var(--fluid-ink), .3) 48px, rgba(var(--fluid-ink), .3) calc(100% - 48px), transparent);
  transform: scaleY(var(--ruled, 0));
}
.fluid-guide[data-at="top"] { top: 0; transform-origin: left; }
.fluid-guide[data-at="bottom"] { bottom: 0; transform-origin: right; }
.fluid-guide[data-at="left"] { left: 0; transform-origin: bottom; }
.fluid-guide[data-at="right"] { right: 0; transform-origin: top; }

/* A short soft light running along the frame's top and bottom lines. */
.fluid-light {
  position: absolute;
  left: calc(var(--run, 0) * 100% - 36px);
  width: 72px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--fluid-ink), .8), transparent);
  pointer-events: none;
}
.fluid-light[data-at="top"] { top: 0; }
.fluid-light[data-at="bottom"] { bottom: 0; }

/* Each piece's own outline while it is crafted: drawn round it with a faint
   fill and plus marks on its corners, then faded once the piece is made. */
.fluid-sketches {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fluid-sketch {
  position: absolute;
  opacity: 0;
}
.fluid-sketch svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fluid-sketch rect {
  fill: rgba(var(--fluid-ink), .04);
  stroke: rgba(var(--fluid-ink), .45);
  stroke-width: 1px;
  stroke-dasharray: 1 1;
}

.fluid-mark {
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
}
.fluid-mark::before,
.fluid-mark::after {
  content: "";
  position: absolute;
  background: rgba(var(--fluid-ink), .6);
}
.fluid-mark::before { left: 5px; top: 0; width: 1px; height: 11px; }
.fluid-mark::after { top: 5px; left: 0; height: 1px; width: 11px; }

/* The quiz card, after the kit's flashcard part: a quest cover blurred and washed
   with the quiz's colour (set per quiz from the kit ramps), white words, glass guesses with rings, and a
   flat back in the quest's 800. */
.fluid-quiz {
  display: flex;
  gap: 24px;
  align-items: center;
  font-family: "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
}
.fluid-card {
  width: 300px;
  height: 268px;
  perspective: 1000px;
  cursor: pointer;
}
.fluid-faces {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.fluid-front,
.fluid-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 26px;
  backface-visibility: hidden;
  overflow: hidden;
  color: #FFFFFF;
  box-shadow:
    0 2px 6px rgba(20, 18, 17, .06),
    0 14px 32px rgba(20, 18, 17, .1),
    inset 0 0 23px rgba(255, 255, 255, .6),
    inset -1px -3px 1.6px rgba(135, 135, 135, .14);
}
.fluid-front {
  background:
    linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)),
    linear-gradient(color-mix(in srgb, var(--q-500) 45%, transparent), color-mix(in srgb, var(--q-500) 45%, transparent)),
    var(--cover) center / cover;
}
.fluid-back {
  background: var(--q-800);
  transform: rotateY(180deg);
}
/* a soft light that follows the mouse across the leaning card */
.fluid-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%);
  opacity: var(--glare, 0);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.fluid-prompt,
.fluid-verdict {
  position: absolute;
  top: 20px;
  font-size: 16px;
  font-weight: 500;
  opacity: .85;
}
.fluid-word,
.fluid-answer {
  font-family: "Season", serif;
  font-variation-settings: "SERF" 50;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.08;
  padding: 0 22px;
  text-align: center;
  text-wrap: balance;
}
.fluid-stage { display: flex; justify-content: center; }
.fluid-guesses {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 250px;
}
.fluid-guess {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 10px 20px;
  border: 1px solid #DBDBDB;
  border-radius: 18px;
  background: rgba(255, 255, 255, .4);
  box-shadow: 0 2px 6px rgba(20, 18, 17, .05), 0 12px 28px rgba(20, 18, 17, .08);
  color: rgb(var(--fluid-ink));
  font: 600 20px/24px "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
  text-align: left;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
  touch-action: manipulation;
}
.fluid-guess:active { scale: .98; }
.fluid-guess .ring {
  position: relative;
  width: 26px;
  height: 26px;
  border: 1.5px solid #B9B5B0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  transition: background-color .3s, border-color .3s;
}
.fluid-guess[data-state="right"] { background: #FFFFFF; }
.fluid-guess[data-state="right"] .ring { background: var(--q-500); border-color: var(--q-500); }
.fluid-guess[data-state="right"] .ring::after {
  content: "";
  position: absolute;
  left: 8.5px;
  top: 4px;
  width: 6px;
  height: 12px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fluid-guess[data-state="wrong"] { background: #FFFFFF; color: rgba(var(--fluid-ink), .45); }
.fluid-guess[data-state="wrong"] span { text-decoration: line-through; }
.fluid-guess[data-state="quiet"] { color: rgba(var(--fluid-ink), .4); }

/* The shopping wall, after the kit's explore part: photo tiles in wrapping
   columns behind a rounded window, price pills, and a sheet for the opened coat. */
.fluid-wall {
  position: relative;
  width: 680px;
  height: 430px;
  overflow: hidden;
  border-radius: 28px;
  background: #EEEAE5;
  box-shadow: 0 0 0 1px rgba(var(--fluid-ink), .06), 0 18px 36px rgba(var(--fluid-ink), .12);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.fluid-wall:active { cursor: grabbing; }
.fluid-tile {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #DDD8D2;
  cursor: inherit;
}
.fluid-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.fluid-tile span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 4px 9px;
  border-radius: 12px;
  background: #FFFFFF;
  color: rgb(var(--fluid-ink));
  font: 600 14px/18px "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
}
.fluid-bought {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  padding: 5px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  font: 500 15px/20px "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
  color: rgba(var(--fluid-ink), .6);
  opacity: 0;
  transition: opacity .3s;
}
.fluid-bought.on { opacity: 1; }
.fluid-bought b { color: rgb(var(--fluid-ink)); font-weight: 600; }
.fluid-sheet {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: 380px;
  margin-left: -190px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(var(--fluid-ink), .14);
  font-family: "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
  transform: translateY(calc(100% + 12px));
  transition: transform .5s var(--spring, ease-out);
  cursor: default;
}
.fluid-sheet.open { transform: none; }
/* the tapped jacket, big above the sheet; it moves on a spring from its tile */
.fluid-zoom {
  position: absolute;
  z-index: 2;
  display: none;
  object-fit: cover;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(20, 18, 17, .06), 0 18px 40px rgba(20, 18, 17, .18);
  pointer-events: none;
}
.fluid-sheet .words {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 15px;
  line-height: 20px;
  color: rgba(var(--fluid-ink), .5);
}
.fluid-sheet .name {
  overflow: hidden;
  color: rgb(var(--fluid-ink));
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fluid-sheet .price { color: rgb(var(--fluid-ink)); font-weight: 500; }
/* The design system's grey 3D button (CarvedChip on iOS): a grey face with a
   carved inset stack, a white rim and a soft drop pair. */
.fluid-sheet .buy {
  width: 140px;
  padding: 13px 0;
  border: 0;
  border-radius: 999px;
  background: #E4E1E6;
  box-shadow:
    inset 0 0 0 1px #FFFFFF,
    inset -1px -4px 3.6px rgba(61, 61, 61, .25),
    inset 1px 2px 1.2px rgba(255, 255, 255, .81),
    inset 0 -2px 4.5px rgba(255, 255, 255, .78),
    inset -3px 0 3px rgba(255, 255, 255, .47),
    inset -1px -4px 3.2px rgba(135, 135, 135, .25),
    inset 0 0 20px #FFFFFF,
    -1px 2px 6.6px rgba(0, 0, 0, .25),
    0 7px 25.6px rgba(0, 0, 0, .25);
  color: #141211;
  font: 600 15px/20px "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 50;
  white-space: nowrap;
  cursor: pointer;
  transition: scale .2s;
}
.fluid-sheet .buy:active { scale: .965; }
/* While Q. works, a soft light runs across the words. */
.fluid-sheet .buy[data-state="working"] { cursor: default; }
.fluid-sheet .buy[data-state="working"] span {
  background: linear-gradient(90deg, #141211 35%, #A8A3A0 50%, #141211 65%) 0 0 / 300% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: fluid-working 1.1s linear infinite;
}
@keyframes fluid-working {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
.fluid-sheet .buy[data-state="bought"] { cursor: default; }
.fluid-sheet .buy[data-state="bought"] span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 10px;
  margin: 0 8px 2px 0;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* The Tokyo trip fund, after the kit's chart part: three small widgets on the
   clear panel, in the ember ramp, with numbers in Sans. */
/* Q.'s advice under the Tokyo widgets, on the left like a message it sent:
   first a small bubble with thinking dots, then the bubble opens into the
   words. Its room is kept from the start, so nothing moves when it comes in.
   The shadow sits on the wrapper so the opening clip does not cut it. */
.fluid-reply {
  flex-basis: 100%;
  margin-top: 4px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(20, 18, 17, .06)) drop-shadow(0 10px 24px rgba(20, 18, 17, .1));
}
.fluid-reply-body {
  position: relative;
  width: max-content;
  max-width: 470px;
  padding: 15px 22px;
  border-radius: 30px 30px 30px 8px;
  transform-origin: left bottom;
  background: #FFFFFF;
  color: rgb(var(--fluid-ink));
  font-size: 24px;
  line-height: 30px;
  clip-path: inset(0 calc(100% - 80px) calc(100% - 52px) 0 round 26px);
  transition: clip-path .6s var(--spring);
}
.fluid-reply.said .fluid-reply-body { clip-path: inset(0 round 30px 30px 30px 8px); }
.fluid-reply p { margin: 0; }
.fluid-reply .word { display: inline-block; opacity: 0; }
.fluid-reply-dots {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: opacity .2s ease;
}
.fluid-reply.said .fluid-reply-dots { opacity: 0; }
.fluid-reply-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(var(--fluid-ink), .4);
}
.fluid-trip {
  position: relative;
  --q-300: #FEC162;
  --q-400: #FFA600;
  --q-600: #E36901;
  --q-900: #6E2C00;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
}

.fluid-widget {
  display: flex;
  flex-direction: column;
  width: 216px;
  height: 288px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #DBDBDB;
  border-radius: 26px;
  background: rgba(255, 255, 255, .4);
  box-shadow: 0 2px 6px rgba(20, 18, 17, .05), 0 12px 28px rgba(20, 18, 17, .08);
  position: relative;
  cursor: grab;
  touch-action: none;
}
.fluid-widget:active { cursor: grabbing; }
.fluid-widget .label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(var(--fluid-ink), .55);
}
.fluid-widget .figure {
  margin-top: 8px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fluid-widget .caption {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: rgba(var(--fluid-ink), .55);
  font-variant-numeric: tabular-nums;
}

.fluid-ring {
  position: relative;
  align-self: center;
  margin-top: auto;
}
.fluid-ring svg { display: block; }
.fluid-ring .track,
.fluid-ring .saved,
.fluid-ring .could {
  fill: none;
  stroke-width: 14px;
  stroke-linecap: round;
}
.fluid-ring .track { stroke: rgba(var(--fluid-ink), .08); }
.fluid-ring .saved { stroke: url(#fluid-trip-ring); }
.fluid-ring .could { stroke: var(--q-300); }
.fluid-ring .middle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fluid-ring .middle .figure { margin: 0; font-size: 28px; line-height: 32px; }
.fluid-widget .fund-note { margin-top: 10px; text-align: center; }

.fluid-pace {
  display: block;
  margin-top: auto;
  overflow: visible;
}
.fluid-pace .usual {
  fill: none;
  stroke: #95918D;
  stroke-width: 2px;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}
.fluid-pace .saved {
  fill: none;
  stroke: url(#fluid-trip-line);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fluid-pace .ahead { fill: var(--q-300); opacity: .45; }
.fluid-pace .behind { fill: #95918D; opacity: .3; }
.fluid-pace .today { fill: #FFFFFF; stroke: var(--q-900); stroke-width: 3px; }
.fluid-pace .scrub { opacity: 0; pointer-events: none; }
.pace-word,
.fluid-widget .pace-caption { display: inline-block; }
.fluid-pace .scrub-line { stroke: rgba(var(--fluid-ink), .25); stroke-width: 1px; }
.fluid-pace .scrub-dot { fill: var(--q-600); stroke: #FFFFFF; stroke-width: 3px; }

.fluid-kinds {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.fluid-kind {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(var(--fluid-ink), .6);
  font: 600 14px/18px "Season", system-ui, sans-serif;
  font-variation-settings: "SERF" 0;
  text-align: left;
  cursor: pointer;
  transition: color .3s;
}
.fluid-kind .row { display: flex; justify-content: space-between; }
.fluid-kind b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fluid-kind .bar {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(var(--fluid-ink), .08);
}
/* each bar carries the ring's whole gradient, light to dark */
.fluid-kind .bar i {
  display: block;
  width: calc(var(--part) * 100%);
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--q-400), var(--q-600) 55%, var(--q-900));
  transform-origin: left;
  transition: opacity .3s;
}
.fluid-kind.chosen { color: rgb(var(--fluid-ink)); }
/* once one is chosen, the others step back */
.fluid-kinds:has(.chosen) .fluid-kind:not(.chosen) .bar i { opacity: .35; }
.fluid-widget .kind-note { margin-top: auto; }

.fluid-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: rgba(var(--fluid-ink), .45);
}

/* emoji thrown from a tap, on a layer over the whole page, above the fog */
.fluid-emoji {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}
.fluid-emoji span {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 6px 8px rgba(20, 18, 17, .22)) drop-shadow(0 1px 2px rgba(20, 18, 17, .18));
  will-change: transform, opacity;
}

/* Cards about the step's quest drifting up the page behind it. The layer is
   the whole 1440 by 1024 page; the script lines it up with the stage. */
.fluid-flyers {
  position: absolute;
  width: 1440px;
  height: 1024px;
  z-index: -1;
  pointer-events: none;
}
.fluid-flyer {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 196px;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid #DBDBDB;
  border-radius: 22px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 2px 6px rgba(20, 18, 17, .04), 0 12px 28px rgba(20, 18, 17, .07);
  transform-origin: 0 0;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.fluid-flyer .label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(var(--fluid-ink), .55);
}
.fluid-flyer .caption {
  margin-top: 2px;
  font-size: 14px;
  line-height: 19px;
  font-weight: 500;
  color: rgba(var(--fluid-ink), .55);
}
.fluid-flyer .title { margin-top: 4px; font-size: 18px; line-height: 23px; font-weight: 600; }
.fluid-flyer .count { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fluid-flyer .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fluid-flyer .row > div { display: flex; flex-direction: column; }
.fluid-flyer .switch { flex: none; position: relative; width: 40px; height: 24px; border-radius: 12px; background: #34C759; }
.fluid-flyer .switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20, 18, 17, .2); }
/* boarding pass */
.fluid-flyer .pass { display: flex; align-items: center; justify-content: space-between; }
.fluid-flyer .pass b { display: block; font-size: 28px; line-height: 32px; font-weight: 600; }
.fluid-flyer .pass small { font-size: 12px; color: rgba(var(--fluid-ink), .55); }
.fluid-flyer .pass .plane { color: #FF8100; font-size: 18px; }
.fluid-flyer .pass-row { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(var(--fluid-ink), .18); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* forecast and size chart: small columns of label over figure */
.fluid-flyer .days, .fluid-flyer .sizes { display: flex; justify-content: space-between; margin-top: 10px; }
.fluid-flyer .days span, .fluid-flyer .sizes span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fluid-flyer .days small, .fluid-flyer .sizes small { font-size: 12px; color: rgba(var(--fluid-ink), .55); }
.fluid-flyer .days b, .fluid-flyer .sizes b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* a little street map with a pin */
.fluid-flyer .map {
  position: relative;
  height: 84px;
  margin-bottom: 10px;
  border-radius: 12px;
  background:
    linear-gradient(28deg, transparent 46%, #FFFFFF 46%, #FFFFFF 54%, transparent 54%),
    linear-gradient(-62deg, transparent 47%, #FFFFFF 47%, #FFFFFF 52%, transparent 52%),
    linear-gradient(90deg, transparent 70%, #CFE3C4 70%),
    #E9E5DC;
}
.fluid-flyer .pin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #FF8100; box-shadow: 0 0 0 4px rgba(255, 129, 0, .25), 0 0 0 3px #FFFFFF inset; }
/* a calendar event with its date tile */
.fluid-flyer .event { display: flex; align-items: center; gap: 12px; }
.fluid-flyer .event .title { margin-top: 0; }
.fluid-flyer .date { flex: none; display: flex; flex-direction: column; align-items: center; width: 46px; padding: 5px 0; border-radius: 12px; background: #FDD997; }
.fluid-flyer .date small { font-size: 11px; font-weight: 600; text-transform: uppercase; opacity: .7; }
.fluid-flyer .date b { font-size: 20px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* checklists keep their ticks; other lists are plain rows */
.fluid-flyer ul { margin: 8px 0 0; padding: 0; list-style: none; }
.fluid-flyer li { padding: 5px 0; font-size: 15px; font-weight: 500; border-top: 1px solid rgba(var(--fluid-ink), .08); }
.fluid-flyer li:first-child { border-top: 0; }
.fluid-flyer .ticks li { position: relative; padding-left: 26px; }
.fluid-flyer .ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(var(--fluid-ink), .25); }
.fluid-flyer .ticks li.done::before { border-color: #FF8100; background: #FF8100; }
.fluid-flyer .ticks li.done { color: rgba(var(--fluid-ink), .5); }
/* delivery steps on a line */
.fluid-flyer .track { position: relative; display: flex; margin-top: 12px; }
.fluid-flyer .track span { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fluid-flyer .track i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #E3DFD8; }
.fluid-flyer .track .done i { background: rgb(var(--fluid-ink)); }
.fluid-flyer .track small { font-size: 10px; font-weight: 600; color: rgba(var(--fluid-ink), .55); white-space: nowrap; }
.fluid-flyer .swatches { display: flex; gap: 6px; margin-top: 10px; }
.fluid-flyer .swatches i { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--fluid-ink), .1); }
.fluid-flyer .stars { margin-top: 2px; color: #FF8100; font-size: 15px; letter-spacing: 2px; }
.fluid-flyer .meter { height: 8px; margin-top: 12px; border-radius: 4px; background: rgba(var(--fluid-ink), .08); overflow: hidden; }
.fluid-flyer .meter i { display: block; height: 100%; border-radius: 4px; }
.fluid-flyer .wave { display: flex; align-items: center; gap: 4px; height: 30px; margin-top: 10px; }
.fluid-flyer .wave i { flex: 1; border-radius: 2px; }
.fluid-flyer .event > div { display: flex; flex-direction: column; }

/* The quest the main section belongs to, crafted in above it as its first piece. */
.fluid-quest {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.fluid-quest i { width: 10px; height: 10px; border-radius: 50%; }

/* The looping scenes on some flying cards. A finger's touch: */
.fluid-flyer .tap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--fluid-ink), .16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
  opacity: 0;
  pointer-events: none;
}
/* a line that rolls up to the next, inside its own mask */
.fluid-flyer .roll { display: block; height: 1.35em; overflow: hidden; }
.fluid-flyer .roll > span { display: block; height: 1.35em; white-space: nowrap; }
.fluid-flyer .title .roll { height: 23px; }
.fluid-flyer .title .roll > span { height: 23px; }
/* packing: rows that move up a slot each round */
.fluid-flyer .moving { position: relative; height: 90px; overflow: hidden; }
.fluid-flyer .moving li { position: absolute; left: 0; right: 0; top: 0; height: 30px; box-sizing: border-box; padding-top: 6px; border-top: 0; }
.fluid-flyer .moving li .tap { left: 7px; top: 15px; }
.fluid-flyer .ticks li::before { transition: background .2s, border-color .2s; }
/* check in */
.fluid-flyer .pass-row .roll { height: 17px; }
.fluid-flyer .pass-row .roll > span { height: 17px; text-align: right; }
.fluid-flyer .check {
  --done: 0;
  position: relative;
  display: grid;
  height: 32px;
  margin-top: 12px;
  border-radius: 16px;
  background: rgba(255, 129, 0, calc(1 - var(--done)));
  box-shadow: inset 0 0 0 1px rgba(52, 199, 89, calc(var(--done) * .5));
  font-size: 14px;
  font-weight: 600;
}
.fluid-flyer .check > span { grid-area: 1 / 1; place-self: center; }
.fluid-flyer .check .ask { color: #FFFFFF; opacity: calc(1 - var(--done)); }
.fluid-flyer .check .done { color: #248A3D; opacity: var(--done); }
/* delivery: a rail between the first and last step, filled as it moves */
.fluid-flyer .track .rail, .fluid-flyer .track .fill { position: absolute; left: 12.5%; top: 4px; height: 2px; border-radius: 1px; }
.fluid-flyer .track .rail { right: 12.5%; background: rgba(var(--fluid-ink), .12); }
.fluid-flyer .track .fill { width: 0; background: rgb(var(--fluid-ink)); }
.fluid-flyer .track span i { transition: background .2s; }
.fluid-flyer .slide > .roll { margin-top: 10px; font-size: 14px; font-weight: 500; color: rgba(var(--fluid-ink), .55); }
/* price alert: the switch turns on with --on */
.fluid-flyer .toggle { --on: 0; position: relative; flex: none; }
.fluid-flyer .toggle .switch { display: block; background: color-mix(in srgb, #34C759 calc(var(--on) * 100%), #E3DFD8); }
.fluid-flyer .toggle .switch::after { right: auto; left: calc(2px + var(--on) * 16px); }
.fluid-flyer .now { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(var(--fluid-ink), .08); }
.fluid-flyer .now .price { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fluid-flyer .now .roll { font-size: 12px; font-weight: 600; color: #FF8100; }
.fluid-flyer .now .roll > span { text-align: right; }
/* streak: a week of days that moves on a day each round */
.fluid-flyer .week { margin-top: 12px; overflow: hidden; }
.fluid-flyer .strip { display: flex; gap: 4px; width: max-content; }
.fluid-flyer .strip span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 20px; }
.fluid-flyer .strip span i:first-child { width: 20px; height: 20px; border-radius: 50%; }
.fluid-flyer .strip small { font-size: 11px; font-weight: 600; color: rgba(var(--fluid-ink), .45); }
.fluid-flyer .strip .tap { top: 10px; }
/* say it out loud: a microphone and the wave of your voice */
.fluid-flyer .speak { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.fluid-flyer .mic { --speaking: 0; position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); }
.fluid-flyer .mic i:first-child { width: 10px; height: 10px; border-radius: calc(5px - var(--speaking) * 3px); background: #FFFFFF; }
.fluid-flyer .speak .wave { flex: 1; margin-top: 0; }
.fluid-flyer .slide { display: flex; flex-direction: column; }
.fluid-flyer .row .title { font-size: 16px; white-space: nowrap; }

/* On phones the page scrolls, so a vertical swipe over a widget or the jacket wall scrolls it. */
html.phone .fluid-wall,
html.phone .fluid-widget { touch-action: pan-y; }
/* On a phone the scene is one column the phone's width, read by scrolling (zoomed to
   the width by script): the ask centred, then the mini-app stacked for a tall screen,
   and Q.'s reply under it. The sample widgets that fly round the desktop's scene
   would cover it on a phone, so they are left out. */
.phone .fluid-scene { top: 0; width: 360px; padding: 24px 16px 220px; }
.phone .fluid-flyers { display: none; }
.phone .fluid-ask { align-self: center; max-width: 100%; font-size: 22px; line-height: 28px; text-align: center; }
.phone .fluid-typing { align-self: center; }
.phone .fluid-stage { justify-content: center; }
.phone .fluid-quested { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
/* the trip's widgets sit in one stack, the others peeking out above the front one */
.phone .fluid-trip { display: grid; justify-items: center; row-gap: 16px; padding-top: 36px; }
/* solid paper of the same tone as the desktop's frosted white, so a card hides the ones behind it */
.phone .fluid-trip > .fluid-widget { grid-area: 1 / 1; transform-origin: 50% 0; background: #EBEAEE; }
.phone .fluid-trip > .fluid-reply { grid-area: 2 / 1; justify-self: start; }
.phone .fluid-quiz { flex-direction: column; }
.phone .fluid-wall { width: 328px; height: 420px; }
.phone .fluid-reply-body { max-width: 328px; }