/* ═══════════════════════════════════════════════════════════════════════════
   LIVE APP MOCKUPS — Option 03 "Quiet Confidence"

   These replace the raster screenshots in assets/app-ui/*.png. Built from the
   same tokens as the app, so they never drift from the shipped UI, re-theme
   in evening mode, stay crisp at any DPI, and can be animated.

   ── SIZING MODEL ────────────────────────────────────────────────────────
   The phone is FLUID: it fills whatever container it is placed in, keeps a
   fixed 268 x 560 aspect ratio, and scales every internal dimension
   proportionally. That is what keeps a phone in the hero and a phone in the
   showcase rail looking like the same object at two sizes, instead of two
   differently-proportioned objects.

   Mechanism: `--u` is a LENGTH equal to one design pixel at the current
   rendered width. Internals are written `calc(N * var(--u))` — a number times
   a length — never `calc(Npx * var(--u))`, which would be px x px and invalid.

     design width 268px  ->  --u = 100cqw / 268 = 0.3731cqw

   Without container-query support `--u` falls back to 1px, i.e. the phone
   renders at its intrinsic 268 x 560 design size. Nothing breaks.

   Callers set the SIZE by constraining the container (see components.css),
   never by overriding --u.
   ═══════════════════════════════════════════════════════════════════════════ */

.lv-phone {
  width: 100%;
  margin: 0;
  container-type: inline-size;
}

.lv-phone .lv-frame {
  --u: 1px; /* fallback: intrinsic design size */
  position: relative;
  width: 100%;
  aspect-ratio: 268 / 560;
  border-radius: calc(38 * var(--u));
  background: var(--bg);
  border: calc(7 * var(--u)) solid var(--card-hi);
  box-shadow: var(--elev-3), inset 0 0 0 1px var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

@supports (container-type: inline-size) {
  .lv-phone .lv-frame {
    --u: 0.3731cqw; /* 100cqw / 268 */
  }
}

.lv-phone .lv-notch {
  position: absolute;
  top: calc(7 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(76 * var(--u));
  height: calc(18 * var(--u));
  border-radius: var(--r-pill);
  background: var(--card-hi);
  z-index: 3;
}

.lv-phone .lv-status {
  display: flex;
  justify-content: space-between;
  padding: calc(11 * var(--u)) calc(16 * var(--u)) calc(3 * var(--u));
  font-family: var(--font-body);
  font-size: calc(10 * var(--u));
  font-weight: 500;
  color: var(--muted);
}

.lv-phone .lv-screen {
  flex: 1;
  min-height: 0;
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  overflow: hidden;
}

.lv-phone .lv-screen--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ── Type ─────────────────────────────────────────────────────────────── */
.lv-eyebrow {
  font-family: var(--font-body);
  font-size: calc(9 * var(--u));
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
  line-height: 1.35;
}

.lv-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(21 * var(--u));
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

.lv-title--lg {
  font-size: calc(27 * var(--u));
}

.lv-sub {
  font-family: var(--font-body);
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.lv-mono {
  font-family: var(--font-mono);
  font-size: calc(11 * var(--u));
  color: var(--muted);
  margin: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.lv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  min-height: calc(46 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--primary-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(13 * var(--u));
  letter-spacing: -0.005em;
}

.lv-btn svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  flex: none;
}

.lv-btn--ghost {
  background: transparent;
  color: var(--primary);
  min-height: calc(36 * var(--u));
}

.lv-btn--outline {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.lv-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-family: var(--font-body);
  font-size: calc(9 * var(--u));
  font-weight: 600;
  padding: calc(5 * var(--u)) calc(9 * var(--u));
  border-radius: var(--r-pill);
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.2;
}

.lv-badge i {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.lv-badge--ok {
  background: var(--primary-muted);
  border-color: var(--primary);
  color: var(--primary);
}
.lv-badge--info {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}
.lv-badge--warn {
  background: var(--warning-muted);
  border-color: var(--warning);
  color: var(--warning);
}
.lv-badge--err {
  background: var(--danger-muted);
  border-color: var(--danger);
  color: var(--danger);
}
.lv-badge--neutral {
  background: var(--card-hi);
  border-color: var(--border);
  color: var(--muted);
}

/* ── Rows & cards ─────────────────────────────────────────────────────── */
.lv-row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--elev-1);
}

.lv-row .lv-av {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: var(--r-1);
  background: var(--card-hi);
  display: grid;
  place-items: center;
  color: var(--muted);
  flex: none;
}

.lv-row .lv-av svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}

.lv-row .lv-rowbody {
  min-width: 0;
  flex: 1;
  display: block;
}

.lv-row .lv-t {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(12 * var(--u));
  line-height: 1.35;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lv-row .lv-s {
  display: block;
  font-family: var(--font-body);
  font-size: calc(10 * var(--u));
  line-height: 1.4;
  color: var(--muted);
}

.lv-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: calc(12 * var(--u));
  box-shadow: var(--elev-1);
}

.lv-card--attn {
  border-color: var(--warning);
}

/* Current vs Proposed — recognition, not recall */
.lv-compare {
  display: flex;
  gap: calc(7 * var(--u));
  margin-top: calc(8 * var(--u));
}

.lv-compare > div {
  flex: 1;
  min-width: 0;
  border-radius: calc(9 * var(--u));
  padding: calc(8 * var(--u));
}

.lv-compare .lv-now {
  background: var(--card-hi);
}

.lv-compare .lv-next {
  background: var(--primary-muted);
  border: 1px solid var(--primary);
}

.lv-compare .lv-ck {
  font-family: var(--font-body);
  font-size: calc(8 * var(--u));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: calc(3 * var(--u));
}

.lv-compare .lv-next .lv-ck {
  color: var(--primary);
}

.lv-compare .lv-cv {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(11 * var(--u));
  color: var(--text);
}

.lv-compare .lv-now .lv-cv {
  color: var(--muted);
}

/* ── Banner ───────────────────────────────────────────────────────────── */
.lv-banner {
  display: flex;
  gap: calc(9 * var(--u));
  align-items: flex-start;
  padding: calc(10 * var(--u));
  border-radius: var(--r-2);
  border: 1px solid var(--warning);
  background: var(--warning-muted);
}

.lv-banner .lv-bi {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background: var(--warning);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

.lv-banner .lv-bi svg {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}

.lv-banner b {
  display: block;
  font-family: var(--font-body);
  font-size: calc(11 * var(--u));
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.lv-banner span {
  display: block;
  font-family: var(--font-body);
  font-size: calc(10 * var(--u));
  line-height: 1.4;
  color: var(--muted);
}

/* ── Faux input ───────────────────────────────────────────────────────── */
.lv-field {
  display: flex;
  align-items: center;
  min-height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: var(--r-2);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: calc(11 * var(--u));
  color: var(--muted);
}

/* ── The mic ──────────────────────────────────────────────────────────── */
.lv-micwrap {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: calc(126 * var(--u));
  height: calc(126 * var(--u));
}

.lv-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.16;
  z-index: 0;
}

.lv-micwrap--rec .lv-halo {
  background: var(--danger);
}

.lv-mic {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-text);
  display: grid;
  place-items: center;
  align-content: center;
  gap: calc(6 * var(--u));
  box-shadow: var(--halo);
}

.lv-mic svg {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
}

.lv-mic span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(12 * var(--u));
}

