/* 02 · Understand & respond — the alert story.
   The product's "New alert" dialog (promo ThresholdScene) drawn in the ui.css
   vocabulary, the live widget that crosses the new limit beneath it, and the
   phone that receives the notification (promo PhoneNotify) on its lock
   screen. Everything is authored in its end state; js/landing/alerts.js
   rewinds it and replays it once.

   Composition: the creation scene (the dialog) and the result scene (the
   widget and the phone) share one space wherever the story runs, and the
   dialog sizes it, so dismissing the dialog never moves the pin or the page.
   Below 56rem the result stacks inside that space; above it, widget and phone
   sit side by side. Without motion the three pieces simply follow each other
   down the page, and from 75rem they compose: the dialog goes two-column, its
   action row stays with the form, and the widget and phone tuck under the
   dialog's bottom edge — widget behind on the left, phone in front on the
   right, where the context column has run out.

   A phone has room for the story and nothing else, so below 56rem the context
   aside and the lock screen below the notification are dropped. */

.landing-alerts__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}

.landing-alerts__dialog {
  flex: 1 1 100%;
  z-index: 2;
}

.landing-alerts__widget {
  flex: 1 1 16rem;
  z-index: 1;
}

.landing-alerts__phone {
  flex: none;
  width: min(100%, 15rem);
  margin-inline: auto;
  z-index: 3;
}

/* The result scene is a box of its own only where it shares the dialog's cell.
   Everywhere else it hands its children straight back to the stage, so every
   other rule on this page still addresses the widget and the phone directly. */
.landing-alerts__result {
  display: contents;
}

/* ---- Dialog ---- */

.landing-alerts__heading {
  min-width: 0;
}

.landing-alerts__form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.landing-alerts__condition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem;
  gap: .75rem;
}

.landing-alerts__control-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The caret only shows while the script is typing. */
.landing-alerts__caret {
  opacity: 0;
}

.landing-alerts__radio-text {
  min-width: 0;
}

/* ---- Context: what the measurement has reported, and what is already set ---- */

.landing-alerts__context {
  display: grid;
  gap: 1.5rem;
}

.landing-alerts__block {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-width: 0;
}

.landing-alerts__range {
  --lp-marker: 65%;

  position: relative;
  height: 8px;
  margin-block: .25rem;
  border-radius: 4px;
  background: rgb(255 255 255 / 10%);
}

.landing-alerts__range-fill {
  position: absolute;
  inset: 0 30% 0 18%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lp-shoal), var(--lp-cyan));
}

/* The limit being set, drawn over the reported range; amber once it is a real limit. */
.landing-alerts__range-marker {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: var(--lp-marker);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--lp-ink-strong);
  transition: background-color 300ms ease;
}

.landing-alerts__range.is-set .landing-alerts__range-marker {
  background: var(--lp-amber);
}

.landing-alerts__range-stats {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
}

.landing-alerts__range-stats > div {
  min-width: 0;
}

.landing-alerts__range-stats > div:nth-child(2) {
  text-align: center;
}

.landing-alerts__range-stats > div:last-child {
  text-align: right;
}

.landing-alerts__range-stats dt {
  color: var(--lp-mute);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-alerts__range-stats dd {
  margin: .2rem 0 0;
  color: var(--lp-ink-strong);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.landing-alerts__readings {
  color: var(--lp-mute);
  font-size: .8125rem;
}

.landing-alerts__existing {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-alerts__existing li {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--lp-line);
}

.landing-alerts__existing li:first-child {
  padding-top: 0;
}

.landing-alerts__existing code {
  color: var(--lp-ink-strong);
  font-family: var(--lp-mono);
  font-size: .875rem;
}

.landing-alerts__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ---- Live widget: the reading that crossed the limit ---- */

.landing-alerts__widget {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  transition: border-color 400ms ease, box-shadow 400ms ease;
}

.landing-alerts__widget.is-over {
  border-color: color-mix(in srgb, var(--lp-amber) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-amber) 22%, transparent), var(--lp-shadow-panel);
}

.landing-alerts__widget-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .75rem;
}

