/*
    Get ready (Figma A2, A3, A4) and the help screens that stand in for
    B1, B2, B4 and B5. talk.html only.

    States live on <body>:
      .ready-pending   the script hasn't run yet
      .ready-checking  the script is running, working out the first screen
      .is-get-ready    one of these screens is up, instead of the talk screen

    On a phone the reading sits above and the controls under the thumb,
    with the legal line just below the fold, as in the Figma frames.

    Colours are the tokens in styles-light.css, with their dark values in
    talk-theme.css. Text colours are a step stronger than Figma's so they
    hold on the gradient's edges.
*/

/* Hidden until the script chooses, so the talk screen doesn't flash up
   first. The animation is the safety net for a script that never runs:
   the talk screen appears by itself rather than leaving a blank page.
   Long enough not to fire on a script that's merely slow, and the script
   drops it the moment it runs by swapping to .ready-checking. */
.ready-pending .app > :not(.legal-line),
.ready-checking .app > :not(.legal-line) {
  visibility: hidden;
}

.ready-pending .app > :not(.legal-line) {
  animation: ready-reveal 0s 8s forwards;
}

@keyframes ready-reveal {
  to {
    visibility: visible;
  }
}

/* --------------------------------
   THE SHELL
-------------------------------- */

.is-get-ready .app {
  height: 100%;
  margin: 0;

  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));

  align-items: stretch;

  text-align: left;
}

/* The legal line stays. Everything else on the talk screen waits. */
.is-get-ready .app > :not(.ready):not(.legal-line) {
  display: none;
}

.ready {
  flex: 0 0 auto;

  min-height: 100%;

  display: flex;
  flex-direction: column;
}

.ready[hidden],
.ready-panel[hidden] {
  display: none;
}

.ready-panel {
  flex: 1 0 auto;

  display: flex;
  flex-direction: column;
}

.is-get-ready .legal-line {
  margin-top: 16px;
}

.ready-status {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------
   TEXT
-------------------------------- */

.ready-eyebrow {
  margin: 0 0 12px;

  color: var(--link);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.12px;
  text-transform: uppercase;
}

.ready-heading {
  margin: 0 0 16px;

  color: var(--heading);
  font-size: clamp(30px, 9vw, 34px);
  font-weight: 700;
  line-height: 1.15;
}

.ready-heading:focus {
  outline: none;
}

.ready-heading:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: 6px;
}

.ready-body {
  margin: 0;

  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.4;
}

/* --------------------------------
   A2: THE TWO STEPS
-------------------------------- */

.ready-steps {
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 16px;

  list-style: none;
}

/* A plain card on the page's own gradient. Nothing behind the words. */
.ready-step {
  padding: 20px;

  display: flex;
  align-items: flex-start;
  gap: 16px;

  border: 1px solid var(--card-line);
  border-radius: 22px;

  background: var(--card);

  box-shadow: var(--step-shadow);
}

.ready-step-icon {
  flex: none;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--icon-ground);
}

