/* Client shell. The app inside #screen keeps its own styles (app*.css); this only frames it. */
html, body { margin: 0; height: 100%; background: #111; }
body { font: 400 15px/1.45 "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: #e9e8e4; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- desktop: the phone in the middle, the options beside it ---------- */
.c-wrap { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 32px; padding: 24px; box-sizing: border-box; }
.c-intro { justify-self: end; max-width: 300px; }
.c-intro .mark { width: 40px; height: 31px; color: #f5f5f5; }
.c-intro h1 { margin: 18px 0 8px; font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; color: #f5f5f5; }
.c-intro p { margin: 0 0 10px; color: #b3b3b3; font-size: 14.5px; }
.c-intro .yl { display: inline-block; width: 10px; height: 10px; background: #fde047; margin-right: 6px; vertical-align: -1px; }
.c-device-wrap { position: relative; }
#device { width: 393px; height: 852px; transform-origin: top left; background: #0e1012; border-radius: 56px; padding: 11px; box-sizing: border-box; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1.5px #3a3a3a inset; position: relative; }
#device .island { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 124px; height: 36px; background: #000; border-radius: 20px; z-index: 1000; pointer-events: none; }
#screen { position: relative; width: 100%; height: 100%; border-radius: 46px; overflow: hidden; }
.c-panel { justify-self: start; width: 320px; max-height: calc(100vh - 48px); overflow: auto; scrollbar-width: thin; }

/* ---------- the options, shared by the panel and the phone sheet ---------- */
.c-sec { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); }
.c-sec:first-child { border-top: 0; padding-top: 0; }
.c-sec h3 { margin: 0 0 4px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #a3a3a0; }
.c-hint { margin: 0 0 10px; font-size: 13px; color: #9a9a97; }
.c-people { display: grid; gap: 4px; }
.c-person { display: grid; gap: 1px; text-align: left; padding: 10px 12px; background: #1f1f1e; min-height: 48px; }
.c-person:hover, .c-person:active { background: #2a2a29; }
.c-person b { font-weight: 500; color: #f5f5f5; }
.c-person small { font-size: 12.5px; color: #a3a3a0; }
.c-flow { border-bottom: 1px solid rgba(255,255,255,.07); }
.c-flow summary { list-style: none; cursor: pointer; padding: 10px 0; display: grid; gap: 1px; }
.c-flow summary::-webkit-details-marker { display: none; }
.c-flow summary b { font-weight: 500; color: #f5f5f5; }
.c-flow summary b::after { content: " +"; color: #777; font-weight: 400; }
.c-flow[open] summary b::after { content: " −"; }
.c-flow summary small { font-size: 12.5px; color: #9a9a97; }
.c-flow ol { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 2px; }
.c-step { width: 100%; text-align: left; padding: 9px 12px; min-height: 44px; background: #1a1a19; color: #d6d5d1; font-size: 14px; }
.c-step:hover { background: #262625; }
.c-step.on { background: #fde047; color: #191919; }
.c-row { display: flex; gap: 6px; }
.c-btn { flex: 1; min-height: 46px; background: #262625; color: #f5f5f5; font-weight: 500; }
.c-btn:active { background: #333; }

/* the Tour button and the sheet exist on every size but only show on a phone */
#tourBtn, #sheet { display: none; }

/* ---------- phone: the app is the page ---------- */
.is-mobile body { background: #191919; overflow: hidden; overscroll-behavior: none; }
.is-mobile .c-wrap { display: block; padding: 0; min-height: 0; height: 100dvh; }
.is-mobile .c-intro, .is-mobile .c-panel { display: none; }
.is-mobile .c-device-wrap { width: 100vw !important; height: 100dvh !important; }
.is-mobile #device { width: 100vw; height: 100dvh; border-radius: 0; padding: 0; box-shadow: none; background: none; transform: none !important; }
.is-mobile #device .island { display: none; }
.is-mobile #screen { border-radius: 0; }
/* the real phone draws its own status bar: drop the drawn one, keep clear of the notch */
.is-mobile #app { --status-h: max(env(safe-area-inset-top, 0px), 12px); }
.is-mobile #app .statusbar { visibility: hidden; }
.is-mobile #app .tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); height: calc(var(--tab-h) - 18px + env(safe-area-inset-bottom, 0px)); }

.is-mobile #tourBtn { display: grid; place-items: center; position: fixed; z-index: 5000; right: 0; top: 46%; width: 30px; height: 64px; background: rgba(25,25,25,.82); color: #f5f5f5; font-size: 11px; font-weight: 500; letter-spacing: .06em; writing-mode: vertical-rl; transform: rotate(180deg); box-shadow: inset 1px 0 0 rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.is-mobile #sheet { display: block; position: fixed; inset: 0; z-index: 6000; background: rgba(0,0,0,0); transition: background .26s; }
.is-mobile #sheet.open { background: rgba(0,0,0,.55); }
.is-mobile #sheet[hidden] { display: none; }
.c-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow: auto; background: #191919; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .32s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
#sheet.open .c-sheet { transform: translateY(0); }
.c-sheet-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 12px; }
.c-sheet-top b { font-size: 17px; font-weight: 500; color: #f5f5f5; }
.c-sheet-top button { min-height: 44px; padding: 0 4px; color: #c9c9c7; }
.c-grab { width: 38px; height: 5px; border-radius: 3px; background: #444; margin: 0 auto 6px; }
@media (prefers-reduced-motion: reduce) { .c-sheet, .is-mobile #sheet { transition: none; } }