.landing-alerts__widget-title {
  color: var(--lp-mute);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color 400ms ease;
}

.landing-alerts__widget.is-over .landing-alerts__widget-title {
  color: var(--lp-amber);
}

.landing-alerts__widget-head .lp-live {
  margin-left: auto;
}

.landing-alerts__widget-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
}

.landing-alerts__widget .lp-reading {
  font-size: clamp(2.75rem, 4.5vw, 3.75rem);
  transition: color 400ms ease;
}

.landing-alerts__widget.is-over .lp-reading {
  color: var(--lp-amber);
}

.landing-alerts__widget-badge {
  margin-left: auto;
  transition: opacity 400ms ease, transform 500ms cubic-bezier(.34, 1.56, .64, 1);
}

.landing-alerts__widget:not(.is-over) .landing-alerts__widget-badge {
  opacity: 0;
  transform: scale(.85);
}

.landing-alerts__chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.landing-alerts__chart-limit {
  stroke: var(--lp-amber);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  opacity: .8;
}

.landing-alerts__chart-label {
  fill: var(--lp-amber);
  font-family: var(--lp-mono);
  font-size: 12px;
}

.landing-alerts__chart-line {
  fill: none;
  stroke: var(--lp-amber);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 400ms ease;
}

.landing-alerts__widget:not(.is-over) .landing-alerts__chart-line {
  stroke: var(--lp-cyan);
}

/* ---- Phone lock screen (PhoneNotify) — every size in cqw of the phone's width ---- */

.landing-alerts__lock {
  --lp-phone-screen: linear-gradient(
    170deg,
    color-mix(in srgb, var(--lp-current) 45%, var(--lp-hull)) 0%,
    color-mix(in srgb, var(--lp-current) 15%, var(--lp-hull)) 45%,
    color-mix(in srgb, var(--lp-hull) 70%, black) 100%
  );
}

.landing-alerts__lock-clock {
  position: absolute;
  top: 27cqw;
  left: 0;
  right: 0;
  text-align: center;
}

.landing-alerts__lock-clock span {
  display: block;
  font-size: 5.3cqw;
  font-weight: 500;
  opacity: .9;
}

.landing-alerts__lock-clock strong {
  display: block;
  margin-top: .6cqw;
  font-size: 24.7cqw;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The notification banner: iOS's frosted white card, dark ink on it. */
.landing-alerts__banner {
  position: absolute;
  top: 71.8cqw;
  left: 3.5cqw;
  right: 3.5cqw;
  display: flex;
  align-items: flex-start;
  gap: 3.5cqw;
  padding: 3.5cqw 4.1cqw;
  border-radius: 7cqw;
  background: rgb(255 255 255 / 88%);
  color: var(--lp-hull);
  box-shadow: 0 3.5cqw 11.8cqw rgb(0 0 0 / 35%);
}

.landing-alerts__banner-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 11.8cqw;
  height: 11.8cqw;
  border-radius: 2.9cqw;
  background: var(--lp-hull);
}

.landing-alerts__banner-icon img {
  width: 7cqw;
  height: auto;
}

.landing-alerts__banner-body {
  flex: 1;
  min-width: 0;
}

.landing-alerts__banner-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 4.4cqw;
  font-weight: 600;
  line-height: 1.3;
}

.landing-alerts__banner-meta span {
  color: color-mix(in srgb, var(--lp-hull) 55%, white);
  font-size: 3.5cqw;
  font-weight: 400;
}

.landing-alerts__banner-title {
  display: block;
  margin-top: .3cqw;
  font-size: 4.1cqw;
  font-weight: 600;
  line-height: 1.3;
}

.landing-alerts__banner-text {
  margin: 0;
  color: color-mix(in srgb, var(--lp-hull) 80%, white);
  font-size: 4.1cqw;
  line-height: 1.3;
}

