/* Hill City Express: screen pieces that predate the Snowlight components.

   Markup that app.js still emits on screens not yet converted, restyled in Snowlight tokens so no
   screen wears the old pine, cream and slab type. Every rule is scoped to its own class: nothing
   here styles a shared component (.btn, .card, .note, .row, .tab, .ticket, .toast, .sheet live in
   app/ui.css). Grouped by the lane that owns the screen; when a lane rebuilds a screen in its own
   app/s-*.css, the matching block here can go. */

/* ============================== Plan (trip lane) ============================== */

/* The reveal: two wax seals, his star and her heart, break to open the plan */
.reveal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 18px 0 2px; }
.reveal .lede { max-width: 30ch; }
.reveal .btn { max-width: 360px; }

/* The conductor's coin: the train on one face, the cup on the other */

.coin { position: relative; display: inline-block; flex: none; width: 46px; height: 46px; transform-style: preserve-3d; }

.coin .face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--gold); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.coin .face svg { width: 62%; height: 62%; }
.coin .back { transform: rotateY(180deg); }
.coin.show-back { transform: rotateY(180deg); }
.coin.flip-standard { animation: hce-coin-a 1.25s cubic-bezier(.3, .7, .4, 1) both; }
.coin.flip-first { animation: hce-coin-b 1.25s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes hce-coin-a { 0% { transform: translateY(0) rotateY(0); } 45% { transform: translateY(-48px) rotateY(900deg); } 100% { transform: translateY(0) rotateY(1800deg); } }
@keyframes hce-coin-b { 0% { transform: translateY(0) rotateY(0); } 45% { transform: translateY(-48px) rotateY(990deg); } 100% { transform: translateY(0) rotateY(1980deg); } }

/* ============================== Trip days (trip lane) ============================== */

/* The drawing on its own, as a rounded panel */
.screen > .window { aspect-ratio: 400 / 250; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 0 0 1px var(--edge); --art-ground: var(--art-snow); }

.road .wrap { margin-top: 4px; }
.road-wait { flex-direction: row; align-items: center; }
.road-wait input { flex: 0 0 130px; }
.road-wait .btn { flex: 1; font-size: 15.5px; }

/* A plain text link (maps, the road report) */

/* ============================== Keepsake (trip lane) ============================== */
.keep { display: grid; place-items: center; padding: 4px 0 0; }
.keep svg { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
.stamps { display: flex; flex-wrap: wrap; gap: 8px; }
.stamps span { padding: 4px 9px; border: 1.5px solid color-mix(in srgb, var(--good) 70%, transparent); border-radius: 7px; color: var(--good); font: 700 12.5px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.stamps span:nth-child(odd) { transform: rotate(-3deg); }
.stamps span:nth-child(3n) { transform: rotate(2.5deg); }

/* ============================== Lights and Us (lights lane) ============================== */
.light-screen > p { font-size: 17px; line-height: 1.55; color: var(--text); text-wrap: pretty; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pair .tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px 16px; border-radius: var(--r-l); background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), 0 0 0 1px var(--edge); }
.pair .tile .pic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--tile); box-shadow: var(--tile-glow); }
.pair .tile .pic svg { width: 48px; height: 48px; }
.pair .tile .where { font: 600 12.5px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.pair .tile b { font: 560 19px/1.2 var(--font-display); }
/* Akshay's Marathi word: Kalam in gold ink, with how to say it and what it means */
.word { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.word .mr { grid-row: span 2; font: 700 34px/1.25 var(--font-hand); color: var(--gold-ink); }
.word .say { font-size: 15px; color: var(--text-2); }
.word .means { font: 600 16.5px/1.25 var(--font-ui); color: var(--text); }

.two-hand { font-family: var(--font-hand); color: var(--gold-ink); }

/* Coupons Akshay made for Krista: small cards to use once */
.coupons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.coupon { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 112px; padding: 14px 14px 12px; border-radius: var(--r-m); background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), 0 0 0 1px var(--edge); }
.coupon::before { content: ""; position: absolute; inset: 5px; border: 1px dashed color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 10px; pointer-events: none; }
.coupon .good { font: 600 12.5px/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.coupon b { font: 600 16.5px/1.25 var(--font-ui); }
.coupon .use { appearance: none; align-self: flex-start; min-width: 44px; min-height: 44px; margin-top: auto; padding: 0 10px 0 0; border: 0; background: none; color: var(--text); font: 600 14.5px/1.2 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; text-align: left; cursor: pointer; position: relative; }
.coupon .own { font: 400 17px/1.25 var(--font-hand); color: var(--gold-ink); }
.coupon .pic { position: absolute; right: 10px; bottom: 8px; opacity: .9; }
.coupon .pic svg { width: 34px; height: 34px; }
.coupon.used { background: var(--surface-2); }
.coupon.used b { color: var(--text-2); }
.coupon.used .stamp { position: absolute; right: 10px; bottom: 12px; }
.coupon.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding-right: 54px; }
.coupon.wide .stamp { position: static; }
.coupon.used:not(.wide) { transform: rotate(-1.2deg); }
.coupon.torn { animation: hce-tear .55s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes hce-tear { 0% { transform: rotate(0) translateY(0); } 45% { transform: rotate(-4deg) translateY(6px); } 100% { transform: rotate(-1.2deg) translateY(0); } }
/* What Krista sent back, on Akshay's phone */
.slips { display: flex; flex-direction: column; gap: 8px; }

/* ============================== Brex (kids lane) ============================== */

/* Brex's other tasks: round picture stickers on a tray */
.shelf { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 14px; border-radius: var(--r-l); background: var(--surface-2); }
.sticker { appearance: none; position: relative; display: grid; place-items: center; width: 66px; height: 66px; border: 0; border-radius: 50%; background: var(--tile); box-shadow: var(--tile-glow), var(--shadow-1); cursor: pointer; }
.sticker svg { width: 44px; height: 44px; }
.sticker.done::after { content: ""; position: absolute; top: -3px; right: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--surface-2); }
.sticker.done::before { content: ""; position: absolute; z-index: 1; top: -3px; right: -3px; width: 22px; height: 22px; background: var(--bg); -webkit-mask: var(--i-check) center / 13px no-repeat; mask: var(--i-check) center / 13px no-repeat; }

@media (prefers-reduced-motion: reduce) {
  .coin, .coupon { animation: none !important; transition: none !important; }
}