/* Rebuilt app screens for the homepage demos.

   Each screen is laid out at the app's real geometry, iPhone 17 Pro at
   402 × 874 points with 1 pt = 1 px, and the whole screen is then scaled to
   its device's width. Every measurement, type role, and color here comes
   from the SwiftUI source (Core/Theme, Features/Chat, Features/Workout,
   App/AppView.swift, Core/Voice, Core/Notifications), so a value can be
   checked against the app directly. Colors are the app's own tokens. */

/* Device */

.device {
  --screen-w: calc(402px * var(--screen-scale));
  --pt: calc(var(--screen-w) / 402);
  position: relative;
}

.phone {
  padding: calc(7 * var(--pt));
  border-radius: calc(62 * var(--pt));
  background: var(--color-inverse-surface);
  box-shadow: 0 0 0 1px var(--color-border-subtle);
}

.screen {
  position: relative;
  width: var(--screen-w);
  aspect-ratio: 402 / 874;
  overflow: hidden;
  border-radius: calc(55 * var(--pt));
  background: var(--color-background);
}

.ui,
.float {
  color: var(--color-primary-text);
  font-family: var(--font-figtree);
  font-size: 17px;
  line-height: 20.4px;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

.ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  height: 874px;
  overflow: hidden;
  transform: scale(var(--screen-scale));
  transform-origin: 0 0;
}

.ui :where(p, h3, ul, li),
.float :where(p) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Text roles (AppTypography). Figtree roles use the target line pitch and
   pull the block in by half the added leading, which reproduces SwiftUI's
   line box: native height per line with lineSpacing only between lines. */

.t-screen-title { font: 600 32px/1.26 var(--font-sora); letter-spacing: -0.64px; }
.t-section-title { font: 600 24px/1.26 var(--font-sora); letter-spacing: -0.48px; }
.t-card-title { font: 600 18px/24px var(--font-figtree); margin-block: -1.2px; }
.t-body { font: 400 17px/26px var(--font-figtree); margin-block: -2.8px; }
.t-body-em { font: 600 17px/26px var(--font-figtree); margin-block: -2.8px; }
.t-supporting { font: 400 16px/24px var(--font-figtree); margin-block: -2.4px; }
.t-supporting-em { font: 600 16px/24px var(--font-figtree); margin-block: -2.4px; }
.t-label { font: 500 14px/20px var(--font-figtree); margin-block: -1.6px; }
.t-label-em { font: 600 14px/20px var(--font-figtree); margin-block: -1.6px; }
.t-button { font: 600 16px/22px var(--font-figtree); margin-block: -1.4px; }
.t-caption { font: 400 12px/18px var(--font-figtree); margin-block: -1.8px; }
.t-caption-em { font: 600 12px/18px var(--font-figtree); margin-block: -1.8px; }
.t-metric { font: 600 32px/1.2 var(--font-figtree); font-variant-numeric: tabular-nums; }
.t-prescription { font: 500 22px/28px var(--font-figtree); margin-block: -0.8px; font-variant-numeric: tabular-nums; }

.c-secondary { color: var(--color-secondary-text); }
.c-tertiary { color: var(--color-tertiary-text); }
.c-link { color: var(--color-interactive-foreground); }
.one-line { white-space: nowrap; }

/* SF Symbols are SVG stand-ins whose viewBox is the glyph's measured frame,
   so width and height (set in the markup) match SwiftUI's Image layout. */

.sym {
  display: block;
  flex: none;
  fill: currentColor;
}

/* iOS system colors the app leaves to UIKit (list headers, disclosure
   chevrons, separators), approximated from the app's own text color. */
.ui {
  --ios-secondary-label: color-mix(in srgb, var(--color-primary-text) 50%, var(--color-background));
  --ios-tertiary-label: color-mix(in srgb, var(--color-primary-text) 25%, var(--color-background));
  --ios-separator: color-mix(in srgb, var(--color-primary-text) 13%, var(--color-background));
}