.landing-alerts__lock-btn {
  position: absolute;
  bottom: 10cqw;
  display: grid;
  place-items: center;
  width: 14.7cqw;
  height: 14.7cqw;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
  font-size: 5.9cqw;
}

.landing-alerts__lock-btn--left {
  left: 9.4cqw;
}

.landing-alerts__lock-btn--right {
  right: 9.4cqw;
}

/* ---- Breakpoints ---- */

@media (width < 36rem) {
  /* Long option titles may wrap on a phone; the vocabulary keeps them on one line for desktop dialogs. */
  .landing-alerts__form .lp-radio__title {
    white-space: normal;
  }
}

/* Below 56rem the chapter is read one screenful at a time, so everything that
   is not the story is weight. The aside carries the 30-day statistics and the
   thresholds already set on this measurement — product realism the copy beside
   the illustration never promises — and the lock screen below the notification
   is empty navy. Dropping both, and letting the result take the dialog's place,
   takes the chapter from three screens to one and a half. */
@media (width < 56rem) {
  .landing-alerts__divider,
  .landing-alerts__context {
    display: none;
  }

  /* Stacked in flow, the lock screen below the notification is dead height, so
     it is cut away below the payoff and faded rather than left on a hard edge.
     Sharing the dialog's cell it costs nothing — the dialog has already claimed
     that room — and a phone at full height is what keeps the hand-over from
     leaving a pool of empty space where the form used to be. */
  .landing-alerts__stage:not(.is-animated) .landing-alerts__phone {
    height: 20rem;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 78%, transparent);
  }

  .landing-alerts__stage.is-animated {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }

  .landing-alerts__stage.is-animated .landing-alerts__dialog,
  .landing-alerts__stage.is-animated .landing-alerts__result {
    grid-column: 1;
    grid-row: 1;
  }

  /* The result is the incoming scene, so it paints over the dialog it replaces. */
  .landing-alerts__stage.is-animated .landing-alerts__result {
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* `flex: 1 1 16rem` on the stage's row means a 16rem height in this column. */
  .landing-alerts__stage.is-animated .landing-alerts__widget {
    flex: none;
  }
}

@media (width >= 36rem) {
  .landing-alerts__context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

@media (width >= 75rem) {
  .landing-alerts__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    align-items: start;
    column-gap: 1.5rem;
  }

  .landing-alerts__dialog {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12.5rem;
    align-items: start;
    column-gap: 1.75rem;
  }

  .landing-alerts__dialog > .lp-panel__head {
    grid-column: 1 / -1;
  }

  .landing-alerts__form {
    grid-column: 1;
    grid-row: 2;
  }

  .landing-alerts__divider {
    display: none;
  }

  .landing-alerts__context {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .landing-alerts__footer {
    grid-column: 1;
    grid-row: 3;
  }

  .landing-alerts__widget {
    grid-column: 1;
    grid-row: 2;
    width: min(22rem, 100%);
    margin: -1.25rem 0 0 1.25rem;
  }

  .landing-alerts__phone {
    grid-column: 2;
    grid-row: 2;
    width: 16rem;
    margin: -17rem 0 0;
  }
}

/* From 56rem the result scene is wide enough to sit beside itself: the widget
   in the dialog's column, the phone in its own. Below that the same crossfade
   stacks them — see the narrow block above. The class is absent only for
   reduced motion, where the three pieces keep the authored flow layout. */
@media (width >= 56rem) {
  .landing-alerts__stage.is-animated {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, .7fr);
    align-items: center;
    gap: 1.5rem;
  }

  .landing-alerts__stage.is-animated .landing-alerts__dialog {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .landing-alerts__stage.is-animated .landing-alerts__widget {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0;
    z-index: 3;
  }

  .landing-alerts__stage.is-animated .landing-alerts__phone {
    grid-column: 2;
    grid-row: 1;
    width: min(100%, 15rem);
    margin: 0 auto;
  }
}