/* ═══════════════════════════════════════════════════════════════
   THE PHONE — one chassis, six screens.
   The bezel is a border (not a background) so the viewport is a true
   window: when the map screen is active the stack fades and the
   .map-bleed layer behind the phone shows through the bezel.
═══════════════════════════════════════════════════════════════ */

.phone {
  width: var(--phone-w, 297px);
  height: var(--phone-h, 640px);
  position: relative;
}

.phone-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 10px solid #0b1220;
  border-radius: 46px;
  background: transparent;
  box-shadow:
    0 30px 80px -20px rgba(2, 6, 23, 0.35),
    0 8px 24px rgba(2, 6, 23, 0.16);
}
/* Side buttons */
.phone-frame::before,
.phone-frame::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #0b1220;
}
.phone-frame::before { right: -13px; top: 128px; height: 62px; }  /* power */
.phone-frame::after  { left: -13px;  top: 104px; height: 88px; }  /* volume */

.phone-island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 22px;
  border-radius: 999px;
  background: #020617;
  z-index: 40;
}

.phone-viewport {
  position: absolute;
  inset: 0;
  border-radius: 36px;
  overflow: hidden;
  background: transparent;
}
/* Glass-edge ring, painted above whatever is on screen */
.phone-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 36px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  pointer-events: none;
  z-index: 50;
}

/* ── Screen stack ── */
.screen {
  position: absolute;
  inset: 0;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  overflow: hidden;
}
.screen[data-screen="map"] { background: transparent; }
/* journey.js drives visibility; rates starts visible as the hero pose */
html.js #journey:not(.journey--static) .screen { opacity: 0; visibility: hidden; }
html.js #journey:not(.journey--static) .screen[data-screen="rates"] { opacity: 1; visibility: visible; }

/* Shared status bar */
.scr-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 0;
  height: 32px;
  font-size: 11px;
  font-weight: 650;
  color: var(--ink-primary);
  flex-shrink: 0;
}
.scr-status .st-batt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-600);
}
.st-batt i {
  width: 17px;
  height: 9px;
  border: 1px solid var(--ink-400);
  border-radius: 3px;
  position: relative;
}
.st-batt i::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  right: 4.5px;
  background: var(--ink-700);
  border-radius: 1px;
}

/* Shared mini nav row */
.scr-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px;
  flex-shrink: 0;
}
.scr-back {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-600);
  font-size: 14px;
}
.scr-back .ic { transform: rotate(180deg); }
.scr-nav-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═════════════ SCREEN 1 — RATES (Market) ═════════════ */
.scr-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 18px 12px;
  flex-shrink: 0;
}
.scr-head h4 {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink-display);
  line-height: 1.1;
}
.scr-head .sh-sub {
  font-size: 10px;
  font-weight: 550;
  color: var(--ink-tertiary);
  margin-top: 3px;
}

.rate-rows {
  flex: 1;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
}
.rate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-btn);
  padding: 9px 12px;
  flex-shrink: 0;
}
.rr-sym {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--cb-blue-700);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.rr-name { flex: 1; min-width: 0; overflow: hidden; }
.rr-cur {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-label {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-quaternary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-px { text-align: right; flex-shrink: 0; }
.rr-rate {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-primary);
  line-height: 1.2;
}
.rr-chg {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
}
.rr-chg.up   { color: var(--trade-buy-ink); }
.rr-chg.down { color: var(--trade-sell-ink); }
.rate-row.closed { opacity: 0.55; }

.scr-tabbar {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 7px 6px 12px;
  flex-shrink: 0;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 650;
  color: var(--ink-quaternary);
  position: relative;
}
.tab-item .ic { font-size: 18px; }
.tab-item.active { color: var(--cb-blue-600); }
/* the app's 20px active underline motif */
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--cb-blue-600);
}

/* ═════════════ SCREEN 2 — ORDER + RATE LOCK ═════════════ */
.stepper {
  display: flex;
  align-items: flex-start;
  padding: 4px 20px 14px;
  flex-shrink: 0;
}
.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
}
.step-dot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1.6px solid var(--ink-300);
  color: var(--ink-400);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.step.done .step-dot {
  background: var(--cb-blue-600);
  border-color: var(--cb-blue-600);
  color: var(--white);
}
.step.current .step-dot {
  border-color: var(--cb-blue-600);
  color: var(--cb-blue-600);
}
.step-label { font-size: 8px; font-weight: 650; color: var(--ink-quaternary); }
.step.done .step-label,
.step.current .step-label { color: var(--cb-blue-700); }
.step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 9px;
  right: calc(50% + 12px);
  left: calc(-50% + 12px);
  height: 1.6px;
  background: var(--ink-200);
}
.step.done:not(:first-child)::before { background: var(--cb-blue-600); }

