/* phone.css: owned by the devices and phone kit task (065/004), design package §6.3, §6.5. */

/*
  The phone UI kit (§6.5): the app's Needs you cards, rebuilt at phone scale, and the screens and
  states the opening (§6.3, §6.6), the ladder (§9) and the lock screen and Telegram beats need.
  Markup to copy is in scripts/landing-v2/kit/index.html (served at /__kit/). Its icons come from
  the shared sprite (index.html, region:sprite): i-clock, i-x, i-signal, i-battery and i-kit-*.

  A screen is a .ph inside .iph__screen (devices.css). Each .ph fills the screen and lays out a
  393 × 852 layout in --ph-u (= 100cqw / 393), so it scales with the device and needs no JS.
  Several .ph layers can share one screen: they stack, and the page crossfades them, so a state
  change never moves anything (no layout shift).

  Sizes are the package's, in the 393 layout: the card's 12px padding, 9.5px eyebrow, 13px title,
  11px meta and 27px buttons sit near the app's own (src/styles.css: text-body 14px, text-meta
  11.5px) on a 393-point phone. Where §6.5 gives no number, the Figma mockup's builder does.

  The UI follows the page's direction; person-facing content (names, addresses, subjects, the
  cards' own lines, the draft, the lock screen, the Telegram wrap-up) stays English on every page
  and carries lang="en" dir="ltr" in the markup (§16).
  Colours come from tokens.css; Telegram's (--tg-*) are phone-only, read on .ph-tg and on the
  app switcher's Telegram tile alone.
*/

@property --ph-u {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

/* ---------- The screen ---------- */

.ph {
  --ph-u: calc(100cqw / 393);
  position: absolute;
  inset: 0;
  overflow: hidden; /* the list clips at the screen's edge, like a real scroller */
  background: var(--night);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: calc(13 * var(--ph-u));
  line-height: 1.3;
  text-align: start;
}
/* ---------- The status bar (decorative) ---------- */
.ph-status {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(54 * var(--ph-u));
  padding-inline: calc(52 * var(--ph-u)) calc(47 * var(--ph-u));
  color: var(--ivory);
  font-family: var(--font-plex), var(--font-system);
  font-size: calc(16 * var(--ph-u));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ph-status__icons {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--ph-u));
}
.ph-status__signal {
  width: calc(17 * var(--ph-u));
  height: calc(12 * var(--ph-u));
}
.ph-status__battery {
  width: calc(26 * var(--ph-u));
  height: calc(12 * var(--ph-u));
}

/* ---------- Needs you: the header and the list ---------- */
.ph-head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--ph-u));
  padding: calc(68 * var(--ph-u)) calc(20 * var(--ph-u)) 0;
}
.ph-head__title {
  font-family: var(--font-heading);
  font-size: calc(26 * var(--ph-u));
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: 1.15;
}
.ph-head__count {
  display: grid;
  place-items: center;
  min-width: calc(22 * var(--ph-u));
  height: calc(22 * var(--ph-u));
  padding-inline: calc(7 * var(--ph-u));
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ivory);
  font-family: var(--font-mono);
  font-size: calc(12 * var(--ph-u));
  font-weight: 500;
  line-height: 1;
}
.ph-list {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--ph-u));
  padding: calc(18 * var(--ph-u)) calc(16 * var(--ph-u)) 0;
}

/* ---------- The card ---------- */
.ph-card {
  position: relative;
  flex: none;
  padding: calc(12 * var(--ph-u));
  border: 1px solid var(--hairline);
  border-radius: calc(14 * var(--ph-u));
  background: var(--surface-1);
}
/* In focus: the card that is the beat's subject. */
.ph-card.is-focus {
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}

/* Snooze (a clock) and dismiss (×), at the inline-end top. */
.ph-card__icons {
  position: absolute;
  inset-block-start: calc(10 * var(--ph-u));
  inset-inline-end: calc(10 * var(--ph-u));
  display: flex;
  gap: calc(7 * var(--ph-u));
  color: var(--ash);
}
.ph-card__icons svg {
  width: calc(14 * var(--ph-u));
  height: calc(14 * var(--ph-u));
}

