/* landing-story.css
   Phone screens for the home page story scroll (views/partials/landing-story-screens.ejs).
   Each .sv-scene mirrors a real product screen; values below are taken from those views:
   booking  book-timeslots.ejs (ink #1c1e1a, hairline rgba(28,30,26,.12), ticket stub bar)
   checkin  kiosk/mobile-checkin.ejs (accent #059669, tint #ecfdf5, 14px buttons)
   food     food-ordering.css (#22c55e cards, orange checkout)
   dash     dashboard-widgets.css (white cards, 1px #e2e8f0, 12px radius)
   The story script sets .is-on on one scene and data-step on it. */

.sv { position: relative; height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #0f172a; text-align: left; }
.sv-scene { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.sv-scene.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.sv-scene b { font-weight: 700; }
.sv-scene small { display: block; font-size: 11px; color: #64748b; }
.sv-scene em { font-style: normal; }

/* step visibility */
.sv-scene:not([data-step="0"]) .sv-on0,
.sv-scene:not([data-step="1"]) .sv-on1,
.sv-scene:not([data-step="2"]) .sv-on2,
.sv-scene[data-step="0"] .sv-from1,
.sv-scene:not([data-step="2"]) .sv-from2,
.sv-scene[data-step="2"] .sv-to1 { display: none; }

/* status bar under the notch */
.sv-status { flex: 0 0 auto; height: 46px; padding: 16px 22px 0; display: flex; justify-content: space-between; align-items: flex-start; font-size: 12px; font-weight: 700; color: #0f172a; }
.sv-status-r { display: flex; align-items: center; gap: 5px; padding-top: 2px; }
.sv-sig { width: 14px; height: 9px; background: linear-gradient(90deg, #0f172a 0 20%, transparent 20% 27%, #0f172a 27% 47%, transparent 47% 54%, #0f172a 54% 74%, transparent 74% 81%, #0f172a 81%); -webkit-mask: linear-gradient(to top right, #000 50%, transparent 50%); mask: linear-gradient(to top right, #000 50%, transparent 50%); }
.sv-batt { width: 20px; height: 10px; border: 1.5px solid #0f172a; border-radius: 3px; background: linear-gradient(#0f172a, #0f172a) 1px 1px / 12px 5px no-repeat; }
.sv-logo { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; background: #059669; color: #ffffff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }

/* ── Booking ─────────────────────────────────────────── */
.sv-book { --ink: #1c1e1a; --line: rgba(28, 30, 26, 0.12); --brand: #059669; color: var(--ink); }
.sv-book-stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand); }
.sv-book-head { display: flex; align-items: center; gap: 10px; padding: 2px 16px 10px; }
.sv-book-id { flex: 1; min-width: 0; }
.sv-book-id b { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
.sv-lang { font-size: 11px; font-weight: 700; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; }
.sv-book-progress { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
.sv-book-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.sv-book-bar i { display: block; height: 100%; width: 20%; background: var(--brand); border-radius: 4px; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.sv-book[data-step="1"] .sv-book-bar i { width: 40%; }
.sv-book[data-step="2"] .sv-book-bar i { width: 100%; }
.sv-book-count { font-size: 11px; font-weight: 700; white-space: nowrap; }
.sv-book-body { flex: 1; padding: 12px 16px 0; }
.sv-month { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.sv-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sv-cal-head { margin-bottom: 4px; font-size: 10px; font-weight: 700; color: #6b7280; text-align: center; }
.sv-day { position: relative; height: 36px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 700; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; }
.sv-day i { position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--brand); }
.sv-day-l i { background: #d97706; }
.sv-day-f i { background: #dc2626; }
.sv-day-pick { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.sv-day-pick i { background: #ffffff; }
.sv-cap { margin: 14px 0 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280; }
.sv-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; transition: opacity 0.3s ease; }
.sv-time { border: 1px solid var(--line); border-radius: 12px; padding: 7px 4px 6px; text-align: center; transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sv-time b { display: block; font-size: 12.5px; font-weight: 800; }
.sv-time small { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; font-size: 9.5px; color: #6b7280; }
.sv-time small i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.sv-time-l small i { background: #d97706; }
.sv-time-f small i { background: #dc2626; }
.sv-book:not([data-step="0"]) .sv-time-pick { background: var(--ink); border-color: var(--ink); color: #ffffff; transform: scale(1.04); }
.sv-book:not([data-step="0"]) .sv-time-pick small { color: rgba(255, 255, 255, 0.75); }
.sv-stub { flex: 0 0 auto; margin-top: 10px; padding: 14px 16px 22px; background: var(--ink); color: #ffffff; border-radius: 22px 22px 0 0; }
.sv-stub-chips { display: flex; gap: 6px; min-height: 24px; padding-bottom: 10px; border-bottom: 1px dashed rgba(255, 255, 255, 0.28); }
.sv-stub-chips span { font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.sv-stub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; }
.sv-stub-total small { color: rgba(255, 255, 255, 0.6); font-size: 10px; }
.sv-stub-total b { font-size: 17px; font-weight: 800; }
.sv-stub-btn { padding: 10px 16px; border-radius: 999px; background: #ffffff; color: var(--ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; transition: background-color 0.3s ease, color 0.3s ease; }
.sv-book[data-step="2"] .sv-stub-btn { background: var(--brand); color: #ffffff; }

/* ── Mobile check-in ─────────────────────────────────── */
.sv-check { background: linear-gradient(180deg, #f8fafc, #e2e8f0); }
.sv-dots { display: flex; justify-content: center; gap: 6px; padding: 2px 0 12px; }
.sv-dots i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.sv-dots i.on { width: 20px; border-radius: 7px; background: #059669; }
.sv-check-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 14px; }
.sv-check-brand b { font-size: 18px; font-weight: 700; }
.sv-logo-tile { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.sv-card { margin: 0 12px; padding: 16px 14px; background: #ffffff; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.sv-card-title { font-size: 16px; font-weight: 700; }
.sv-card-sub { font-size: 11.5px; color: #64748b; margin-bottom: 8px; }
.sv-ticket { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid #e2e8f0; }
.sv-ticket-info b { display: block; font-size: 14px; }
.sv-ticket-info em { font-size: 15px; font-weight: 700; color: #059669; }
.sv-qty { display: flex; align-items: center; gap: 10px; }
.sv-qty i { width: 32px; height: 32px; border-radius: 10px; border: 1.5px solid #e2e8f0; font-style: normal; font-size: 18px; font-weight: 600; color: #334155; display: flex; align-items: center; justify-content: center; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sv-qty b { min-width: 14px; text-align: center; font-size: 16px; }
.sv-check[data-step="1"] .sv-qty-press { background: #059669; border-color: #059669; color: #ffffff; transform: scale(1.1); }
.sv-total { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 13px; font-weight: 600; color: #475569; }
.sv-total b { font-size: 18px; color: #0f172a; }
.sv-check-bar { margin-top: auto; padding: 12px 12px 26px; background: #ffffff; border-top: 1px solid #e2e8f0; }
.sv-check-btn { display: block; padding: 13px; border-radius: 14px; background: #059669; color: #ffffff; font-size: 14px; font-weight: 700; text-align: center; }
.sv-success { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #ffffff; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.sv-check[data-step="2"] .sv-success { opacity: 1; transform: none; }
.sv-success-mark { width: 64px; height: 64px; border-radius: 50%; background: #ecfdf5; color: #059669; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.sv-success b { font-size: 21px; font-weight: 800; }
.sv-success-code { margin: 2px 0 8px; padding: 10px 18px; border-radius: 14px; background: #f1f5f9; font-size: 20px; font-weight: 800; letter-spacing: 0.08em; }

/* ── Scorecard ───────────────────────────────────────── */
.sv-score-photo { flex: 0 0 auto; height: 138px; background: #e2e8f0; }
.sv-score-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-hole { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; }
.sv-hole-badge { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; background: #10b981; color: #ffffff; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sv-hole-id { flex: 1; min-width: 0; }
.sv-hole-id b { display: block; font-size: 22px; line-height: 1.05; color: #1f2937; }
.sv-hole-id small { font-size: 12px; font-weight: 300; color: #9ca3af; }
.sv-hole-tip { padding: 5px 10px; border-radius: 999px; background: #dcfce7; color: #16a34a; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sv-hole-food { width: 34px; height: 34px; border-radius: 50%; background: #f97316; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.sv-hole-desc { margin: 8px 14px 10px; font-size: 13px; line-height: 1.35; color: #64748b; }
.sv-pcard { margin: 0 14px 8px; padding: 9px 11px; border-radius: 16px; background: var(--brand); color: #ffffff; }
.sv-pcard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sv-pcard-top b { flex: 1; font-size: 17px; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); }
.sv-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sv-pcheck { opacity: 0; transform: scale(0.4); transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sv-circles { display: flex; justify-content: space-between; }
.sv-circle { width: 50px; height: 50px; border-radius: 50%; background: #e5e7eb; border: 2px solid #d1d5db; color: #1f2937; font-size: 21px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sv-score:not([data-step="0"]) .sv-pcard-a .sv-pick,
.sv-score[data-step="2"] .sv-pcard-b .sv-pick { background: var(--brand); border-color: rgba(255, 255, 255, 0.8); color: #ffffff; transform: scale(1.08); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28); }
.sv-score:not([data-step="0"]) .sv-pcard-a .sv-pcheck,
.sv-score[data-step="2"] .sv-pcard-b .sv-pcheck { opacity: 1; transform: none; }
.sv-actions { display: flex; gap: 7px; margin-top: auto; padding: 0 14px 30px; }
.sv-act { min-height: 46px; padding: 0 12px; border-radius: 12px; color: #ffffff; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sv-act svg { width: 18px; height: 18px; }
.sv-act-back { background: #6b7280; }
.sv-act-next { flex: 1; background: #10b981; }
.sv-act-skip { background: #eab308; }
.sv-toast { position: absolute; top: 44px; left: 10px; right: 10px; z-index: 3; padding: 13px 14px; border-radius: 18px; color: #ffffff; text-align: center; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(-130%); transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sv-toast b { display: block; font-size: 18px; font-weight: 900; }
.sv-toast small { color: rgba(255, 255, 255, 0.92); font-size: 12.5px; font-weight: 600; }
.sv-toast-ace { background: #d97706; }
.sv-toast-close { background: #2563eb; }
.sv-score[data-step="1"] .sv-toast-ace,
.sv-score[data-step="2"] .sv-toast-close { opacity: 1; transform: none; }

/* ── Food menu sheet ─────────────────────────────────── */
.sv-food { background: #475569; }
.sv-food .sv-status { color: #ffffff; }
.sv-food .sv-sig { background: linear-gradient(90deg, #fff 0 20%, transparent 20% 27%, #fff 27% 47%, transparent 47% 54%, #fff 54% 74%, transparent 74% 81%, #fff 81%); }
.sv-food .sv-batt { border-color: #ffffff; background: linear-gradient(#fff, #fff) 1px 1px / 12px 5px no-repeat; }
.sv-sheet { position: relative; flex: 1; display: flex; flex-direction: column; margin-top: 6px; background: #ffffff; border-radius: 16px 16px 0 0; overflow: hidden; }
.sv-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 14px 10px; border-bottom: 1px solid #e5e7eb; }
.sv-sheet-head b { display: block; font-size: 16px; color: #1f2937; }
.sv-sheet-head i { font-style: normal; font-size: 14px; color: #9ca3af; }
.sv-tabs { display: flex; gap: 6px; padding: 10px 14px; }
.sv-tabs span { padding: 6px 11px; border-radius: 8px; background: #f3f4f6; color: #4b5563; font-size: 11.5px; font-weight: 600; }
.sv-tabs span.on { background: #22c55e; color: #ffffff; }
.sv-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 14px 0; }
.sv-item { display: flex; flex-direction: column; border-radius: 8px; background: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; }
.sv-item img { width: 100%; height: 70px; object-fit: cover; display: block; background: #e5e7eb; }
.sv-item b { padding: 7px 8px 0; font-size: 11.5px; font-weight: 600; line-height: 1.25; color: #1f2937; }
.sv-item em { padding: 2px 8px 0; font-size: 13px; font-weight: 700; color: #22c55e; }
.sv-add { margin: 6px 8px 8px; padding: 6px 0; border-radius: 6px; background: #22c55e; color: #ffffff; font-size: 11px; font-weight: 600; text-align: center; transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sv-food:not([data-step="0"]) .sv-item-pick { box-shadow: 0 0 0 2px #22c55e, 0 2px 8px rgba(0, 0, 0, 0.1); }
.sv-food:not([data-step="0"]) .sv-item-pick .sv-add { background: #15803d; }
.sv-cart { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 26px; border-top: 1px solid #e5e7eb; background: #ffffff; }
.sv-cart b { font-size: 17px; color: #f97316; }
.sv-checkout { padding: 11px 22px; border-radius: 10px; background: #f97316; color: #ffffff; font-size: 13.5px; font-weight: 700; }
.sv-track { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 14px 28px; background: #ffffff; border-top: 1px solid #e5e7eb; box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.14); transform: translateY(105%); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.sv-food[data-step="2"] .sv-track { transform: none; }
.sv-track b { display: block; font-size: 16px; color: #1f2937; }
.sv-track-bar { display: flex; gap: 5px; margin-top: 10px; }
.sv-track-bar i { flex: 1; height: 6px; border-radius: 6px; background: #e5e7eb; }
.sv-track-bar i.on { background: #f97316; }

/* ── Owner dashboard ─────────────────────────────────── */
.sv-dash { background: #f8fafc; }
.sv-dash-head { padding: 2px 14px 12px; }
.sv-dash-head b { display: block; font-size: 18px; font-weight: 800; }
.sv-widget { display: flex; align-items: center; gap: 12px; margin: 0 14px 9px; padding: 12px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.sv-widget small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.sv-widget-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, #ffffff); display: flex; align-items: center; justify-content: center; }
.sv-widget-icon svg { width: 22px; height: 22px; }
.sv-widget-body { flex: 1; min-width: 0; }
.sv-widget-body b { display: block; font-size: 24px; font-weight: 800; line-height: 1.15; }
.sv-trend { padding: 3px 8px; border-radius: 999px; background: #dcfce7; color: #16a34a; font-size: 11px; font-weight: 700; }
.sv-widget-note { font-size: 11px; font-weight: 600; color: #64748b; }
.sv-chart { display: block; }
.sv-bars { display: flex; align-items: flex-end; gap: 7px; height: 92px; margin-top: 10px; }
.sv-bars span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.sv-bars i { width: 100%; height: calc(var(--h) * 0.82); border-radius: 6px 6px 2px 2px; background: #10b981; transform-origin: bottom; transform: scaleY(0.12); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.sv-dash.is-on .sv-bars i { transform: none; }
.sv-bars span:nth-child(2) i { transition-delay: 0.05s; }
.sv-bars span:nth-child(3) i { transition-delay: 0.1s; }
.sv-bars span:nth-child(4) i { transition-delay: 0.15s; }
.sv-bars span:nth-child(5) i { transition-delay: 0.2s; }
.sv-bars span:nth-child(6) i { transition-delay: 0.25s; }
.sv-bars span:nth-child(7) i { transition-delay: 0.3s; }
.sv-bars em { font-size: 9.5px; font-weight: 600; color: #94a3b8; }

/* ── Standalone phone (auth page brand panel) ────────────
   Same chassis values as .hero-phone-frame on the landing page, under sv- names so
   pages that do not load the landing styles can show the screens. Size comes from
   --sv-fit on .sv-fit; the tilt comes from --sv-ry / --sv-rx on .sv-device. */
.sv-fit { position: relative; flex: 0 0 auto; width: calc(320px * var(--sv-fit, 0.8)); height: calc(616px * var(--sv-fit, 0.8)); perspective: 1400px; }
.sv-device { position: absolute; top: 0; left: 0; width: 320px; transform-origin: top left; transform: scale(var(--sv-fit, 0.8)); transform-style: preserve-3d; }
.sv-phone { position: relative; width: 320px; padding: 12px; border-radius: 52px; transform-style: preserve-3d; transform: rotateX(var(--sv-rx, 5deg)) rotateY(var(--sv-ry, -14deg)); transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); background: linear-gradient(135deg, #41464f 0%, #20242c 18%, #14171d 50%, #0c0e13 82%, #2a2e36 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.10), inset 0 3px 4px rgba(255, 255, 255, 0.16), inset 0 -3px 6px rgba(0, 0, 0, 0.7); }
.sv-phone::before { content: ""; position: absolute; inset: 6px; border-radius: 46px; background: #04060a; z-index: 0; }
.sv-phone::after { content: ""; position: absolute; inset: 0; border-radius: 52px; background: #0a0c11; transform: translateZ(-18px); z-index: -2; }
.sv-phone-screen { position: relative; z-index: 1; height: 592px; border-radius: 41px; overflow: hidden; background: #ffffff; }
.sv-phone-notch { position: absolute; top: 16px; left: 50%; width: 86px; height: 26px; margin-left: -43px; border-radius: 16px; background: #04060a; z-index: 5; }
.sv-phone-side { position: absolute; top: 52px; bottom: 52px; width: 18px; background: #14171d; }
.sv-phone-side-l { left: 0; transform-origin: left center; transform: rotateY(90deg); }
.sv-phone-side-r { right: 0; transform-origin: right center; transform: rotateY(-90deg); }
.sv-phone.is-turning { transform: rotateX(8deg) rotateY(-62deg); transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
.sv-floor { position: absolute; left: 50%; bottom: -14px; width: 70%; height: 22px; margin-left: -35%; border-radius: 50%; background: rgba(15, 23, 42, 0.2); filter: blur(12px); }

@media (prefers-reduced-motion: reduce) {
    .sv-scene, .sv-scene *, .sv-phone { transition: none !important; }
    .sv-phone { transform: none; }
}