.ready-icon {
  fill: none;

  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ready-step-title {
  margin: 0 0 4px;

  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.ready-step-body {
  margin: 0;

  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.35;
}

.ready-step-body strong {
  font-weight: 600;
}

/* --------------------------------
   CONTROLS
-------------------------------- */

.ready-controls {
  margin-top: auto;
  padding-top: 24px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ready-button {
  width: 100%;
  min-height: 56px;

  padding: 12px 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 1.5px solid var(--button-line);
  border-radius: 999px;

  background: var(--surface);

  color: var(--accent);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

.ready-button.is-primary {
  min-height: 64px;

  border: 0;

  /* Darker than Figma's #2f8fd8, for 4.5:1 with the white label throughout. */
  background: linear-gradient(to bottom, #1e75b8, #185f98);

  box-shadow: 0 10px 22px rgba(30, 117, 184, 0.35);

  color: #ffffff;
  font-size: 21px;
  font-weight: 600;
}

.ready-button.is-primary .ready-icon {
  stroke: #ffffff;
}

.ready-button[hidden] {
  display: none;
}

/* The sound's been checked: a tick where the play arrow was. */
.ready-tick,
.ready-button.is-checked .ready-play {
  display: none;
}

.ready-button.is-checked .ready-tick {
  display: block;
}

.ready-button:focus-visible,
.ready-text-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Waiting on the browser. Dimmed, not `disabled`, so focus stays put. */
.ready-button[aria-disabled="true"] {
  opacity: 0.6;

  cursor: default;
}

.ready-text-button {
  min-height: 48px;

  padding: 8px;

  border: 0;
  border-radius: 8px;

  background: none;

  color: var(--link);
  font-family: inherit;
  font-size: 17px;
  text-decoration: underline;
  text-underline-offset: 3px;

  cursor: pointer;
}

.ready-text-button[hidden] {
  display: none;
}

/* Reads the opening promise, nothing about what comes later. */
.ready-price {
  margin: 0;

  color: var(--ink-2);
  font-size: 16px;
  text-align: center;
}

/* --------------------------------
   DID YOU HEAR IT?
-------------------------------- */

.sound-ask {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sound-ask[hidden] {
  display: none;
}

.sound-question {
  margin: 0;

  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.sound-question:focus {
  outline: none;
}

.sound-answers {
  display: flex;
  gap: 12px;
}

/* --------------------------------
   A3: POINTING AT ALLOW

   The browser draws its own question, so this only points. iPhone's
   dialog is in the middle of the screen, so the hint sits under it, just
   above the buttons. Android Chrome's is a sheet from the bottom edge, so
   the hint sits straight under the steps and points down at it.
-------------------------------- */

.ready-hint {
  align-self: center;

  margin: 0;
  padding: 10px 22px;

  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 999px;

  background: var(--raised-hover);

  box-shadow: var(--hint-shadow);

  color: var(--link);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.ready-hint[hidden],
.ready-slow[hidden] {
  display: none;
}

.ready-hint-arrow {
  width: 26px;
  height: 26px;

  fill: none;

  stroke: var(--link);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The sheet covers the lower part of the screen, buttons included, so the
   controls give up the bottom and the hint lands straight under the steps,
   where it can't cover them. Its height varies, so nothing here assumes it. */
.is-sheet .ready-controls {
  margin-top: 0;
}

.is-sheet .ready-hint {
  flex-direction: column-reverse;

  border-radius: 24px;
}

.is-sheet .ready-hint-arrow {
  transform: rotate(180deg);
}

.ready-slow {
  margin: 0;

  color: var(--ink);
  font-size: 18px;
  text-align: center;
}

/* --------------------------------
   A4: THE LEVEL METER
-------------------------------- */

.ready-listen {
  align-items: center;

  padding-top: clamp(8px, 4vh, 40px);

  text-align: center;
}

.listen-ring {
  width: 148px;
  height: 148px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 4px solid var(--accent);
  border-radius: 50%;

  background: var(--ring-ground);

  box-shadow:
    0 0 0 18px rgba(39, 133, 206, 0.12),
    0 0 0 19px rgba(39, 133, 206, 0.25);
}

/* Try again has to fit above the fold. The meter stays. */
.is-silent .listen-ring {
  display: none;
}

.ready-meter {
  height: 72px;

  margin: 36px 0 20px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ready-meter[hidden] {
  display: none;
}

/* No easing on the bars: they follow the voice, nothing else moves. */
.ready-meter span {
  width: 6px;
  height: 72px;

  border-radius: 6px;

  background: linear-gradient(to bottom, var(--blue-soft), var(--blue-dark));

  transform: scaleY(0.15);
  will-change: transform;
}

.listen-rows {
  margin: 16px 0 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

  list-style: none;
}

.listen-row {
  min-height: 44px;

  padding: 8px 16px;

  display: flex;
  align-items: center;
  gap: 8px;

  border: 1px solid var(--hairline);
  border-radius: 999px;

  background: var(--card);

  color: var(--ink-2);
  font-size: 17px;
  font-weight: 600;
}

.listen-tick {
  display: none;

  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listen-row.is-ok {
  border-color: var(--good-line);

  background: var(--good-ground);

  color: var(--good-ink);
}

.listen-row.is-ok .listen-tick {
  display: block;
}

.silent-help {
  width: 100%;

  margin-top: auto;
  padding-top: 24px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.silent-help[hidden] {
  display: none;
}

.silent-heading {
  margin: 0;

  color: var(--heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

/* --------------------------------
   SIZES
-------------------------------- */

@media (max-width: 360px) {
  .ready-step {
    padding: 16px;

    gap: 12px;
  }

  .ready-step-icon {
    width: 44px;
    height: 44px;
  }

  .ready-button.is-primary {
    font-size: 19px;
  }
}

/* A small phone. Both buttons stay on screen in every state, so anything
   that isn't the words or the buttons goes first. Buttons stay over the
   44px a finger needs. */
@media (max-height: 640px) {
  .is-get-ready .app {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .ready-step-icon,
  .listen-ring {
    display: none;
  }

  .ready-eyebrow {
    margin-bottom: 4px;
  }

  .ready-heading {
    margin-bottom: 8px;

    font-size: 26px;
  }

  .ready-steps {
    gap: 8px;
  }

  .ready-step {
    padding: 10px 14px;
  }

  .ready-step-title {
    font-size: 18px;
  }

  .ready-step-body {
    font-size: 17px;
    line-height: 1.25;
  }

  .ready-controls {
    padding-top: 12px;

    gap: 8px;
  }

  .ready-button {
    min-height: 48px;
    padding: 8px 14px;
  }

  .ready-button.is-primary {
    min-height: 54px;
  }

  .sound-ask {
    gap: 4px;
  }

  .sound-question {
    font-size: 18px;
  }

  /* One row, with the arrow beside the words. */
  .ready-hint {
    padding: 6px 16px;

    flex-direction: row;
    gap: 8px;

    font-size: 18px;
  }

  .ready-hint-arrow {
    width: 20px;
    height: 20px;
  }

  /* "Not seeing it?" says more than the hint by then, and there's no room
     for both. */
  .ready-hint.is-slow {
    display: none;
  }

  .ready-slow {
    font-size: 16px;
  }

  /* Most of a short screen is under the sheet. The titles stay above it
     with the hint; the sentences come back with the sheet gone. */
  .is-sheet .ready-step-body {
    display: none;
  }

  .is-sheet .ready-hint {
    flex-direction: row-reverse;
  }

  .ready-listen {
    padding-top: 0;
  }

  .ready-meter {
    height: 48px;

    margin: 8px 0;
  }

  .listen-rows {
    margin-top: 8px;

    gap: 6px;
  }

  .listen-row {
    min-height: 34px;

    padding: 4px 12px;

    font-size: 15px;
  }

  /* The prompt's own words take over from these, so Try again and Skip
     stay on screen. Without a meter the body is what says what to do. */
  .is-silent:not(.is-unchecked) #listenBody {
    display: none;
  }

  .is-silent .ready-heading {
    margin-bottom: 0;
  }

  .silent-help {
    padding-top: 10px;

    gap: 6px;
  }

  .silent-heading {
    font-size: 19px;
  }

  .silent-help .ready-body {
    font-size: 17px;
    line-height: 1.25;
  }

  .ready-text-button {
    min-height: 44px;
    padding: 4px;
  }
}

/* A tablet or computer has no thumb to reach for, so everything sits
   together in the middle of the window. */
@media (min-width: 768px) and (min-height: 640px) {
  .is-get-ready .app {
    height: auto;
    margin: auto;
  }

  .ready {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ready-meter span {
    will-change: auto;
  }
}