:root {
  /*
      One blue family, anchored on the logo's hue (H 206). Before this the
      wordmark sat at 206, the toggle at 209 and the waveform at 211-213 —
      close enough to look like a mistake rather than a choice.
  */
  --blue-deep: #004a82;
  --blue-dark: #1e75b8;
  --blue: #2785ce;
  --blue-soft: #6cabda;
  --blue-light: #79acd5;
  --blue-muted: #8ea3b4;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;

  /*
      An app shell, not a document. The page itself never scrolls, so the
      phone has nothing to rubber-band against. Anything that outgrows the
      viewport scrolls inside .app instead.

      `dvh` tracks the visible area as mobile browser chrome slides away.
      `vh` does not — it counts the area behind the chrome too, which is
      exactly what let the page drift up and down on load.
  */
  height: 100vh;
  height: 100dvh;

  display: flex;

  background: radial-gradient(
    circle at center,
    #ffffff 0%,
    #eef3f9 35%,
    #dbe4ef 75%,
    #c6d2e1 100%
  );
  background-attachment: fixed;

  color: #1b2a3d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  overflow: hidden;
  overscroll-behavior: none;
}

.app {
  /*
      Full width, so its scroll bar sits at the window's right edge rather
      than beside a centred 500px column. The side padding keeps the
      content to that same 460px column (500px less 20px each side).
  */
  width: 100%;
  max-height: 100%;

  /* Auto margins centre it while short, without clipping once it is tall. */
  margin: auto;

  padding: 40px max(20px, calc((100% - 460px) / 2));
  padding-top: max(40px, env(safe-area-inset-top));
  padding-bottom: max(40px, env(safe-area-inset-bottom));

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

  /* The one scroll container, so the letter stays reachable. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  text-align: center;
}

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

.wordmark {
  width: 100%;
  max-width: 420px;

  margin: 0 0 10px;
}

.wordmark-lockup {
  display: block;
  width: 100%;
  height: auto;
}

.wordmark-cross {
  fill: var(--blue-deep);
}

/* The gap between cross and check — it has to match the page behind it. */
.wordmark-sep {
  fill: #ffffff;
}

.wordmark-check {
  fill: var(--blue-light);
}

.wordmark-appeal {
  fill: var(--blue-deep);
}

.wordmark-buddy {
  fill: var(--blue-light);
}

.subtitle {
  font-size: clamp(18px, 4vw, 28px);
  color: #5d7086;

  margin-bottom: clamp(26px, 7vh, 55px);
}

/* --------------------------------
   BUTTON
-------------------------------- */

.talk-button {
  position: relative;

  width: min(70vw, 330px);
  aspect-ratio: 1;

  border: none;
  border-radius: 50%;

  cursor: pointer;

  padding: 0;

  touch-action: none;
  -webkit-tap-highlight-color: transparent;

  /* Outer brushed-silver body */
  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #e6edf5 12%,
    #bcc9d8 28%,
    #93a4b8 65%,
    #d3dde9 88%,
    #ffffff 100%
  );

  box-shadow:
    0 25px 45px rgba(64, 87, 120, 0.35),
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 -5px 8px rgba(83, 105, 137, 0.45);

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

/* Recessed inner face */
.talk-button::before {
  content: "";

  position: absolute;

  inset: 9%;

  border-radius: 50%;

  /* Alternating dot lattice, faint, over the dome */
  background:
    radial-gradient(circle, rgba(40, 70, 110, 0.1) 0.7px, transparent 1.5px) 0 0 /
      7px 7px,
    radial-gradient(circle, rgba(40, 70, 110, 0.06) 0.4px, transparent 1.1px)
      3.5px 3.5px / 7px 7px,
    radial-gradient(circle, #ffffff 0%, #eaf1f9 65%, #d2dded 100%);

  box-shadow:
    0 0 12px rgba(0, 122, 224, 0.3),
    0 0 25px rgba(0, 122, 224, 0.18),
    inset 0 2px 10px rgba(83, 105, 137, 0.3);

  z-index: 1;
}

/* Blue ring */
.talk-button::after {
  content: "";

  position: absolute;

  inset: 11%;

  border-radius: 50%;

  border: 5px solid #2d9bff;

  box-shadow:
    0 0 6px rgba(45, 155, 255, 0.55),
    0 0 15px rgba(45, 155, 255, 0.35),
    0 0 30px rgba(0, 140, 255, 0.2);

  z-index: 2;

  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

/* --------------------------------
   MICROPHONE
-------------------------------- */

.microphone {
  position: absolute;

  z-index: 5;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: 32%;
  height: auto;

  pointer-events: none;

  filter: drop-shadow(0 2px 3px rgba(40, 70, 110, 0.35));
}

.microphone .shine-edge {
  stop-color: #1f6fc4;
}

.microphone .shine-core {
  stop-color: #3f9be8;
}

.microphone .capsule {
  fill: url(#micShine);
}

.microphone .frame {
  fill: none;

  stroke: var(--blue);
  stroke-width: 6;
  stroke-linecap: round;
}

/* --------------------------------
   PRESSED STATE
-------------------------------- */

.talk-button:active,
.talk-button.is-recording {
  transform: translateY(7px) scale(0.97);

  box-shadow:
    0 10px 20px rgba(64, 87, 120, 0.4),
    inset 0 5px 10px rgba(83, 105, 137, 0.5);
}

.talk-button.is-recording::after {
  border-color: #0b6fd8;

  box-shadow:
    0 0 10px rgba(45, 155, 255, 0.8),
    0 0 25px rgba(0, 140, 255, 0.55),
    0 0 50px rgba(0, 140, 255, 0.35),
    0 0 90px rgba(0, 140, 255, 0.2);
}

/* --------------------------------
   WAVEFORM
-------------------------------- */

.waveform {
  display: flex;

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

  gap: 7px;

  height: 70px;

  margin-top: 55px;
}

.waveform span {
  width: 5px;

  height: 18px;

  border-radius: 10px;

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

  box-shadow: 0 1px 3px rgba(48, 78, 120, 0.35);

  transition: height 0.15s ease;
}

.waveform span:nth-child(1),
.waveform span:nth-child(9) {
  height: 15px;
}

.waveform span:nth-child(2),
.waveform span:nth-child(8) {
  height: 25px;
}

.waveform span:nth-child(3),
.waveform span:nth-child(7) {
  height: 38px;
}

.waveform span:nth-child(4),
.waveform span:nth-child(6) {
  height: 50px;
}

.waveform span:nth-child(5) {
  height: 65px;
}

/* Animate waveform while recording */

.is-recording + .waveform span {
  animation: waveform 0.45s ease-in-out infinite alternate;
}

.is-recording + .waveform span:nth-child(2),
.is-recording + .waveform span:nth-child(8) {
  animation-delay: 0.1s;
}

.is-recording + .waveform span:nth-child(3),
.is-recording + .waveform span:nth-child(7) {
  animation-delay: 0.2s;
}

.is-recording + .waveform span:nth-child(4),
.is-recording + .waveform span:nth-child(6) {
  animation-delay: 0.3s;
}

@keyframes waveform {
  from {
    transform: scaleY(0.4);
  }

  to {
    transform: scaleY(1.25);
  }
}

/* --------------------------------
   MOBILE
-------------------------------- */

@media (max-width: 600px) {
  .subtitle {
    margin-bottom: 40px;
  }

  .waveform {
    margin-top: 40px;
  }
}

/* --------------------------------
   APPEAL
-------------------------------- */

.appeal {
  width: 100%;

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

  border: 1px solid rgba(90, 125, 175, 0.25);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.75);

  box-shadow: 0 18px 40px rgba(64, 87, 120, 0.18);

  text-align: left;
}

.appeal-heading {
  margin: 0 0 18px;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  color: var(--blue);
}

.appeal-fields {
  margin: 0;

  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
}

.appeal-fields dt {
  font-size: 13px;
  color: #5d7086;

  white-space: nowrap;
}

.appeal-fields dd {
  margin: 0;

  font-size: 15px;
  color: #17253a;
}

.appeal-letter {
  margin-top: 22px;
  padding-top: 22px;

  border-top: 1px solid rgba(90, 125, 175, 0.2);
}

.appeal-letter-bar {
  margin-bottom: 12px;

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.appeal-letter-heading {
  margin: 0;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;

  color: var(--blue);
}

.appeal-toggle {
  padding: 4px 8px;

  border: 0;
  border-radius: 6px;

  background: none;

  color: #5d7086;
  font-family: inherit;
  font-size: 13px;

  cursor: pointer;

  transition: color 0.15s ease;
}

.appeal-toggle:hover {
  color: #1f3149;
}

/* A textarea, so the letter can be selected and copied without the button. */
.appeal-argument {
  display: block;
  width: 100%;
  min-height: 140px;

  box-sizing: border-box;
  padding: 14px 16px;

  border: 1px solid rgba(90, 125, 175, 0.3);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.9);

  color: #1f3149;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.65;

  resize: vertical;
}

.appeal-letter .appeal-action {
  width: 100%;
  margin-top: 12px;
}

.appeal-actions {
  margin-top: 24px;

  display: flex;
  gap: 10px;
}

.appeal-action {
  flex: 1;

  padding: 11px 14px;

  border: 1px solid rgba(90, 125, 175, 0.35);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.9);

  color: #1f3149;
  font-family: inherit;
  font-size: 14px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.appeal-action:hover {
  border-color: rgba(45, 155, 255, 0.6);

  background: #ffffff;
}