/* Liquid Glass. The system glass renders near-opaque over the canvas with a
   soft halo (measured 0 4 24 at 10% black in light mode) and draws a 1 pt
   white rim at 13%, which only shows in dark mode. */

.glass {
  /* Measured interiors: #FEFEFE over white, #161616 to #181818 over #080808. */
  background: color-mix(in srgb, var(--color-utility-surface) 88%, var(--color-background));
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--color-floating-shadow) 77%, transparent),
    inset 0 0 0 1px var(--color-chrome-highlight);
}

.circle {
  display: grid;
  flex: none;
  place-items: center;
  border-radius: 50%;
}

.d48 { width: 48px; height: 48px; }
.d44 { width: 44px; height: 44px; }
.d42 { width: 42px; height: 42px; }
.d40 { width: 40px; height: 40px; }
.d38 { width: 38px; height: 38px; }
.d34 { width: 34px; height: 34px; }
.d32 { width: 32px; height: 32px; }

.fill-control { background: var(--color-control-fill); }

.fill-primary {
  background: var(--color-action-primary-background);
  color: var(--color-action-primary-foreground);
}

/* Hey Coach toggle (CoachMicrophoneButton): off is controlFill; on is
   success at 12% with a 2 pt success ring. */
.hey-coach.is-on,
.demo.is-live .hey-coach[data-at].is-at {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-success);
}

/* iOS status bar (system; measured) */

.ios-time,
.ios-island,
.ios-icons {
  z-index: 3;
}

.ios-time {
  position: absolute;
  top: 24px;
  left: 57px;
  font: 600 17px/17px -apple-system, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -0.3px;
}

.ios-island {
  position: absolute;
  top: 14.2px;
  left: 138.6px;
  width: 124.8px;
  height: 36.1px;
  border-radius: 18px;
  background: var(--color-inverse-surface);
}

.ios-icons {
  position: absolute;
  top: 26px;
  right: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ios-signal { width: 18.2px; height: 11px; }
.ios-wifi { width: 15.6px; height: 11.3px; }

/* The charging battery reproduces iOS system chrome, not a Simplicity color:
   like the App Store badge, its green is Apple's, not a design token. */
.ios-battery {
  width: 26.4px;
  height: 13.2px;
  color: color-mix(in srgb, var(--color-primary-text) 42%, transparent);
  fill: #65c563;
  stroke: var(--color-background);
}

/* Chat home (ChatScreen, ChatFeedRows, PinnedWorkoutControlCard, ComposerDock) */

/* ChatTopBarBackdrop: material plus a background fade over the top 150 pt;
   invisible on white, a faint lift over the dark canvas (measured). */
.chat-backdrop {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 150px;
  background: linear-gradient(
    color-mix(in srgb, var(--color-utility-surface) 45%, transparent) 0%,
    color-mix(in srgb, var(--color-utility-surface) 62%, transparent) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.chat-top {
  z-index: 2;
  position: absolute;
  top: 70px;
  right: 24px;
  left: 24px;
  display: flex;
  justify-content: space-between;
}

.chat-top-group {
  display: flex;
  gap: 8px;
}

.chat-feed {
  position: absolute;
  top: 142px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 354px;
}

/* User bubble: 16/12 padding, radius 16, utilitySurface, 0.5 pt border. */
.bubble {
  align-self: flex-end;
  max-width: 258px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--color-utility-surface);
  box-shadow: 0 0 0 0.5px var(--color-border-subtle);
}

.coach-text {
  padding-right: 26px;
}

.pinned {
  position: absolute;
  top: 604px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 354px;
  height: 168px;
  padding: 16px;
  border-radius: 24px;
}

.pinned-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 82px;
  overflow: hidden;
}

.pinned-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.pinned-title > :first-child {
  flex: 1;
  min-width: 0;
}

.count-pill > *,
.status-pill > * {
  display: block;
}

/* The font shorthand resets numeric variants, so set tabular digits last. */
.count-pill > * {
  font-variant-numeric: tabular-nums;
}

.count-pill {
  flex: none;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--color-control-fill);
  font-variant-numeric: tabular-nums;
}

