/* The sign-in sheet on a venue's pages that aren't the order page (doc 49 §10, 16 Oct 2026): the standard business
   page and a designed site. /shared/account.js draws it into a <dialog class="p360-acct">.

   ⚠️ The SAME sheet as the order page's, in the same values — paper, 20px corners, a grabber, pinned to the bottom on
   a phone and floating at 520px on a wide screen; its fields, buttons and lines are web/order/index.html's (.sheet,
   .authbox, .field, .cta, .quiet, .err, .appledoor, .remember, .lgl, .alt) — copied here scoped to .p360-acct, because
   the pages that load this file have their own classes of those names (the business page's .cta is its pinned
   "Get the app" bar). Change one, change both.

   Tokens: base.css's on the business page (light and dark, the venue's --brand-ink); a designed site's theme.css on
   its own pages (the dialog carries `site-theme`, which the contract's token block names — doc 49 §8.2). */

.p360-acct{
  inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88dvh;padding:0;border:0;
  border-radius:20px 20px 0 0;background:var(--paper,#F7F6F3);color:var(--ink,#1C1B19);overflow:hidden;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-align:left}
.p360-acct::backdrop{background:rgba(0,0,0,.45)}
.p360-acct .in{max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom))}
@media (min-width:700px){
  .p360-acct{inset:auto auto 24px 50%;transform:translateX(-50%);width:520px;border-radius:20px}
}
/* ⚠️ The page must not move behind an open sheet, and on iOS Safari only taking the body out of flow holds it. */
body.p360-acct-locked{position:fixed;width:100%;overflow:hidden}

.p360-acct *{box-sizing:border-box}
.p360-acct :where(h2,p,label,input,select,button){margin:0}
.p360-acct button{font:inherit;border:0;cursor:pointer;background:none;color:inherit}
.p360-acct .serif{font-family:ui-serif,"New York",Georgia,serif}
/* the order page has no .muted rule — its sheets' lines under a title are body text in ink — while the business
   page's .muted is 13px grey: undone here, so the sheet reads as the order page's */
.p360-acct .muted{color:inherit;font-size:inherit}
.p360-acct .grab{width:38px;height:5px;border-radius:3px;background:var(--hair,#E7E5E0);margin:4px auto 14px}

/* Sign in / create account: a DIALOG, not a page. One narrow column, every line centred on the single thing it's
   asking for. Field text stays left-aligned — centring it makes what you've typed shift on every keystroke. */
.p360-acct .authbox{max-width:330px;margin:0 auto;text-align:center}
.p360-acct .authbox h2{font-size:24px;font-weight:700}
.p360-acct .field{display:block;width:100%;min-height:48px;background:var(--card,#fff);border:1px solid var(--hair,#E7E5E0);
  border-radius:12px;padding:13px 14px;font:inherit;font-size:15.5px;color:var(--ink,#1C1B19);
  margin-bottom:10px;line-height:1.25;text-align:left}
.p360-acct .field:focus{outline:2px solid color-mix(in srgb,var(--brand-ink,#4C51E0) 45%,transparent);outline-offset:1px}
.p360-acct select.field{appearance:none;padding-right:38px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3,#6F6C63) 50%),
                   linear-gradient(135deg,var(--ink3,#6F6C63) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat}
.p360-acct .remember{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;
  color:var(--ink2,#5F5D57);padding:0 2px 12px;cursor:pointer}
.p360-acct .err{background:color-mix(in srgb,var(--danger,#B42318) 12%,var(--card,#fff));color:var(--danger,#B42318);
  font-size:13px;font-weight:600;border-radius:10px;padding:10px 12px;margin:0 0 12px}
/* An error box with nothing in it is not an error (Vlad, 6 Aug). */
.p360-acct .err:empty{display:none}
/* ⚠️ Every property the business page's own .cta (its pinned bar) sets is set again here. */
.p360-acct .cta{display:block;position:static;inset:auto;width:100%;border:0;backdrop-filter:none;
  background:var(--brand-ink,#4C51E0);color:var(--on-brand-ink,#fff);font-weight:700;
  font-size:16px;padding:15px;border-radius:12px;text-align:center;margin-top:6px}
.p360-acct .cta:disabled{opacity:.5}
/* Sign in with Apple as Apple's guidelines draw it: black with the white logo, white on dark. */
.p360-acct .appledoor{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;
  padding:12px;border:0;border-radius:12px;background:#000;color:#fff;font-size:15px;font-weight:600}
.p360-acct .appledoor .alogo{width:17px;height:17px;margin-top:-2px}
@media (prefers-color-scheme:dark){.p360-acct .appledoor{background:#fff;color:#000}}
.p360-acct .quiet{display:block;width:100%;text-align:center;padding:12px;font-size:14px;
  font-weight:600;color:var(--ink3,#6F6C63)}
.p360-acct .quiet:focus-visible,.p360-acct .cta:focus-visible,.p360-acct .appledoor:focus-visible{
  outline:2px solid var(--brand-ink,#4C51E0);outline-offset:2px}
.p360-acct .lgl{font-size:11.5px;color:var(--ink3,#6F6C63);margin:0 0 12px}
/* the venue's ink, not the browser's blue — which reads 2.2:1 on the dark sheet (the order page: the same rule) */
.p360-acct .lgl a{color:var(--brand-ink,#4C51E0)}
.p360-acct h2:focus{outline:none}
.p360-acct .alt{font-size:13.5px;color:var(--ink2,#5F5D57);margin:14px 0 2px}
.p360-acct .alt a{color:var(--brand-ink,#4C51E0);font-weight:700;text-decoration:none}

/* ── on a designed site: the order page's own `.site-theme` rules for these same parts (web/order/index.html) ── */
.p360-acct.site-theme{background:var(--paper);color:var(--ink);font-family:var(--site-body);color-scheme:light}
.p360-acct.site-theme .serif{font-family:var(--site-display);font-weight:var(--site-display-weight);
  text-transform:var(--site-display-case);letter-spacing:.01em}
.p360-acct.site-theme .authbox h2{font-size:32px;line-height:1.05}
.p360-acct.site-theme .quiet{font-family:var(--site-label);font-weight:500;letter-spacing:var(--site-label-tracking);
  text-transform:var(--site-label-case);font-size:12px;color:var(--ink2)}
.p360-acct.site-theme .lgl a{color:var(--brand-ink)}   /* the sign-in's legal links: the site's ink, not the browser's blue */
/* the browser's grey placeholder measures 4.3:1 on a cream field; the site's ink3 is 5.6:1 */
.p360-acct.site-theme .field::placeholder{color:var(--ink3);opacity:1}
/* the call to action is the site's: every primary button */
.p360-acct.site-theme .cta{background:var(--site-cta);color:var(--on-site-cta);border-radius:var(--site-radius);
  font-family:var(--site-label);font-weight:500;font-size:13px;letter-spacing:var(--site-label-tracking);
  text-transform:var(--site-label-case);padding:17px}
/* light only, like the site: Apple's button stays black on it in dark mode too */
@media (prefers-color-scheme:dark){.p360-acct.site-theme .appledoor{background:#000;color:#fff}}