/*
 * How it works: every part of the app, one after another.
 *
 * The first six are moments he acts out, beside the app's own screen for
 * the same thing. The rest are the app's screens and what they are for.
 * He is on no part that is about a medication.
 *
 * The tokens and the shared parts are base.css. The screens are phone.css
 * and screens.css.
 */

.open {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
}

.open h1 {
  margin-top: 1rem;
  font-size: min(10rem, calc((min(100vw, var(--page)) - 2 * var(--gutter)) / (19 * 0.58)));
  line-height: 0.9;
  white-space: nowrap;
}

.open h1 i {
  font-style: normal;
  color: var(--lava);
}

.lead {
  max-width: 40rem;
  margin-top: 1.5rem;
  color: var(--ink2);
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  line-height: 1.4;
}

/* ---------- A part ---------- */

.chapter {
  border-top: var(--rule) solid var(--ink);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.chapter .wrap {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.chapter .label {
  grid-column: 1 / -1;
}

.chapter .label b {
  margin-right: 0.6rem;
  color: var(--ink);
}

.words h2 {
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  line-height: 0.96;
}

.words .say,
.words > p {
  max-width: 34rem;
  margin-top: 1.1rem;
  color: var(--ink2);
  font-size: 1.125rem;
  line-height: 1.5;
}

.words .meta {
  font-size: 0.9375rem;
}

.words .quote {
  color: var(--ink);
  font-weight: 700;
}

/* What it will not do, or the one thing to take away: on a rule. */
.words .lines {
  display: grid;
  gap: 0.6rem;
  max-width: 34rem;
  margin: 1.75rem 0 0;
  padding: 1.1rem 0 0;
  border-top: var(--rule) solid var(--ink);
  list-style: none;
  color: var(--ink2);
}

.words .lines .rule {
  color: var(--ink);
  font-weight: 700;
}

.shown .phone {
  width: min(100%, 18rem);
}

.policy-link {
  margin-top: 1.5rem;
  font-weight: 700;
}

.policy-link a {
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--lava);
}

/* ---------- A moment: the words, him, the screen ---------- */

/* His ground is paper in every appearance, as on the home page. */
.actor {
  --tall: 22rem;
  position: relative;
  overflow: hidden;
  min-height: var(--tall);
  border: var(--rule) solid var(--ink);
  background: var(--stage);
}

/* The whole artboard, a square he fills a little over half of, placed by
   his middle. The same square holds the still and the canvas. */
.actor .frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(44rem, 150%, calc(var(--tall) * 1.6));
  aspect-ratio: 1;
  transform: translate(-50%, -62%);
}

/* Holding the card up he is small and the card is most of the picture, so
   the whole square is shown. */
.actor.holds-card .frame {
  width: min(100%, var(--tall));
  transform: translate(-50%, -50%);
}

.actor img,
.actor canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.actor canvas {
  transition: opacity 200ms ease;
}

/* The word on the card he holds up. It is written here and not in the
   animation, so it can be read by anything that reads the page, and the
   font the animation names is never fetched. The card is 392 by 222 of
   the artboard's 512, its middle at 256 by 176. */
.actor .word {
  position: absolute;
  left: 11.7%;
  top: 12.7%;
  display: grid;
  place-content: center;
  gap: 0.3em;
  width: 76.6%;
  height: 43.4%;
  padding: 0 8%;
  color: #17171a;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.actor .word span {
  color: #6c6762;
  /* Never under 12px: on a phone 0.7em of the card came to ten. */
  font: max(0.7em, 0.75rem)/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 64rem) {
  .moment .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem) 18rem;
  }

  /* Every other one is turned round, so the page does not march. */
  .moment.flip .words {
    order: 3;
  }

  .moment.flip .acts {
    order: 2;
  }

  .moment.flip .shown {
    order: 1;
  }

  .moment.flip .wrap {
    grid-template-columns: 18rem minmax(0, 24rem) minmax(0, 1fr);
  }

  .actor {
    --tall: 26rem;
  }

  .feature .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }

  .feature.wide .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .moment .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .moment .words {
    grid-column: 1 / -1;
  }
}

/* On a phone (AHO-842): him and the screen side by side under the words,
   as on the home page's stage, and the screens a size a thumb scrolls
   past. Stacked, every moment was a square of him and then a phone the
   height of the screen: the page ran to 35 screens on an iPhone SE. */
@media (max-width: 39.99rem) {
  .moment .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.75rem;
  }

  .moment .label,
  .moment .words {
    grid-column: 1 / -1;
  }

  .moment .acts,
  .moment .shown {
    order: 0;
    align-self: stretch;
  }

  .moment .acts {
    display: grid;
  }

  .moment .actor {
    --tall: 12rem;
    height: 100%;
  }

  .moment .shown {
    display: grid;
    align-content: center;
  }

  .moment .shown .phone {
    width: 100%;
  }

  /* Smaller, and set below the rule printed on the card, which ran
     through the sender's name at this size. */
  .actor .word {
    padding-top: 1rem;
    font-size: 0.75rem;
  }

  .actor .word span {
    font-size: 0.5625rem;
  }

  .feature .shown .phone {
    width: min(100%, 13rem);
  }
}

/* ---------- The price, at the end ---------- */

