/* ============================================================
   app-mock.css, phone frame + in-app screen chrome
   ============================================================ */

.phone {
  width: min(360px, 100%); flex: none; position: relative;
  border-radius: 46px; padding: 11px;
  background: linear-gradient(160deg, #161d26, #0a0e13);
  box-shadow: 0 0 0 1px #232c39, 0 60px 110px -50px #000, 0 0 0 8px color-mix(in oklab, var(--g-calm) 5%, transparent);
}
.phone::before { content: ""; position: absolute; inset: 0; border-radius: 46px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); pointer-events: none; }
.phone__notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 112px; height: 28px; background: #05070a; border-radius: 16px; z-index: 6; }
.phone__screen { position: relative; border-radius: 36px; overflow: hidden; background: var(--bg); height: 720px; display: flex; flex-direction: column; }

.appbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 6px; font-family: var(--mono); font-size: 12px; color: var(--text); }
.appbar .r { display: flex; gap: 6px; align-items: center; opacity: .8; }
.apphead { padding: 10px 18px 6px; }
.apphead__row { display: flex; align-items: center; justify-content: space-between; }
.apphead h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.apphead .mkt { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.apphead .mkt .live { width: 7px; height: 7px; border-radius: 50%; background: var(--g-glow); box-shadow: 0 0 9px var(--g-glow); animation: pulse 2.4s ease-in-out infinite; }
/* TODAY summary panel, mirrors the app's Today header (handoff design): label +
   day percent over a two-segment Hot/Cold strip, finished with a fading line. */
.apptoday__row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.apptoday__lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: #5d636c; }
.apptoday__pct { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #9be8b0; }
.apptoday__pct.dn { color: #ff5b52; }
.apptoday__strip { display: flex; align-items: stretch; margin-top: 11px; border-radius: 13px; overflow: hidden; box-shadow: inset 0 0 0 1px #191c20; }
.apptoday__seg { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 11px 13px; background: #0c0d0f; }
.apptoday__seg.div { box-shadow: inset 1px 0 0 #191c20; }
.apptoday__tag { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.apptoday__tag.hot { color: #ffae3b; }
.apptoday__tag.cold { color: #7dd3fc; }
.apptoday__tk { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apptoday__v { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apptoday__v.g { color: #9be8b0; }
.apptoday__v.r { color: #ff6a61; }
.apptoday__hair { height: 1px; margin: 10px 0 0; background: linear-gradient(90deg, transparent, #191c20, transparent); }

.applist { flex: 1; overflow: hidden; padding: 6px 12px 16px; display: grid; gap: 9px; align-content: start; }
/* The list squeezes 8 rows into a fixed height, so each row track (~47px) is
   shorter than the row's content box (~65px with its padding + value pill).
   Center the content column within the track so the green/red pill sits evenly
   inside each tile instead of being top-anchored and spilling past the bottom. */
.applist .hrow { display: flex; flex-direction: column; justify-content: center; }
/* Pin the price and change columns to fixed widths so the numbers line up
   straight down the list (price right-aligned, pill aligned) instead of each
   row sizing them to its own content and drifting off-grid. Ticker + sparkline
   stay flexible. */
.applist .hrow__main { padding: 12px 14px; gap: 12px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 62px 66px; }
.applist .hrow .tk { font-size: 14px; }
.applist .hrow .px { font-size: 13px; }
/* value pill, dialed ~13% smaller than the base .chg so it reads less bulky
   while staying centered in the tile (sizes scaled together to keep it even). */
.applist .hrow .chg { font-size: 12px; min-width: 66px; padding: 5px 9px; border-radius: 7px; }
.applist .hrow .chg b { font-size: 12.5px; }
.applist .hrow .chg span { font-size: 9.5px; }

.apptab { display: flex; justify-content: space-around; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg-2); }
.apptab .ti { display: grid; justify-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.apptab .ti.on { color: var(--g-glow); }
.apptab .ti .dot { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1.6px currentColor; }
.apptab .ti.on .dot { background: color-mix(in oklab, var(--g-calm) 22%, transparent); }

/* glow under the phone */
.phone-glow { position: absolute; inset: auto 0 -6% 0; height: 40%; z-index: -1; filter: blur(50px);
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in oklab, var(--g-calm) 40%, transparent), transparent 70%); }