/* The iPhone web app: the big trip view (js/glance.js), the Glance button, the notification card and Me › On the web app (js/webapp.js). */
.ride-full.ride-glance { left: auto; right: 12px; }
.wp-ask b { font-size: var(--fs-body); }
.wa-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--fs-sub); line-height: 1.45; }
.wa-list li { padding: 3px 0 3px 0; color: var(--text-2, var(--text)); }

/* Always dark with big type: it has to read in the sun, from an arm's length, whatever the theme. */
/* (v115) div.glance, not .glance: the trip card's "Big view" pill is <button class="mo-pill glance"> (moments.js), and took all of this:
   on Isaac's 384 trip it was a giant black oval over the sheet */
div.glance { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: #000; color: #fff;
  padding: calc(var(--safe-top, 0px) + 16px) 22px calc(var(--safe-bot, 0px) + 18px); font-family: system-ui, -apple-system, "SF Pro Rounded", sans-serif; animation: gl-in .2s ease-out both; }
.glance .gl-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.glance .gl-top { padding-top: 44px; }
.glance .gl-kick { display: block; font-size: var(--fs-title3); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FFD60A; }
.glance .gl-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 0; }
.glance .gl-count { display: flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; line-height: .9; }
.glance .gl-count span { font-size: clamp(96px, 34vw, 190px); font-weight: 800; letter-spacing: -.04em; }
.glance .gl-count small { font-size: clamp(28px, 9vw, 48px); font-weight: 700; color: #cfcfcf; }
.glance .gl-count.now span { font-size: clamp(72px, 24vw, 140px); color: #FFD60A; }
.glance .gl-word { font-size: clamp(26px, 8vw, 40px); font-weight: 700; line-height: 1.15; color: #eaeaea; }
.glance .gl-stop { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.glance .gl-num { align-self: flex-start; font-size: clamp(30px, 10vw, 52px); font-weight: 800; color: #000; background: #fff; border-radius: 12px; padding: 2px 14px; letter-spacing: .01em; }
.glance .gl-name { font-size: clamp(30px, 9vw, 46px); font-weight: 800; line-height: 1.1; }
.glance .gl-line { font-size: var(--fs-title3); font-weight: 600; color: #cfcfcf; }
.glance .gl-accuracy { align-self: flex-start; border: 1px solid #b0b0b0; border-radius: 999px; padding: 5px 10px; color: #fff; font-size: 14px; font-weight: 700; }
.glance .gl-dest { color: #cfcfcf; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.glance .gl-foot { font-size: var(--fs-sub); color: #9a9a9a; text-align: center; padding-top: 10px; }
.glance .gl-close { position: absolute; top: calc(var(--safe-top, 0px) + 10px); right: 14px; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 2px solid #fff; background: transparent; color: #fff; font: 700 17px system-ui, sans-serif; }
.glance .gl-close:active { background: #fff; color: #000; }
@keyframes gl-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { div.glance { animation: none; } }