.ph-eyebrow {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--ph-u));
  min-height: calc(14 * var(--ph-u));
  padding-inline-end: calc(44 * var(--ph-u)); /* clear of the corner icons */
  color: var(--gold);
  font-family: var(--font-label);
  font-size: calc(9.5 * var(--ph-u));
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
/* Arabic has no capitals and no tracking (tokens.css); its labels read at a larger size. */
.ph-eyebrow:lang(ar) {
  font-size: calc(11 * var(--ph-u));
  letter-spacing: 0;
}
.ph-eyebrow svg {
  flex: none;
  width: calc(11 * var(--ph-u));
  height: calc(11 * var(--ph-u));
}

.ph-card__title {
  margin-block: calc(5 * var(--ph-u)) calc(3 * var(--ph-u));
  color: var(--ivory);
  font-size: calc(13 * var(--ph-u));
  font-weight: 600;
  line-height: 1.3;
}
.ph-card__meta {
  color: var(--ash);
  font-size: calc(11 * var(--ph-u));
  line-height: 1.4;
}
.ph-card__meta + .ph-card__meta {
  margin-block-start: calc(3 * var(--ph-u));
}
.ph-card__title:lang(ar) {
  line-height: 1.55;
}
.ph-card__meta:lang(ar) {
  line-height: 1.6;
}

/* A subject quoted the way the app's Russian and Arabic cards quote it. */
:root:lang(ru) .ph-q::before,
:root:lang(ar) .ph-q::before {
  content: '«';
}
:root:lang(ru) .ph-q::after,
:root:lang(ar) .ph-q::after {
  content: '»';
}

/* The Lume dot: the one "NOCTS noticed" mark (§2), on Rania's card. */
.ph-lume {
  position: relative;
  flex: none;
  width: calc(7 * var(--ph-u));
  height: calc(7 * var(--ph-u));
  border-radius: 50%;
  background: var(--lume);
}
.ph-lume::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--lume);
  opacity: 0;
}
.ph-lume.is-pulsing::after {
  animation: ph-lume 2.2s var(--ease-in-out) infinite;
}

/* ---------- Actions: primary gold, secondary Surface 2, tertiary text ---------- */
.ph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--ph-u));
  margin-block-start: calc(10 * var(--ph-u));
}
.ph-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: calc(27 * var(--ph-u));
  margin: 0;
  padding-inline: calc(10 * var(--ph-u));
  border: 0;
  border-radius: calc(8 * var(--ph-u));
  background: var(--surface-2);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: calc(11 * var(--ph-u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
.ph-btn--primary {
  background: var(--gold);
  color: var(--night);
}
.ph-btn--text {
  padding-inline: calc(6 * var(--ph-u));
  background: transparent;
}
/* The live Send reply at 14:30 (§6.6): a <button tabindex="-1">, pointer and touch only. */
button.ph-btn {
  cursor: pointer;
}
button.ph-btn:active {
  scale: 0.98;
}
/* Its soft gold ring, every 1.6s, while the page marks it .is-pulsing. */
.ph-btn::after {
  content: '';
  position: absolute;
  inset: calc(-3 * var(--ph-u));
  border: calc(2 * var(--ph-u)) solid var(--gold);
  border-radius: calc(11 * var(--ph-u));
  opacity: 0;
  pointer-events: none;
}
.ph-btn.is-pulsing::after {
  animation: ph-ask 1.6s var(--ease-in-out) infinite;
}

/* ---------- The draft well (from 14:30) ---------- */
.ph-draft {
  margin-block-start: calc(10 * var(--ph-u));
  padding: calc(9 * var(--ph-u)) calc(10 * var(--ph-u));
  border: 1px solid var(--hairline);
  border-radius: calc(10 * var(--ph-u));
  background: var(--night);
}
.ph-draft__label {
  color: var(--ash);
  font-size: calc(10 * var(--ph-u));
  line-height: 1.4;
}
.ph-draft__text {
  margin-block-start: calc(5 * var(--ph-u));
  color: var(--ivory);
  font-family: var(--font-plex), var(--font-system);
  font-size: calc(11 * var(--ph-u));
  line-height: 1.45;
}

/* ---------- Done: the line under a card NOCTS handled ("Done for you · …", §9) ---------- */
.ph-done {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--ph-u));
  margin-block-start: calc(6 * var(--ph-u));
  color: var(--ash);
  font-size: calc(11 * var(--ph-u));
  font-weight: 500;
  line-height: 1.4;
}
.ph-done svg {
  flex: none;
  width: calc(13 * var(--ph-u));
  height: calc(13 * var(--ph-u));
  color: var(--gold);
}

