/* Raadish: pieces of the app at their real size on the page, and the live
   details' own parts. What was left of the brand sprint's design-page sheet
   (round 5) once the design page's sections were taken out. */

/* A piece of the app at its real size, scaled down only when it must (pages.js, fit) */
.fit { position: relative; width: 100%; }
.fit-in { width: var(--w, 402px); transform: scale(var(--k, 1)); transform-origin: 0 0; }
.fit-in > .app, .lv .app { position: relative; width: auto; height: auto; border-radius: 0; overflow: visible; }
.app.frag-app { padding: 4px 0 12px; }

/* Live details: the card is the app's ground */
.s-live .fit { left: 1px; right: 1px; top: 1px; }
.s-live .app.frag-app { background: transparent; }
.s-live[data-live="plant"], .s-live[data-live="finish"] { background: #F2F3EE; }
.s-live .lv-pop { position: absolute; right: 4px; bottom: -8px; width: 120px; height: 120px; z-index: 3; }

/* A page that names land on: a place's card, its count going up */
.lv-pages { display: grid; gap: 8px; margin: 14px 16px 0; }
.lv-pg { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--a-card); box-shadow: 0 0 0 1px var(--a-sep), 0 6px 14px -10px rgba(0, 0, 0, .3); max-width: 300px; font-size: 17px; letter-spacing: -.43px; }
.lv-pg .pic { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.lv-pg b { font-weight: 600; } .lv-pg span { margin-left: auto; font: 600 15px/1 var(--f-sf); color: var(--a-mute); font-variant-numeric: tabular-nums; } .lv-pg span.up { color: var(--a-acc); animation: bump .5s var(--spr-bounce, ease); }
@keyframes bump { 40% { transform: scale(1.35); } }