@import url('./wordmark.css');
@import url('./place-picker.css');
@import url('./when-picker.css');
/* Logical native viewport, scaled as one unit. Deliberately isolated from page CSS. */
.art-stage { width:100%; max-width:310px; aspect-ratio:404/858; position:relative; overflow:hidden; isolation:isolate; border:7px solid #191919; border-radius:42px; background:#fff; color:#111; box-shadow:0 0 0 1px #8e8e8e,0 24px 45px -28px #0005; contain:layout paint; }
.phone-canvas { position:absolute; top:0; left:0; width:390px; height:844px; transform-origin:top left; color:#111; background:#eeedeb; font-family:-apple-system,BlinkMacSystemFont,Roboto,sans-serif; font-size:16px; line-height:1.5; text-align:left; --phone-accent:#111111; }
.phone-canvas * { box-sizing:border-box; }
.phone-canvas h2,.phone-canvas p { margin:0; }
.phone-canvas h2 { font-size:32px; line-height:40px; font-weight:700; letter-spacing:-1px; color:#111; }
.phone-canvas svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
/* All geographic layers share a clipped viewport below the native header.
   Keep their 390×844 coordinate space so map geometry and gestures agree. */
.phone-map-viewport { position:absolute; top:120px; left:0; right:0; bottom:84px; overflow:hidden; isolation:isolate; }
.phone-map-world { position:absolute; top:-120px; left:0; width:390px; height:844px; }
.phone-map { position:absolute; inset:0; }
.phone-map img { position:absolute; width:648px; height:936px; max-width:none; left:-129px; top:-32px; }
.phone-status { position:absolute; left:0; right:0; top:0; height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 25px; background:#fff; font-size:14px; font-weight:650; }
.phone-status i { position:absolute; left:140px; top:10px; width:110px; height:27px; border-radius:20px; background:#111; }
.phone-status svg { width:63px; height:18px; }
.phone-header { position:absolute; top:48px; left:0; width:390px; height:72px; padding:10px 24px 14px; display:flex; align-items:center; justify-content:space-between; background:#fff; }
.phone-header b { font-size:28px; line-height:36px; font-weight:800; letter-spacing:-1.5px; }
.phone-header-actions { display:flex; align-items:center; gap:8px; }
.phone-header-actions>span { display:grid; place-items:center; height:40px; width:40px; border:1px solid #e5e5e5; background:#fff; border-radius:50%; }
.phone-header svg { width:19px; height:19px; }
.phone-notice { position:absolute; z-index:8; top:54px; left:12px; right:12px; display:flex; align-items:center; gap:10px; min-height:64px; padding:10px 8px 10px 12px; border:1px solid #e5e5e5; border-radius:16px; background:#fff; box-shadow:0 6px 22px #00000020; }
.phone-notice>div { flex:1; min-width:0; }
.phone-notice-dismiss { display:grid; place-items:center; flex-shrink:0; width:32px; height:40px; color:#777; }
.phone-notice-dismiss svg { width:16px; height:16px; }
.phone-notice-icon { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:50%; background:#11111110; color:#333333; }
.phone-notice-icon svg { width:20px; height:20px; }
.phone-notice strong { display:block; font-size:14px; line-height:19px; font-weight:600; }
.phone-notice p { margin-top:4px; color:#666; font-size:12px; line-height:16px; }
.phone-zone { position:absolute; bottom:90px; left:24px; right:24px; height:322px; padding:16px 20px; background:#fff; border:1px solid #e5e5e5; border-radius:16px; box-shadow:0 4px 24px #00000008; font-size:14px; overflow:hidden; }
.phone-zone b { font-size:14px; white-space:nowrap; }
.phone-marker { position:absolute; left:195px; top:400px; width:0; height:0; }
.phone-marker i { position:absolute; width:38px; height:38px; left:-19px; top:-19px; border:1px solid #11111128; background:#1111110d; border-radius:50%; }
.phone-marker b { position:absolute; width:22px; height:22px; left:-11px; top:-11px; background:#111111; border:4px solid #fff; border-radius:50%; box-shadow:0 2px 5px #0002; }
.phone-sheet,.phone-form,.phone-arrival { position:absolute; width:390px; left:0; background:#fff; border-radius:24px 24px 0 0; border-top:1px solid #e5e5e5; box-shadow:0 -8px 28px #00000009; }
.phone-handle { width:36px; height:4px; margin:10px auto 18px; background:#dedede; border-radius:4px; }
.phone-sheet { top:390px; height:430px; padding:0 24px; }
.phone-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.phone-status-label { display:block; color:#333333; font-size:13px; line-height:20px; margin-bottom:5px; }
.phone-detail { margin-top:20px; }
.phone-place { display:flex; align-items:center; gap:10px; font-size:16px; line-height:24px; min-height:48px; color:#666; }
.phone-place svg { width:20px; height:20px; }
.phone-time { display:flex; justify-content:space-between; align-items:baseline; margin:18px 0 24px; padding-top:16px; border-top:1px solid #e5e5e5; }
.phone-time strong { font-size:36px; font-weight:650; line-height:44px; letter-spacing:-1px; }
.phone-time span { font-size:16px; color:#666; }
.phone-button { height:56px; display:flex; align-items:center; justify-content:center; gap:12px; padding:0 18px; border-radius:8px; background:#111; color:#fff; font-size:17px; line-height:22px; font-weight:600; text-align:center; }
.phone-join,.phone-booked { position:absolute; top:280px; left:24px; width:342px; }
.phone-join>span { position:absolute; right:20px; }
.phone-booked { background:#f5f5f5; color:#111; border:1px solid #e5e5e5; }
.phone-booked svg { color:#333333; width:20px; height:20px; }
.phone-form { top:312px; height:290px; padding:0 24px; }
.phone-form .phone-handle { margin-bottom:18px; }
.phone-form-label { font-size:20px; line-height:28px; font-weight:650; margin-bottom:14px; }
.phone-field { height:68px; border:1px solid #d4d4d4; border-radius:8px; padding:17px 15px; font-size:21px; line-height:30px; white-space:nowrap; display:flex; align-items:center; }
.phone-field.focused { border:2px solid #111111; padding:16px 14px; }
.phone-caret { height:23px; width:2px; background:#111111; margin-left:2px; flex-shrink:0; }
.phone-field-count { color:#777; font-size:11px; line-height:18px; text-align:right; margin-top:5px; }
.phone-declare { margin-top:12px; }
.phone-arrival { top:398px; min-height:416px; padding:0 24px; }
.phone-arrival-status { display:flex; align-items:center; gap:7px; color:#333333; font-size:13px; line-height:20px; margin-bottom:12px; }
.phone-arrival-status svg { width:18px; height:18px; }
.phone-arrival>p { margin-top:8px; color:#666; font-size:14px; line-height:21px; }
.phone-sign { margin-top:24px; padding-top:18px; border-top:1px solid #e5e5e5; display:flex; flex-direction:column; gap:4px; }
.phone-sign>span { color:#666; font-size:13px; }
.phone-sign>strong { font-size:28px; line-height:36px; font-weight:650; letter-spacing:-.5px; }
.phone-sign-self { margin-top:18px; padding-top:14px; }
.phone-sign-self>strong { font-size:20px; line-height:28px; font-weight:500; }
.phone-nav { position:absolute; top:760px; left:0; width:390px; height:84px; border-top:1px solid #e5e5e5; background:#fff; display:grid; grid-template-columns:repeat(3,1fr); padding:9px 12px 21px; gap:6px; }
.phone-nav>div { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; font-size:11px; line-height:16px; color:#666; position:relative; }
.phone-nav svg { width:21px; height:21px; }
.phone-nav .active { color:#333333; }
.phone-nav .active:before { position:absolute; content:''; top:-10px; left:calc(50% - 10px); width:20px; height:3px; background:#111111; border-radius:2px; }
.phone-keyboard { position:absolute; left:0; top:558px; width:390px; height:286px; padding:12px 5px 38px; background:#e5e5e8; border-top:1px solid #d2d2d5; }
.phone-key-row { display:flex; justify-content:center; gap:6px; margin-bottom:10px; }
.phone-key { background:#fff; box-shadow:0 1px 0 #b3b3b8; height:46px; width:32px; border-radius:5px; display:flex; justify-content:center; align-items:center; font-size:23px; line-height:1; }
.phone-key-wide { width:45px; background:#c9c9ce; font-size:18px; }
.phone-key-space { flex:1; max-width:232px; color:#777; font-size:21px; }
.phone-key.pressed { background:#b4b6be; color:#111; transform:translateY(1px); box-shadow:none; }
.phone-key-bottom { margin-top:14px; }
.phone-touch { position:absolute; z-index:9; left:0; top:0; margin-left:-17px; margin-top:-17px; height:34px; width:34px; border:1.5px solid #11111180; border-radius:50%; background:#ffffff99; box-shadow:0 0 0 5px #1111110a; pointer-events:none; }
.phone-home { position:absolute; bottom:9px; left:145px; width:100px; height:4px; border-radius:3px; background:#111; }
.map-credit { display:block; margin:10px 0 0; text-align:center; font-size:10px; line-height:16px; color:var(--muted,#666); }
.map-credit a { text-decoration:underline; text-underline-offset:2px; }
@media(min-width:768px) and (max-width:1050px) { .art-stage { max-width:280px; } }
@media(max-width:767px) { .art-stage { max-width:270px; border-radius:36px; } }
@media(max-width:360px) { .art-stage { max-width:250px; border-radius:33px; } }

.phone-search-area { position:absolute; left:15px; top:220px; width:360px; height:360px; border:1.5px solid #11111155; background:#1111110a; border-radius:50%; transform-origin:center; }
.phone-position-label { position:absolute; top:389px; left:28px; width:145px; text-align:right; font-size:12px; line-height:18px; color:#333333; font-weight:600; text-shadow:0 1px #fff,1px 0 #fff,-1px 0 #fff; }
.phone-radius-track { position:absolute; top:48px; left:0; right:0; height:4px; border-radius:2px; background:#e5e5e5; }
.phone-radius-track i { display:block; height:4px; background:#111111; border-radius:2px; }
.phone-radius-track b { position:absolute; top:-8px; width:20px; height:20px; margin-left:-10px; border-radius:50%; border:2px solid #fff; background:#111111; box-shadow:0 0 0 1px #11111133; }
.phone-result { position:absolute; width:88px; height:36px; border:1px solid #111; border-radius:8px; background:#111; color:#fff; text-align:center; box-shadow:0 3px 8px #00000010; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; white-space:nowrap; transform-origin:50% calc(100% + 6px); }
.phone-result:after { content:''; position:absolute; bottom:-5px; left:calc(50% - 4px); width:8px; height:8px; background:inherit; border-right:1px solid #111; border-bottom:1px solid #111; transform:rotate(45deg); }
.phone-result strong { padding:0 3px; font-size:14px; line-height:20px; font-weight:650; letter-spacing:.2px; white-space:nowrap; }
.phone-result.selected { background:var(--phone-accent); border-color:var(--phone-accent); box-shadow:0 0 0 3px #fff,0 0 0 5px #11111180,0 4px 12px #11111128; }
.phone-result.selected:after { border-color:var(--phone-accent); }
.phone-result.reserved { background:var(--phone-accent); border-color:var(--phone-accent); color:#fff; }
.phone-result.reserved:after { border-color:var(--phone-accent); }

.phone-filter { position:relative; height:106px; }
.phone-filter-distance { height:78px; }
.phone-filter-heading { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.phone-filter-heading > span { min-width:0; }
.phone-filter-heading > b { flex-shrink:0; }
.phone-filter-extra { position:relative; }
.phone-range-track { position:absolute; top:62px; left:0; right:0; height:4px; background:#e5e5e5; border-radius:2px; }
.phone-range-track i { position:absolute; height:4px; background:#111111; border-radius:2px; }
.phone-range-track b { position:absolute; top:-8px; width:20px; height:20px; margin-left:-10px; border-radius:50%; border:2px solid #fff; background:#111111; box-shadow:0 0 0 1px #11111133; }
.phone-filter-limits { position:absolute; top:80px; left:0; right:0; display:flex; justify-content:space-between; color:#747474; font-size:11px; }
.phone-filter-summary { position:absolute; bottom:10px; left:20px; right:20px; display:flex; gap:12px; color:#626262; font-size:11px; line-height:14px; }
.phone-filter-summary span { flex:1; min-width:0; }

.phone-create { position:absolute; top:390px; left:0; width:390px; height:365px; padding:0 24px; background:#fff; border-radius:24px 24px 0 0; border-top:1px solid #e5e5e5; }
.phone-create h2 { position:absolute; top:24px; left:24px; right:24px; font-size:28px; line-height:34px; }
.phone-create-activity { position:absolute; top:76px; left:24px; right:24px; }
.phone-create-activity>span { display:block; color:#747474; font-size:12px; }
.phone-create-activity>strong { display:block; min-height:38px; padding:3px 10px; margin-top:3px; border:1px solid #ddd; border-radius:7px; font-size:20px; line-height:30px; font-weight:600; }
.phone-create-activity.focused>strong { border-color:var(--phone-accent); }
.phone-create-activity.focused>strong:after { content:""; display:inline-block; width:2px; height:20px; background:var(--phone-accent); margin-left:2px; vertical-align:-3px; }
.phone-create-place { position:absolute; top:136px; left:24px; right:24px; display:flex; align-items:center; gap:8px; min-height:36px; color:#626262; font-size:14px; line-height:18px; border-bottom:1px solid #eee; padding-bottom:4px; }
.phone-create-place span { flex:1; }
.phone-create-place.chosen { color:#111; }
.phone-create-place svg { width:18px; height:18px; }
.phone-create-place>b,.phone-create-time>b { color:#777; font-size:22px; font-weight:400; }
.phone-create-time { position:absolute; top:174px; left:24px; right:24px; display:flex; align-items:center; gap:8px; min-height:36px; font-size:12px; line-height:16px; }
.phone-create-time>strong { flex:1; text-align:right; font-weight:550; }
.phone-create-duration { position:absolute; top:215px; left:24px; right:24px; font-size:12px; color:#626262; }
.phone-create-duration>strong { float:right; font-size:16px; line-height:20px; font-weight:600; color:#111; }
.phone-create-duration-track { position:absolute; top:36px; left:10px; right:10px; height:4px; background:#e5e5e5; border-radius:2px; }
.phone-create-duration-track i { display:block; height:4px; background:var(--phone-accent); border-radius:2px; }
.phone-create-duration-track b { position:absolute; top:-8px; width:20px; height:20px; margin-left:-10px; border-radius:50%; border:2px solid #fff; background:var(--phone-accent); box-shadow:0 0 0 1px #11111133; }
.phone-create-duration-limits { display:flex; justify-content:space-between; margin-top:31px; font-size:10px; line-height:14px; }
.phone-publish { position:absolute; top:298px; left:24px; right:24px; height:48px; }

.phone-splash { position:absolute; inset:48px 0 20px; z-index:10; display:grid; place-items:center; background:#fff; color:#111; --taats-wordmark-size:64px; }
.phone-join,.phone-declare,.phone-publish { background:var(--phone-accent); }

.phone-locate.located { color:#333333; border-color:#11111155; }
.phone-draft-pin { position:absolute; left:-17px; top:-34px; width:34px; height:34px; display:grid; place-items:center; color:#333333; }
.phone-draft-pin svg { width:34px; height:34px; fill:#fff; }

/* The single create action becomes available after every field is settled. */
.phone-canvas .phone-publish.is-disabled { background:#e5e5e5; color:#777; }