.pinned-controls {
  position: relative;
  display: flex;
  gap: 8px;
  height: 42px;
}

.pinned-controls .fill-primary {
  margin-left: auto;
}

.page-dots {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  translate: -50% -50%;
}

.page-dots i {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: var(--color-tertiary-text);
  opacity: 0.34;
}

.page-dots i:first-child {
  width: 8.5px;
  height: 8.5px;
  background: var(--color-primary-text);
  opacity: 1;
}

.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 8px 4px 16px;
  border-radius: 24px;
}

.chat-composer {
  position: absolute;
  top: 784px;
  left: 24px;
  width: 354px;
}

.placeholder {
  flex: 1;
  min-width: 0;
  color: color-mix(in srgb, var(--color-primary-text) 30%, transparent);
}

/* Workout focus (WorkoutFocusModeScreen) */

.wk-top {
  position: absolute;
  top: 70px;
  right: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
}

.wk-top-title {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.wk-hero {
  position: absolute;
  top: 120px;
  left: 24px;
  width: 354px;
  height: 666px;
}

.wk-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  transition: translate var(--motion-standard-duration) var(--motion-standard-easing);
}

.wk-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wk-rx {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.rx-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Label("Set 2 of 3", systemImage: "chevron.down"): the text comes first in
   the markup so the row aligns on its baseline; the icon draws before it. */
.set-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: 23px;
}

/* The icon sits outside the flow so the row aligns on the text baseline. */
.set-picker > .sym {
  position: absolute;
  top: 50%;
  left: 2px;
  translate: 0 -50%;
}

.wk-instructions,
.wk-instructions ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wk-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-timer {
  width: 54px;
  height: 54px;
}

.wk-actions {
  display: flex;
  gap: 12px;
}

.complete > .sym {
  margin: 0 0.95px;
}

.complete {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 999px;
}

.ask {
  flex: none;
  gap: 4px;
  width: 186px;
  padding: 4px 4px 4px 12px;
  border-radius: 27px;
}

.action-peek {
  position: absolute;
  top: 802px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 366px;
  height: 758px;
  padding: 16px;
  border-radius: 24px;
}

.action-peek .t-caption-em {
  padding-top: 4px;
  text-transform: uppercase;
}

/* Voice-action receipt (WorkoutVoiceActionReceiptBanner): 8 s, with Undo. */
.receipt {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 354px;
  min-height: 48px;
  padding: 2px 8px 2px 12px;
  border-radius: 16px;
  background: var(--color-control-fill);
}

.receipt > .t-label-em:nth-child(2) {
  flex: 1;
}

.receipt > .sym {
  margin: 0 2px;
}

.receipt-undo > *,
.complete > .t-card-title {
  display: block;
}

.receipt-undo {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
}

/* The receipt sits above the exercise page, which moves down by its height
   plus the hero's 16 pt spacing. */
.demo:not(.is-live) .wk-page,
.demo.is-live .wk-page[data-at].is-at {
  translate: 0 64px;
}

/* Listening capsule (CoachListeningWaveform): bottom of the signed-in shell,
   24 pt side insets, 82 pt above the bottom safe area. */
.listening {
  position: absolute;
  top: 698px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 354px;
  height: 60px;
  padding: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-utility-surface) 78%, transparent);
  box-shadow: 0 0 0 1px var(--color-divider), 0 4px 24px var(--color-floating-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
}

.listening .is-disabled {
  opacity: 0.3;
}

/* LiveWaveformView: 2.5 pt capsules, 2.5 pt apart, primaryText at 72%,
   height max(3, level × 24). */
.wave {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 2.5px;
  height: 32px;
  overflow: hidden;
}