.ord-amt {
  margin: 0 16px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-btn);
  padding: 13px 15px;
  flex-shrink: 0;
}
.ord-amt .oa-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 4px;
}
.ord-amt .oa-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  font-weight: 500;
  color: var(--ink-display);
  letter-spacing: -0.01em;
}
.ord-amt .oa-sub {
  font-size: 10.5px;
  font-weight: 550;
  color: var(--ink-tertiary);
  margin-top: 3px;
}

.lock-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 0;
}
.lock-ring { position: relative; width: 104px; height: 104px; }
.lock-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lock-ring .ring-track { stroke: var(--ink-200); }
.lock-ring .ring-fill { stroke: var(--cb-blue-600); stroke-linecap: round; }
.lock-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.lock-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-display);
}
.lock-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.ord-foot {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.ord-cta {
  height: 42px;
  border-radius: var(--rad-btn);
  background: var(--cb-blue-600);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}
.ord-note {
  text-align: center;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-quaternary);
}

/* ═════════════ SCREEN 3 — STATUS TIMELINE ═════════════ */
.tl { padding: 4px 20px; flex: 1; min-height: 0; }
.tl-item { display: flex; gap: 12px; }
.tl-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}
.tl-dot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tl-dot .ic { font-size: 12px; }
.tl-item.done .tl-dot { background: var(--trade-buy-hard); color: var(--white); }
.tl-item.activ .tl-dot {
  background: rgba(245, 158, 11, 0.14);
  color: var(--sys-warn-ink);
  border: 1.6px solid var(--sys-warn-hard);
}
.tl-item.activ .tl-dot .td-core {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sys-warn-hard);
}
.tl-item.next .tl-dot { border: 1.6px solid var(--ink-300); background: var(--bg-surface); }
.tl-line { width: 2px; flex: 1; min-height: 18px; background: var(--ink-200); margin: 3px 0; }
.tl-item.done .tl-line { background: var(--trade-buy-mid); }
.tl-body { padding-bottom: 14px; min-width: 0; }
.tl-title { font-size: 12px; font-weight: 700; color: var(--ink-primary); line-height: 1.45; }
.tl-item.next .tl-title { color: var(--ink-tertiary); font-weight: 600; }
.tl-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-quaternary);
  margin-top: 1px;
}
.tl-cap {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-secondary);
  margin-top: 4px;
}
.status-note {
  margin: 0 16px 16px;
  background: var(--cb-blue-50);
  border: 1px solid var(--cb-blue-100);
  border-radius: var(--rad-btn);
  padding: 11px 13px;
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 550;
  color: var(--cb-blue-800);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-shrink: 0;
}
.status-note .ic { font-size: 14px; margin-top: 1px; flex-shrink: 0; }

/* ═════════════ SCREEN 4 — MAP CHROME (transparent window) ═════════════ */
.map-chrome-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 40px 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(248, 250, 252, 0));
  z-index: 2;
}
.map-order-pill {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-full);
  box-shadow: var(--shadow-sm);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-primary);
}
.map-chrome-top .scr-back { box-shadow: var(--shadow-sm); }
.map-chrome-bot {
  position: absolute;
  bottom: 13px;
  left: 12px;
  right: 12px;
  z-index: 2;
}
.map-status-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.msc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cb-blue-600);
  flex-shrink: 0;
}
.screen.is-active .msc-dot { animation: cbPulse 1.6s var(--ease-in-out) infinite; }
.msc-info { flex: 1; min-width: 0; }
.msc-title { font-size: 11.5px; font-weight: 700; color: var(--ink-primary); line-height: 1.3; }
.msc-sub { font-size: 9.5px; font-weight: 500; color: var(--ink-tertiary); }
.msc-eta {
  background: var(--ink-900);
  color: var(--white);
  border-radius: var(--rad-chip);
  padding: 6px 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  flex-shrink: 0;
}

/* ═════════════ SCREEN 5 — CALL / CHAT ═════════════ */
.screen[data-screen="call"] {
  background:
    repeating-linear-gradient(0deg,  rgba(37, 99, 235, 0.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.035) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #eff6ff 0%, #dceefe 100%);
}
.call-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  gap: 4px;
  flex-shrink: 0;
}
.call-av-wrap { position: relative; width: 66px; height: 66px; margin-bottom: 8px; }
.call-av {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: var(--white);
  font-size: 21px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  position: relative;
  z-index: 1;
}
.call-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cb-blue-500);
  opacity: 0;
}
.screen.is-active .call-ring { animation: callRing 2.2s ease-out infinite; }
.screen.is-active .call-ring.r2 { animation-delay: 0.7s; }
@keyframes callRing {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.75); opacity: 0; }
}
.call-name { font-size: 15px; font-weight: 700; color: var(--ink-display); }
.call-role { font-size: 10px; font-weight: 550; color: var(--ink-tertiary); }
.call-timer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-600);
  margin-top: 5px;
}
.call-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 18px;
  margin-top: 8px;
}
.call-wave span {
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--cb-blue-500);
  transform: scaleY(0.35);
  transform-origin: center;
}
.screen.is-active .call-wave span { animation: waveBar 1.1s var(--ease-in-out) infinite; }
.screen.is-active .call-wave span:nth-child(2) { animation-delay: 0.15s; }
.screen.is-active .call-wave span:nth-child(3) { animation-delay: 0.3s; }
.screen.is-active .call-wave span:nth-child(4) { animation-delay: 0.1s; }
.screen.is-active .call-wave span:nth-child(5) { animation-delay: 0.25s; }
@keyframes waveBar {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}
.call-secure { margin-top: 10px; }

