/* What the Android app gained after the first web port (Oct 2026): order cards, the cane card, the live order card,
   the press scene on the order page, skeletons, the most-ordered row, the pour into the bag and the weather flip. */

/* skeleton sheen (ui/Skeleton.kt) */
.bone { background: linear-gradient(100deg, rgba(245,231,207,.06) 30%, rgba(245,231,207,.16) 50%, rgba(245,231,207,.06) 70%) 0 0 / 300% 100%; animation: sheen 1.3s linear infinite; border-radius: 18px }
.bone.paper { background-color: #E7DCC6; background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%) }
@keyframes sheen { from { background-position: 100% 0 } to { background-position: -200% 0 } }
.skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px }
.skel-grid .bone { aspect-ratio: 4 / 6.2 }

/* menu tiles rise in, one after another (Menu.kt) */
.grid .tile { animation: rise .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms) }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97) } }

/* most ordered row */
.popular { margin: 18px 0 4px }
.popular h3 { font-size: 13px; letter-spacing: .1em; color: var(--yellow); margin: 0 0 10px }
.popular .row-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px }
.popular .row-scroll::-webkit-scrollbar { display: none }
.popular button { flex: none; display: flex; align-items: center; gap: 10px; background: var(--bg2); border-radius: 14px; padding: 6px 14px 6px 6px; color: var(--cream); font-weight: 600; font-size: 14px }
.popular img { width: 44px; height: 55px; object-fit: cover; border-radius: 10px }

/* the pour: a drop of the drink's colour flies from + into the bag */
.pour-drop { position: fixed; z-index: 90; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; pointer-events: none; transform: rotate(-45deg) }
.bump { animation: bump .36s ease }
@keyframes bump { 40% { transform: scale(1.18) } }

/* live order card on Home */
.livecard { position: fixed; left: 16px; right: 16px; bottom: calc(96px + var(--bottom, 0px)); z-index: 30; display: flex; align-items: center; gap: 12px; background: var(--yellow); color: var(--ink); border-radius: 18px; padding: 10px 14px 10px 10px; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: rise .5s cubic-bezier(.2,.8,.2,1) both }
.livecard svg { width: 64px; height: 44px; flex: none; border-radius: 10px; background: #0C4A33 }
.livecard b { display: block; font-size: 15px; letter-spacing: .04em }
.livecard span { font-size: 13px; color: #3F4A3A }
.livecard i { margin-left: auto; font-style: normal; font-weight: 900; font-size: 20px }
.livecard .x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.08); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer }
@media (min-width: 900px) { .livecard { left: auto; width: 380px; bottom: 24px } }

/* the wordmark that turns over to show the weather (Home.kt FlipMark) */
.flipmark { perspective: 600px; height: 36px; display: flex; align-items: center }
.flipmark .in { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4,0,.2,1); height: 36px; display: flex; align-items: center }
.flipmark.turned .in { transform: rotateX(180deg) }
.flipmark .front, .flipmark .backside { backface-visibility: hidden; display: flex; align-items: center }
.flipmark .backside { position: absolute; left: 0; top: 0; height: 36px; transform: rotateX(180deg); white-space: nowrap; color: var(--cream); font-size: 15px; gap: 6px; background: none; border: 0; padding: 0 }
.flipmark .backside b { font-weight: 900; font-size: 16px }

/* press scene on the order page (ui/Making.kt): a side view of the crusher */
.making { background: #0C4A33; border-radius: 20px; padding: 14px 14px 10px; margin: 14px 0 }
.making svg { width: 100%; height: auto; display: block }
.making .stepper { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: var(--cream-mute) }
.making .stepper .on { color: var(--yellow) }
.making .pressed { text-align: center; color: var(--cream); font-size: 13px; margin-top: 6px; letter-spacing: .06em }
.mk-roll { transform-box: fill-box; transform-origin: center; animation: spin 1.2s linear infinite }
.mk-roll.rev { animation-direction: reverse }
@keyframes spin { to { transform: rotate(360deg) } }
.mk-cane { animation: feed 2.6s linear infinite }
@keyframes feed { from { transform: translate(34px, -22px) } to { transform: translate(-6px, 4px) } }
.mk-stream { animation: drip .5s linear infinite }
@keyframes drip { 50% { opacity: .65 } }
.mk-fill { transform-box: fill-box; transform-origin: bottom; animation: fill 4s ease-in-out infinite }
@keyframes fill { from { transform: scaleY(.15) } to { transform: scaleY(1) } }
.mk-swirl { transform-box: fill-box; transform-origin: center; animation: spin .7s linear infinite }
.mk-cap { animation: cap .6s cubic-bezier(.3,1.4,.5,1) .3s both }
@keyframes cap { from { transform: translateY(-26px); opacity: 0 } }
.still .mk-roll, .still .mk-cane, .still .mk-stream, .still .mk-fill, .still .mk-swirl, .still .mk-cap { animation: none }

/* order cards on Profile (Profile.kt) */
.ocard { display: block; background: var(--paper, #fff); border-radius: 16px; padding: 12px 14px; margin: 10px 0 0; text-decoration: none; color: var(--ink); border: 1.5px solid #E7DCC6 }
.ocard .ohead { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.ocard .when { font-size: 12px; color: var(--ink-mute); margin-top: 2px }
.ocard .ol { display: flex; align-items: center; gap: 10px; padding: 6px 0 0 }
.ocard .ol img, .ocard .ol .noimg { width: 34px; height: 42px; border-radius: 8px; object-fit: cover; background: #E7DCC6; flex: none }
.ocard .ol span { flex: 1; font-size: 14px }
.ocard .more { font-size: 12px; font-weight: 900; letter-spacing: .06em; color: var(--ink-mute); padding-top: 6px }
.ocard .foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #D8CDB6; font-weight: 900 }
.morelink { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; font-weight: 900; letter-spacing: .06em; color: var(--bg); background: #EFE5D0; border: 0 }
.hint { font-size: 12px; color: var(--ink-mute); margin: -6px 0 6px }

/* "Your cane" card (CaneMeter.kt) */
.canecard { background: var(--bg2); color: var(--cream); border-radius: 22px; padding: 16px 18px }
.canecard .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px }
.canecard .hd b { color: var(--yellow); letter-spacing: .06em }
.canecard .week { display: flex; align-items: center; margin-top: 12px; gap: 6px }
.canecard .week > span { width: 78px; font-size: 12px; font-weight: 900; color: var(--cream-mute); flex: none }
.canecard .days { display: flex; justify-content: space-between; flex: 1 }
.canecard .days i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; color: var(--cream-mute); background: rgba(245,231,207,.12) }
.canecard .days i.on { background: var(--yellow); color: var(--ink) }
.canecard .days i.future { background: none }
.canecard .days i.today { box-shadow: 0 0 0 1.5px var(--cream) }
.canecard .wk { color: var(--yellow); font-size: 12px; margin-top: 8px }

@media (prefers-reduced-motion: reduce) {
  .grid .tile, .livecard, .bone { animation: none }
  .flipmark .in { transition: none }
}

/* a Completed badge: its own class, since .done is the full-screen Placed page (it covered the whole Profile) */
.status.ok { background: #D8E8DD }