/* Joe mode, stage C (3.6.0): a business's booking page (pro.html, js/pro.js; the page's own look is css/pro-view.css, 0298) and the
   "Ask for an invite" sheet (js/proinvite.js; on Why Plona since 3.6.0.7, it was the front page's). Tokens only (v2.css on the booking page,
   app/css/app.css on Why Plona; both turn dark the same way), so dark mode keeps working. Phone first, a 16px side gutter, every tap target 44px or taller, no
   sideways scroll. */

/* ===================== the booking page ===================== */
body[data-page=pro]{padding-bottom:0;min-height:100vh;display:flex;flex-direction:column}
body[data-page=pro] main{flex:1}
.pp{max-width:560px;margin:0 auto;padding:24px 16px 0}
.pp-wait{color:var(--sub);padding:40px 0;text-align:center}
/* the page itself is drawn by js/pro-view.js and its look is css/pro-view.css (0298, Oct 25: the same drawing is the business's own live
   picture in the app's editor); here only the page around it */
/* the one button: kept at the bottom of the screen on a phone (as the app's step pages), under the dates on a computer */
body[data-page=pro] .ppv .pp-go{position:sticky;bottom:0;z-index:1;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
@media(min-width:700px){body[data-page=pro] .ppv .pp-go{position:static;margin:0;padding:4px 0 0;border-top:0;background:none}.pp{padding-top:48px}}
.pp-calm{padding:48px 0;text-align:center}
.pp-calm h1{font-size:clamp(26px,7vw,34px)}
.pp-foot{display:flex;justify-content:center;gap:4px 16px;flex-wrap:wrap;padding:8px 16px calc(12px + env(safe-area-inset-bottom));font-size:14px}
.pp-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--sub)}

/* ===================== Why Plona's "Ask for an invite" (3.6.0.7) ===================== */
/* The front page's line (3.6.0) is a card linking to Why Plona's #driveaway-business now (its look is in index.html). There, under "Joe mode
   is invite only for now.", one orange button (app.css .btn: a real button, so the page's link colours never reach it) opens the sheet below.
   Its own width, on the left like the words above it; 48px tall. */
.dw-ask .btn{width:auto;max-width:100%}
/* the sheet: from the bottom on a phone, in the middle on a computer */
dialog.pi{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;width:100%;max-width:none;max-height:92dvh;overflow:auto;border:0;border-radius:18px 18px 0 0;
  padding:12px 16px calc(18px + env(safe-area-inset-bottom));background:var(--card);color:var(--ink)}
dialog.pi::backdrop{background:rgba(20,16,12,.45)}
@media(min-width:700px){dialog.pi{top:0;bottom:0;margin:auto;width:min(460px,92vw);height:fit-content;max-height:90vh;border-radius:16px;padding:14px 22px 22px}}
.pi-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pi-head h2{flex:1;margin:0;font:600 22px/1.2 'Clash Grotesk','Instrument Sans',sans-serif;min-width:0}
.pi-head h2:focus{outline:0}
.pi-x{flex:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;border-radius:10px;font-size:28px;line-height:1;color:var(--ink);cursor:pointer}
.pi-x:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.pi-pre{margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--sub)}
.pi-f{margin:0 0 10px}
.pi-f label{display:block;font-weight:600;font-size:15px;margin-bottom:4px}
.pi-f label .opt{font-weight:400;color:var(--sub)}
.pi-f input{display:block;width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--field);border-radius:var(--r-md);background:var(--card);color:var(--ink);font:400 16px 'Instrument Sans',sans-serif}
.pi-f input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.pi-f input[aria-invalid=true]{border-color:var(--bad)}
.pi-err{min-height:0;color:var(--bad);font-size:14.5px;margin:2px 0 0}
.pi-err:empty{display:none}
.pi-go{width:100%;min-height:52px;margin-top:8px;font-size:17px}
.pi-done{padding:6px 0 4px}
.pi-done p{font-size:17px;line-height:1.45;margin:0 0 16px}