.call-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 12px 14px;
  min-height: 0;
}
.glass-pill {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-sm);
  border-radius: 12px 12px 12px 4px;
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 550;
  color: var(--ink-800);
  align-self: flex-start;
  max-width: 78%;
}
.glass-pill.sent {
  background: var(--cb-blue-600);
  border-color: var(--cb-blue-600);
  color: var(--white);
  border-radius: 12px 12px 4px 12px;
  align-self: flex-end;
}
.call-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 0 22px;
  flex-shrink: 0;
}
.ca-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  color: var(--ink-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.ca-btn.end {
  width: 50px;
  height: 50px;
  background: var(--trade-sell-hard);
  border-color: var(--trade-sell-hard);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
  font-size: 21px;
}
.ca-btn.end .ic { transform: rotate(135deg); }

/* ═════════════ SCREEN 6 — SETTLED ═════════════ */
.done-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  text-align: center;
}
.done-disc {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--trade-buy-hard);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.32);
  margin-bottom: 4px;
}
.done-h { font-size: 16.5px; font-weight: 750; letter-spacing: -0.015em; color: var(--ink-display); }
.done-cap { font-size: 11px; line-height: 1.55; color: var(--ink-secondary); max-width: 210px; }
.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink-100);
  border-radius: var(--rad-chip);
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-600);
  margin-top: 6px;
  white-space: nowrap;
}
.inv-chip .ic { font-size: 13px; }
.done-stars {
  display: flex;
  gap: 5px;
  color: var(--sys-warn-hard);
  font-size: 21px;
  margin-top: 10px;
}
.done-stars .ic { opacity: 0; transform: scale(0.4); }
/* journey.js pops these on scrub; static/no-JS shows them via fallback */
html:not(.js) .done-stars .ic,
.journey--static .done-stars .ic { opacity: 1; transform: none; }
.done-rate-cap {
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-quaternary);
}

/* ── Static-mode screen clones inside beat cards ── */
.beat-shot .screen {
  position: static;
  opacity: 1 !important;
  visibility: visible !important;
  width: min(250px, 100%);
  height: 400px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}