.wave i {
  flex: none;
  width: 2.5px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-primary-text) 72%, transparent);
}

.demo.is-live .listening.is-on .wave i {
  animation: speech 1.1s ease-in-out infinite;
}

.wave i:nth-child(3n) { animation-delay: -0.2s; }
.wave i:nth-child(3n + 1) { animation-delay: -0.5s; animation-duration: 0.9s; }
.wave i:nth-child(4n) { animation-delay: -0.7s; animation-duration: 1.3s; }
.wave i:nth-child(5n) { animation-delay: -0.35s; }
.wave i:nth-child(-n + 14) { animation-name: none; }

@keyframes speech {
  0%, 100% { height: 3px; }
  30% { height: 14px; }
  55% { height: 22px; }
  80% { height: 8px; }
}

/* Workout detail (WorkoutHistoryDetailScreen) */

.pl-top {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 126px;
  background: var(--color-background);
}

.pl-top > * {
  position: absolute;
  top: 70px;
}

.pl-top > :first-child {
  left: 24px;
}

.pl-top > :last-child {
  top: 72px;
  right: 24px;
}

.pl-scroll {
  position: absolute;
  top: 142px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 354px;
  transition: translate 1.4s var(--motion-standard-easing);
}

.demo.is-live .pl-scroll[data-at].is-at {
  translate: 0 -620px;
}

.pl-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pl-chips {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--color-subtle-surface);
}

.start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  margin-top: 2px;
  padding: 14px 16px;
  border-radius: 12px;
}

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tile,
.exercise {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 24px;
}

.tile {
  gap: 8px;
}

/* Hugs its longest line, as SwiftUI sizes it. */
.notes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: flex-start;
  padding: 16px;
  border-radius: 24px;
  background: var(--color-subtle-surface);
}

.exercises {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exercise {
  gap: 16px;
}

.exercise-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.exercise-name > :first-child {
  flex: 1;
}

.set-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.set-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.set-row > :first-child {
  flex: none;
  width: 44px;
}

/* Floating UI beside the device, at the same scale as its screen. */

.float {
  position: absolute;
  z-index: 1;
  transform: scale(var(--screen-scale));
}

.float-chat {
  right: calc(100% - 28 * var(--pt));
  bottom: 15%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 258px;
  transform-origin: right bottom;
}

.float-chat .bubble {
  box-shadow: 0 0 0 0.5px var(--color-border-subtle), 0 4px 24px var(--color-shadow-medium);
}

/* An Activity inbox row (NotificationCenterViews), shown on its own canvas. */
.float-activity {
  top: 44%;
  right: calc(100% - 32 * var(--pt));
  width: 318px;
  padding: 8px 0 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-background);
  box-shadow: 0 0 0 1px var(--color-border-subtle), 0 4px 24px var(--color-shadow-medium);
  transform-origin: right center;
}

.activity-day {
  padding: 8px 24px 8px;
}

.activity-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 24px;
}

.unread {
  display: grid;
  flex: none;
  justify-items: center;
  width: 24px;
  padding-top: 8px;
}

.unread i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-interactive-foreground);
}

.activity-text {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 8px;
}

.activity-text > :first-child {
  flex: 1;
}

/* Coach's Notebook (CoachNotebookView), as captured: a native inline
   navigation bar (54 pt) and a plain list with 24 pt custom row insets. */

.nb-nav {
  position: absolute;
  top: 62px;
  right: 0;
  left: 0;
  height: 54px;
}

.nb-back {
  position: absolute;
  top: 0;
  left: 16px;
}

.nb-back .sym {
  translate: -1.5px 0;
}

.nb-title {
  position: absolute;
  top: 11.7px;
  right: 0;
  left: 0;
  font: 600 17px/20.7px -apple-system, "SF Pro Text", system-ui, sans-serif;
  text-align: center;
}

.nb-list {
  position: absolute;
  top: 138px;
  right: 0;
  left: 0;
}