/* ---------- The list's empty state (the ladder's Off) ---------- */
.ph-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(10 * var(--ph-u));
  padding-inline: calc(40 * var(--ph-u));
  text-align: center;
}
.ph-empty__icon {
  display: grid;
  place-items: center;
  width: calc(40 * var(--ph-u));
  height: calc(40 * var(--ph-u));
  border-radius: calc(10 * var(--ph-u));
  background: var(--surface-2);
  color: var(--ivory);
}
.ph-empty__icon svg {
  width: calc(22 * var(--ph-u));
  height: calc(22 * var(--ph-u));
}
.ph-empty__text {
  color: var(--ivory);
  font-size: calc(14 * var(--ph-u));
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- The lock screen (block 1, 08:52) ---------- */
.ph-lock {
  text-align: center;
}
.ph-lock__date {
  padding-block-start: calc(92 * var(--ph-u));
  color: var(--ash);
  font-family: var(--font-plex), var(--font-system);
  font-size: calc(16 * var(--ph-u));
  font-weight: 500;
  line-height: 1.2;
}
.ph-lock__clock {
  margin-block-start: calc(5 * var(--ph-u));
  font-family: var(--font-sora), var(--font-system);
  font-size: calc(84 * var(--ph-u));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ph-lock__list {
  display: grid;
  gap: calc(12 * var(--ph-u));
  margin: calc(62 * var(--ph-u)) 0 0;
  padding: 0 calc(16 * var(--ph-u));
  list-style: none;
  text-align: start;
}
.ph-note {
  display: grid;
  gap: calc(2 * var(--ph-u));
  padding: calc(10 * var(--ph-u)) calc(14 * var(--ph-u));
  border-radius: calc(18 * var(--ph-u));
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  font-family: var(--font-plex), var(--font-system);
  line-height: 1.3;
}
.ph-note b {
  font-size: calc(14 * var(--ph-u));
  font-weight: 600;
}
.ph-note span {
  color: var(--ash);
  font-size: calc(13.5 * var(--ph-u));
}

/* ---------- Telegram: the NOCTS bot's evening wrap-up (block 8) ----------
   Telegram's dark theme. The bot sends notifications; nobody chats with it (§21). */
.ph-tg {
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: var(--font-plex), var(--font-system);
}
.ph-tg__bar {
  position: absolute;
  inset-block-start: calc(50 * var(--ph-u));
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--ph-u));
  height: calc(58 * var(--ph-u));
  padding-inline: calc(14 * var(--ph-u));
  background: var(--tg-bar);
}
.ph-tg__back {
  flex: none;
  width: calc(14 * var(--ph-u));
  height: calc(22 * var(--ph-u));
  color: var(--tg-link);
}
.ph-tg__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(36 * var(--ph-u));
  height: calc(36 * var(--ph-u));
  border-radius: 50%;
  background: var(--night);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--gold);
}
.ph-tg__avatar svg {
  width: calc(24 * var(--ph-u));
  height: calc(14 * var(--ph-u));
}
.ph-tg__name {
  display: grid;
  gap: calc(2 * var(--ph-u));
  line-height: 1.2;
}
.ph-tg__name b {
  font-size: calc(16 * var(--ph-u));
  font-weight: 600;
}
.ph-tg__name small {
  color: var(--tg-muted);
  font-size: calc(13 * var(--ph-u));
}
/* The message and its inline button sit above the Mini App button, as in a chat's foot. */
.ph-tg__chat {
  position: absolute;
  inset-block-end: calc(112 * var(--ph-u));
  inset-inline: calc(12 * var(--ph-u)) calc(63 * var(--ph-u));
  display: grid;
  gap: calc(6 * var(--ph-u));
}
.ph-tg__msg {
  display: grid;
  gap: calc(4 * var(--ph-u));
  padding: calc(12 * var(--ph-u)) calc(14 * var(--ph-u)) calc(8 * var(--ph-u));
  border-radius: calc(16 * var(--ph-u));
  background: var(--tg-bubble);
  font-size: calc(14.5 * var(--ph-u));
  line-height: 1.45;
}
.ph-tg__msg > p + p {
  margin-block-start: calc(17 * var(--ph-u)); /* a blank line, with the 4px gap */
}
.ph-tg__title {
  font-size: calc(15 * var(--ph-u));
  font-weight: 600;
}
.ph-tg__time {
  justify-self: end;
  color: var(--tg-muted);
  font-size: calc(11.5 * var(--ph-u));
  line-height: 1;
}
.ph-tg__inline,
.ph-tg__app {
  display: grid;
  place-items: center;
  font-weight: 500;
  line-height: 1;
}
.ph-tg__inline {
  height: calc(40 * var(--ph-u));
  border-radius: calc(10 * var(--ph-u));
  background: var(--tg-inline);
  font-size: calc(14.5 * var(--ph-u));
}
.ph-tg__app {
  position: absolute;
  inset-block-end: calc(38 * var(--ph-u));
  inset-inline: calc(16 * var(--ph-u));
  height: calc(50 * var(--ph-u));
  border-radius: calc(12 * var(--ph-u));
  background: var(--tg-button);
  font-size: calc(15 * var(--ph-u));
  font-weight: 600;
}