.beat-shot .screen[data-screen="map"] { background: #f0f4f8; }

/* ── Narrow-phone screen compaction ──
   On mobile viewports the chassis screen is only ~180-230px wide and can be
   as short as ~340px (iPhone SE with Safari chrome). Every screen's stack is
   budgeted to fit that: verified against real-device screenshots where the
   countdown ring overlapped the amount card and the call pills overflowed
   onto the timer. */
@media (max-width: 960px) {
  .phone-island { width: 56px; height: 16px; top: 7px; }
  .scr-status { padding: 8px 13px 0; height: 22px; font-size: 9.5px; }
  .scr-status .st-batt { font-size: 8.5px; gap: 3px; }
  .st-batt i { width: 14px; height: 8px; }

  /* rates */
  .scr-head { padding: 6px 13px 8px; }
  .scr-head h4 { font-size: 15px; }
  .scr-head .sh-sub { font-size: 8.5px; white-space: nowrap; margin-top: 2px; }
  .scr-head .chip { font-size: 9px; padding: 3px 7px; }
  .rate-rows { padding: 0 9px; gap: 5px; }
  .rate-row { padding: 6px 8px; gap: 7px; border-radius: 10px; }
  .rr-sym { width: 25px; height: 25px; font-size: 7px; border-radius: 8px; }
  .rr-cur { font-size: 10.5px; }
  .rr-label { font-size: 8px; }
  .rr-rate { font-size: 10px; }
  .rr-chg { font-size: 8px; }
  .scr-tabbar { padding: 5px 4px 9px; }
  .tab-item { font-size: 7.5px; gap: 2px; }
  .tab-item .ic { font-size: 15px; }
  .tab-item.active::after { bottom: -5px; width: 16px; height: 2px; }

  /* shared nav row */
  .scr-nav { padding: 6px 10px; gap: 8px; }
  .scr-nav-title { font-size: 11.5px; }
  .scr-back { width: 22px; height: 22px; font-size: 12px; }
  /* The chip duplicated state the timeline + beat already carry, and it
     crushed the title to "#…" on device — drop it inside the tiny screen. */
  .scr-nav .chip { display: none; }

  /* order + rate lock — the ring must NEVER collide with the amount card */
  .stepper { padding: 0 12px 6px; }
  .step-dot { width: 15px; height: 15px; font-size: 7.5px; border-width: 1.4px; }
  .step-dot .ic { font-size: 9px; }
  .step:not(:first-child)::before { top: 7px; right: calc(50% + 9px); left: calc(-50% + 9px); height: 1.4px; }
  .step-label { font-size: 6.5px; gap: 3px; }
  .ord-amt { margin: 0 10px 6px; padding: 7px 10px; }
  .ord-amt .oa-label { font-size: 7.5px; margin-bottom: 2px; }
  .ord-amt .oa-val { font-size: 15px; }
  .ord-amt .oa-sub { font-size: 8px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lock-wrap { gap: 5px; padding: 2px 0; overflow: hidden; }
  .lock-ring { width: 68px; height: 68px; }
  .lock-ring svg circle { stroke-width: 7; }
  .lock-time { font-size: 11.5px; }
  .lock-label { font-size: 6.5px; }
  /* the beat's meta chip already shows the locked rate */
  .lock-wrap .chip { display: none; }
  .ord-foot { padding: 0 10px 12px; gap: 4px; }
  .ord-cta { height: 30px; font-size: 10px; border-radius: 9px; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.24); }
  .ord-note { display: none; }

  /* status timeline — centred, tight rows */
  .tl { padding: 0 12px; display: flex; flex-direction: column; justify-content: center; }
  .tl-item { gap: 9px; }
  .tl-rail { width: 16px; }
  .tl-dot { width: 16px; height: 16px; border-width: 1.4px; }
  .tl-dot .ic { font-size: 10px; }
  .tl-item.activ .tl-dot .td-core { width: 6px; height: 6px; }
  .tl-line { min-height: 9px; margin: 2px 0; }
  .tl-body { padding-bottom: 8px; }
  .tl-title { font-size: 10.5px; }
  .tl-time { font-size: 8.5px; }
  .tl-cap { font-size: 9px; margin-top: 2px; }
  .status-note { margin: 0 10px 10px; padding: 7px 9px; font-size: 8.5px; gap: 6px; border-radius: 10px; }
  .status-note .ic { font-size: 11px; }

  /* map window — thinner scrim so the flooded map reads through, and the
     in-phone status card stays hidden (the stage narrates instead) */
  .map-chrome-top { padding: 28px 10px 14px; background: linear-gradient(180deg, rgba(248, 250, 252, 0.55), rgba(248, 250, 252, 0)); }
  .map-order-pill { font-size: 8.5px; padding: 4px 9px; }
  .map-chrome-bot { display: none; }

  /* call — budget: top ~150px, chat ~80px, actions ~62px */
  .call-top { padding-top: 16px; gap: 3px; }
  .call-av-wrap, .call-av { width: 44px; height: 44px; }
  .call-av { font-size: 15px; }
  .call-name { font-size: 12.5px; }
  .call-role { font-size: 8.5px; }
  .call-timer { font-size: 9px; margin-top: 3px; }
  .call-wave { height: 11px; margin-top: 4px; gap: 2px; }
  .call-wave span { width: 2px; height: 9px; }
  .call-secure { margin-top: 6px; font-size: 8.5px; padding: 3px 7px; gap: 4px; }
  .call-secure .ic { font-size: 10px; }
  .call-chat { padding: 6px 10px; gap: 5px; min-height: 0; overflow: hidden; }
  .glass-pill { font-size: 9px; padding: 5px 8px; border-radius: 10px 10px 10px 3px; max-width: 84%; }
  .glass-pill.sent { border-radius: 10px 10px 3px 10px; }
  .call-actions { padding: 3px 0 13px; gap: 13px; }
  .ca-btn { width: 30px; height: 30px; font-size: 13px; }
  .ca-btn.end { width: 40px; height: 40px; font-size: 16px; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.30); }

  /* done */
  .done-wrap { gap: 6px; padding: 0 14px; }
  .done-disc { width: 44px; height: 44px; font-size: 23px; margin-bottom: 2px; }
  .done-h { font-size: 13.5px; }
  .done-cap { font-size: 9.5px; max-width: 180px; }
  .inv-chip { font-size: 8.5px; padding: 4px 8px; margin-top: 3px; }
  .inv-chip .ic { font-size: 10px; }
  .done-stars { font-size: 17px; gap: 4px; margin-top: 6px; }
  .done-rate-cap { font-size: 8px; }
}