.lv-mic--rec {
  background: var(--danger);
  color: var(--danger-text);
}

.lv-timer {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(36 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ── Waveform ─────────────────────────────────────────────────────────── */
.lv-wave {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  height: calc(28 * var(--u));
}

.lv-wave i {
  width: calc(3 * var(--u));
  height: 30%;
  border-radius: var(--r-pill);
  background: var(--danger);
  opacity: 0.85;
}

/* ── Progress & steps ─────────────────────────────────────────────────── */
.lv-progress {
  height: calc(5 * var(--u));
  border-radius: var(--r-pill);
  background: var(--card-hi);
  overflow: hidden;
  width: 100%;
}

.lv-progress > i {
  display: block;
  height: 100%;
  width: 64%;
  border-radius: var(--r-pill);
  background: var(--primary);
}

.lv-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  text-align: left;
}

.lv-step {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-family: var(--font-body);
  font-size: calc(11 * var(--u));
  color: var(--faint);
}

.lv-step svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  flex: none;
}

.lv-step--done {
  color: var(--primary);
  font-weight: 500;
}
.lv-step--active {
  color: var(--warning);
  font-weight: 600;
}

/* ── Success mark ─────────────────────────────────────────────────────── */
.lv-mark {
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-text);
  display: grid;
  place-items: center;
  box-shadow: var(--halo);
  flex: none;
}

.lv-mark svg {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
}

.lv-mark--soft {
  background: var(--primary-muted);
  color: var(--primary);
  box-shadow: none;
}

/* App icon on a mockup's login screen — scales with the phone like
   everything else, rather than sitting at a fixed pixel size. */
.lv-phone .lv-applogo {
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  border-radius: calc(13 * var(--u));
  flex: none;
}

/* ── Brand row ────────────────────────────────────────────────────────── */
.lv-brandrow {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

/* Scoped under .lv-phone so a stray legacy `.wrapper img { width: 100% }`
   can never inflate a logo inside a mockup. */
.lv-phone .lv-brandrow img {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: calc(7 * var(--u));
  flex: none;
}

.lv-brandrow b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(16 * var(--u));
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── Utilities ────────────────────────────────────────────────────────── */
.lv-spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.lv-stack {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}
.lv-push {
  margin-top: auto;
}
.lv-chiprow {
  display: flex;
  gap: calc(6 * var(--u));
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Caption under a mockup ───────────────────────────────────────────────
   Deliberately in rem, NOT --u: captions should read at the same size in
   every section even though the phones above them differ in width.        */
.lv-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.lv-caption .lv-num {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--primary-muted);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  flex: none;
}