.close .words {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.close .sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

/* The figure is a way to the store as well as the button under it. */
.close .sum:hover b {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.08em;
}

.close .sum b {
  color: var(--ink);
  font: 800 clamp(4.75rem, 10vw, 8rem) / 0.88 var(--display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.close .sum span {
  font-size: 1.25rem;
  font-weight: 600;
  /* "a year" stacked a word a line at 320. */
  white-space: nowrap;
}

@media (max-width: 24rem) {
  .close .actions .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .actor canvas {
    transition: none;
  }
}

/* ---------- Siri ----------
 *
 * From the old stylesheet, in the new tokens.
 */

.said-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  max-width: 34rem;
}

.said-list li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--hair);
}

.said-list li:last-child {
  border-bottom: 1px solid var(--hair);
}

.said-list .said {
  display: block;
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.said-list .reply {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink3);
}

.voice-chat figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
}

.voice-chat .tool:empty,
.voice-chat .you:empty {
  visibility: hidden;
}

@media (min-width: 60rem) {
  .said-list.is-live li {
      cursor: pointer;
      transition: color 160ms ease;
    }
  .said-list.is-live .said {
      color: var(--ink3);
      transition: color 160ms ease;
    }
  .said-list.is-live li.is-on .said,
    .said-list.is-live li:hover .said,
    .said-list.is-live li:focus-visible .said {
      color: var(--ink);
    }
  .said-list.is-live li:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
  .said-list.is-live .reply {
      display: none;
    }
  .voice-chat.is-live .tool {
      animation: said-in 320ms ease both;
    }
}

@media (max-width: 59.99rem) {
  .voice-chat {
      display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
  .voice-chat.is-live .tool { animation: none; }
}

.body .quote {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--display);
  color: var(--ink);
}

/* ---------- Bring your own agent ---------- */

.agent {
  padding-block: clamp(4rem, 10vw, 8rem);
}

.agent .wrap {
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* A command is set on one line and scrolls inside its own box; without
   this a grid item's min-content width is the longest command, and the
   whole section grew past a phone's screen. */
.agent .wrap > *,
.agents,
.agent-panel {
  min-width: 0;
}

.agent .label {
  grid-column: 1 / -1;
}

.agent h2 {
  max-width: 12ch;
}

.agent .say {
  max-width: 34rem;
  margin-top: 1.1rem;
  color: var(--ink2);
  font-size: 1.125rem;
  line-height: 1.5;
}

@media (min-width: 60rem) {
  .agent .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* The setup for each assistant, from the old stylesheet in the new
   tokens. With the script it is a row of tabs; without, a list. */
.agents {
  margin-top: 2rem;
  max-width: 44rem;
}

.agent-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.agent-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink3);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.agent-tabs button:hover {
  color: var(--ink);
}

.agent-tabs button[aria-selected="true"] {
  color: var(--ink);
  border-color: var(--hair);
  background: var(--paper2);
}

.agent-panel + .agent-panel {
  margin-top: 2rem;
}

.agents[data-enhanced] .agent-panel + .agent-panel {
  margin-top: 0;
}

.agents[data-enhanced] .agent-panel h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.agent-mark {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.agent-panel h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.agent-panel p {
  color: var(--ink2);
  max-width: 34rem;
  margin: 0;
}

.agent-code {
  margin-top: 0.9rem !important;
  background: var(--paper2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

/* One command a line, scrolled sideways rather than broken mid-URL: a
   command split at "mc/p" is one nobody can retype (AHO-636). */
.agent-code code {
  display: block;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink);
  white-space: pre;
  overflow-x: auto;
  overflow-wrap: normal;
}

/* Copying is the whole job here on a phone. Square, full width, under the
   command it copies. */
.agent-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% + 2rem);
  min-height: 2.75rem;
  margin: 0.85rem -1rem -0.85rem;
  border: 0;
  border-top: 1px solid var(--hair);
  border-radius: 0 0 6px 6px;
  background: none;
  color: var(--ink);
  font: 0.8125rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.agent-copy:active {
  background: var(--paper);
}

@media (max-width: 39.99rem) {
  /* The page's name, larger than its chapters again: sized to fit one line
     at nineteen letters, it came to 30px on a phone against 36px h2s. */
  .open h1 {
    white-space: normal;
    font-size: clamp(2.75rem, 14vw, 4.5rem);
  }

  /* Two columns of full rows, not three ragged lines of 37px pills. */
  .agent-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: var(--rule) solid var(--ink);
  }

  .agent-tabs button {
    justify-content: flex-start;
    width: 100%;
    min-height: 2.75rem;
    border: 0;
    border-bottom: 1px solid var(--hair);
    border-radius: 0;
  }

  .agent-tabs button[aria-selected="true"] {
    background: var(--ink);
    color: var(--paper);
  }

  /* The gem and the bubble were cut off once he moved. */
  #repair .actor .frame {
    width: 118%;
    transform: translate(-50%, -55%);
  }
}

/* Chapter 12 is not a `.chapter` (its own layout), so it drew no rule and
   its number ran into its name (AHO-636). The same rule and gap here. */
#tools {
  border-top: var(--rule) solid var(--ink);
}

.agent .label b {
  margin-right: 0.6rem;
  color: var(--ink);
}

/* On a phone the reply's figure is hidden; its empty cell was 118px of
   nothing. */
@media (max-width: 59.99rem) {
  #voice .shown {
    display: none;
  }
}