/* ---------- The app switcher (the opening's 18:00 to 21:00, 065/020) ----------
   iOS's app switcher, between two of a phone's screens. .ph-switch sits in .iph__screen after
   the screens, decorative: a label card per app (.ph-switch__card[data-switch=<the screen's
   data-layer>]), a box the screen's size whose label (the app's icon in a 30px tile, and its
   name, in English) rides 46px above it, and the finger: a dot that swipes up from the home
   bar and one that taps. While the screen box carries .is-switching, the page behind the cards
   is Surface 1, each screen takes the screen's rounded corners and the overlay shows; the page
   moves the screens and the cards in step (opening.css), the labels and the dots start
   invisible. In the 393 layout, like every screen; the label follows the page's direction.
   Telegram's tile reads --tg-bar and --tg-link, its own colours, like .ph-tg. */
.iph__screen.is-switching {
  background: var(--surface-1);
}
.iph__screen.is-switching > .ph {
  border-radius: inherit;
}
.ph-switch {
  --ph-u: calc(100cqw / 393);
  position: absolute;
  z-index: 3;
  inset: 0;
  display: none;
  pointer-events: none;
}
.is-switching > .ph-switch {
  display: block;
}
.ph-switch__card {
  position: absolute;
  inset: 0;
}
.ph-switch__label {
  position: absolute;
  inset-block-start: calc(-46 * var(--ph-u));
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--ph-u));
  color: var(--ivory);
  font-family: var(--font-plex), var(--font-system);
  font-size: calc(18 * var(--ph-u));
  font-weight: 600;
  line-height: 1;
  opacity: 0;
}
.ph-switch__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(30 * var(--ph-u));
  height: calc(30 * var(--ph-u));
  border-radius: calc(8 * var(--ph-u));
  background: var(--night);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--gold);
}
.ph-switch__icon--tg {
  background: var(--tg-bar);
  color: var(--tg-link);
}
.ph-switch__eyes {
  width: calc(20 * var(--ph-u));
  height: calc(11 * var(--ph-u));
}
.ph-switch__plane {
  width: calc(14 * var(--ph-u));
  height: calc(14 * var(--ph-u));
}
.ph-switch__swipe,
.ph-switch__tap {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ivory) 40%, transparent);
  opacity: 0;
}
.ph-switch__swipe {
  inset-block-end: calc(12 * var(--ph-u));
  inset-inline-start: calc(50% - 17 * var(--ph-u));
  width: calc(34 * var(--ph-u));
  height: calc(34 * var(--ph-u));
}
.ph-switch__tap {
  inset-block-start: calc(50% - 19 * var(--ph-u));
  inset-inline-start: calc(50% - 19 * var(--ph-u));
  width: calc(38 * var(--ph-u));
  height: calc(38 * var(--ph-u));
}

/* ---------- Motion ----------
   Reduced motion: base.css ends every animation on its last frame, where both rings are
   invisible, so nothing pulses. A hidden tab pauses them (base.css, [data-paused]). */
@keyframes ph-lume {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}
@keyframes ph-ask {
  0% {
    opacity: 0.75;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.14);
  }
}