/* ============================================================
   YelloGem — In-phone mock app screens (placeholders until
   real screenshots are dropped in)
   ============================================================ */

.ui-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(130% 70% at 50% -8%, var(--ink-3), var(--ink-1) 64%);
  color: var(--tx);
  font-family: var(--f-body);
  overflow: hidden;
}
.ui-screen * { box-sizing: border-box; }

.ui-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7% 9% 2%;
  font-family: var(--f-mono); font-size: 0.46rem; letter-spacing: 0.04em;
  color: var(--tx-mut);
}
.ui-status .ui-dots { display: flex; gap: 3px; align-items: center; }
.ui-status .ui-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--tx-dim); }
.ui-status .ui-dots i:last-child { width: 14px; border-radius: 3px; background: var(--tx-mut); }

.ui-pad { flex: 1; padding: 4% 9% 0; display: flex; flex-direction: column; gap: 5%; min-height: 0; }

.ui-top { display: flex; align-items: center; gap: 6px; }
.ui-mark { width: 13px; height: 13px; flex: none; }
.ui-app { font-family: var(--f-display); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.02em; }
.ui-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 0.4rem; letter-spacing: 0.12em;
  color: var(--gem); text-transform: uppercase;
}
.ui-live::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--gem); }

.ui-hero { line-height: 1; }
.ui-hero b { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; display: block; }
.ui-hero b span { color: var(--gem); font-size: 0.6em; }
.ui-hero small { font-family: var(--f-mono); font-size: 0.42rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-mut); }

.ui-rows { display: flex; flex-direction: column; gap: 5px; }
.ui-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 9px; border-radius: 9px; background: rgba(246,246,244,0.045);
  border: 1px solid var(--line-2);
  font-size: 0.5rem;
}
.ui-row span { color: var(--tx-mut); }
.ui-row em {
  font-family: var(--f-mono); font-style: normal; font-size: 0.42rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px;
}
.ui-row em.open { color: var(--gem); background: var(--gem-soft); }
.ui-row em.hold { color: var(--tx-mut); background: rgba(246,246,244,0.06); }

/* QR */
.ui-qr { width: 46%; aspect-ratio: 1; align-self: center; }
.ui-qr rect { fill: var(--tx); }

/* signature card (boarding pass / ticket) */
.ui-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 9%;
  background: linear-gradient(160deg, rgba(246,246,244,0.06), transparent);
  display: flex; flex-direction: column; gap: 9px; align-items: center; text-align: center;
}
.ui-card .ui-ttl { font-family: var(--f-display); font-weight: 700; font-size: 0.8rem; letter-spacing: -0.01em; }
.ui-card .ui-meta { display: flex; gap: 10px; font-family: var(--f-mono); font-size: 0.4rem; letter-spacing: 0.06em; color: var(--tx-mut); text-transform: uppercase; }
.ui-dash { width: 100%; border-top: 1px dashed var(--line); }

/* map / route */
.ui-art { flex: 1; min-height: 0; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(246,246,244,0.025); position: relative; overflow: hidden; }
.ui-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-art .pin { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gem); box-shadow: 0 0 0 3px var(--gem-soft); }

/* progress bars */
.ui-bars { display: flex; flex-direction: column; gap: 7px; }
.ui-bar { display: flex; flex-direction: column; gap: 3px; }
.ui-bar .lab { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 0.4rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-mut); }
.ui-bar .trk { height: 4px; border-radius: 3px; background: rgba(246,246,244,0.08); overflow: hidden; }
.ui-bar .trk i { display: block; height: 100%; background: var(--gem); border-radius: 3px; }

/* floor plan grid */
.ui-floor { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; min-height: 0; }
.ui-floor i { border-radius: 6px; border: 1px solid var(--line-2); background: rgba(246,246,244,0.03); }
.ui-floor i.busy { background: var(--gem); border-color: var(--gem); }
.ui-floor i.hold { background: rgba(246,246,244,0.12); }

/* tab bar */
.ui-tabs {
  margin-top: auto; display: flex; justify-content: space-around; align-items: center;
  padding: 6% 9% 8%; border-top: 1px solid var(--line-2);
}
.ui-tabs i { width: 16px; height: 4px; border-radius: 3px; background: var(--tx-dim); }
.ui-tabs i.on { background: var(--gem); }

/* back-phone screens get a touch dimmer treatment via parent */
.phone.back .ui-screen { filter: saturate(0.85); }