.nb-header {
  padding: 9.5px 16px 10.6px;
  color: var(--ios-secondary-label);
}

.nb-row,
.nb-note {
  position: relative;
}

.nb-row::after,
.nb-note::after {
  content: "";
  position: absolute;
  right: 16.3px;
  bottom: 0;
  left: 24px;
  height: 0.7px;
  background: var(--ios-separator);
}

.nb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26.3px 14px 24px;
}

.nb-row > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.nb-chevron {
  color: var(--ios-tertiary-label);
}

/* Recent notes use the system's default row insets. */
.nb-note {
  padding: 12.4px 16px;
}

.nb-note::after {
  right: 0;
  left: 16px;
}

.nb-footer {
  padding: 10.4px 16px;
  color: var(--ios-secondary-label);
}

/* The workout screen after a voice-logged set, shown at rest (no playback):
   the receipt is up and the exercise page sits below it. */
.wk-page.is-down {
  translate: 0 64px;
}

/* Activity (NotificationCenterViews): the top bar centers "Activity" in the
   card title role between glass back and actions buttons, 24 pt from the
   edges and 8 pt below the safe area; rows reuse the inbox row styles above.
   Button diameter is approximated at 44 pt. */

.act-top {
  position: absolute;
  z-index: 2;
  top: 70px;
  right: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}

.act-top > .t-card-title {
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
}

.act-list {
  position: absolute;
  top: 130px;
  right: 0;
  left: 0;
}

/* Lock screen with an expanded Simplicity check-in. iOS system UI, not the
   app's: approximated, not measured. The answers are the app's real
   SIMPLICITY_ENERGY notification actions (NotificationsModule). */

/* The lock screen draws its status bar and clock in white over the wallpaper;
   the notification itself keeps the appearance's text color. */
.ls-screen {
  color: var(--palette-white);
}

.ls-screen .ios-battery {
  color: color-mix(in srgb, var(--palette-white) 55%, transparent);
  stroke: var(--palette-blue500);
}

.ls-note,
.ls-actions {
  color: var(--color-primary-text);
}

/* A photo wallpaper: the Simplicity mark in the open band between the clock
   and the notifications, with a muted version in dark mode. */
.ls-wallpaper {
  position: absolute;
  inset: 0;
  background: var(--palette-blue400) url("images/wallpaper-logo.webp") center / cover no-repeat;
}

@media (prefers-color-scheme: dark) {
  .ls-wallpaper {
    background-color: var(--palette-blue800);
    background-image: url("images/wallpaper-logo-dark.webp");
  }
}

.ls-date,
.ls-time {
  position: absolute;
  right: 0;
  left: 0;
  color: var(--palette-white);
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  text-align: center;
}

.ls-date {
  top: 84px;
  font-weight: 600;
  font-size: 21px;
  line-height: 25px;
}

.ls-time {
  top: 110px;
  font-weight: 700;
  font-size: 104px;
  line-height: 110px;
  letter-spacing: -2px;
}

.ls-stack {
  position: absolute;
  /* Near the bottom, where iOS shows notifications. */
  top: 566px;
  right: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ls-note,
.ls-actions {
  background: color-mix(in srgb, var(--color-utility-surface) 80%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
}

.ls-note {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
}

.ls-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--color-brand-primary);
  color: var(--palette-white);
}

.ls-icon svg {
  width: 23px;
  height: 17.5px;
  fill: currentColor;
}

.ls-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 15px;
  line-height: 20px;
}

.ls-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}

.ls-head span:last-child {
  color: var(--color-secondary-text);
  font-weight: 400;
  font-size: 13px;
}

.ls-actions {
  overflow: hidden;
  border-radius: 18px;
}

.ls-actions span {
  display: block;
  padding: 13px 18px;
  font-size: 17px;
  line-height: 22px;
}

.ls-actions span + span {
  box-shadow: inset 0 0.5px 0 var(--ios-separator);
}