/* 3D floor plan page.
   Layout: a slim brand bar, a row of seating filters, then the 3D deck fills the rest.
   Table details ride over the deck: a side card on wide screens, a bottom sheet on phones.

   Three looks, chosen by embed.js from the page address:
   - on its own (no ?embed): the venue's own colors and the brand bar
   - ?embed=site: inside the venue website's frame, light, no brand bar, fixed deck height
   - ?embed=app: inside The Party App, the app's guest colors and squared controls
   The 3D deck itself is drawn by the venue file and keeps the venue's colors in all three. */
:root{
  color-scheme:light;
  --bg:#f7f4ec; --card:#fffcf6; --ink:#293e33; --muted:#6d766a; --line:#d9ddd0;
  --accent:#294f3b; --on-accent:#fffaf0; --chip:#efebdf; --pink:#f2698b; --shadow:rgba(41,62,51,.16);
  --on-bg:var(--accent); --on-ink:var(--on-accent); --on-line:var(--accent);
  --font:Futura,"Century Gothic","Trebuchet MS",Arial,sans-serif;
  --t-xs:11px; --t-sm:13px; --t-md:15px; --t-lg:24px;
  --r:8px; --r-card:14px; --title-weight:500; --track:.04em;
}

/* Inside The Party App: the app's guest look. Colors follow the phone's light or dark setting. */
html[data-embed=app]:not([data-site-guide]){
  --bg:#f4f5f7; --card:#ffffff; --ink:#233036; --muted:#5b6570; --line:#e5e7eb;
  --accent:#0c6b94; --on-accent:#ffffff; --chip:#ffffff; --shadow:rgba(35,48,54,.14);
  --on-bg:#e4f1f6; --on-ink:#0c6b94; --on-line:#0c6b94;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --t-xs:12px; --t-sm:13px; --t-md:16px; --t-lg:22px;
  --r:4px; --r-card:4px; --title-weight:700; --track:0;
}
@media (prefers-color-scheme:dark){
  html[data-embed=app]:not([data-site-guide]){
    color-scheme:dark;
    --bg:#0e1316; --card:#161d21; --ink:#eef2f4; --muted:#aab4bb; --line:#26323a;
    --accent:#62bde4; --on-accent:#0e1316; --chip:#161d21; --shadow:rgba(0,0,0,.5);
    --on-bg:#12303d; --on-ink:#62bde4; --on-line:#62bde4;
  }
}
/* Inside the venue website's frame. */
html[data-site-guide]{--bg:#fbfaf8}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-md);line-height:1.45;-webkit-text-size-adjust:100%}
button{font-family:inherit;color:inherit;margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{height:100%;min-height:440px;display:flex;flex-direction:column}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.bar{display:flex;align-items:center;gap:12px;padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand svg{width:34px;height:30px;flex:none}
.brand svg g{fill:none;stroke:var(--pink);stroke-width:52;stroke-linejoin:round;stroke-linecap:round}
.brand-name{font-size:var(--t-sm);font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.2}
.brand-sub{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.filters{display:flex;gap:8px;overflow-x:auto;padding-top:4px;padding-bottom:12px;scrollbar-width:none;overscroll-behavior-x:contain}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--chip);font-size:var(--t-sm);font-weight:500;letter-spacing:var(--track);cursor:pointer;-webkit-tap-highlight-color:transparent}
.filters button[aria-pressed="true"]{background:var(--on-bg);border-color:var(--on-line);color:var(--on-ink)}

.stage{position:relative;flex:1;min-height:0;overflow:hidden;border-top:1px solid var(--line)}
/* A touch that starts on the deck belongs to the deck: no page scroll, zoom or text selection. */
#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-3px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#scene.dragging{cursor:grabbing}

.hint{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:16px;margin:0;font-size:var(--t-xs);letter-spacing:var(--track);color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;pointer-events:none}
.tools{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:16px;display:flex;gap:6px}
.tools button{min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:var(--t-sm);font-weight:500;letter-spacing:var(--track);cursor:pointer;box-shadow:0 4px 14px var(--shadow);-webkit-tap-highlight-color:transparent}
.tools button[aria-pressed="true"]{background:var(--on-bg);border-color:var(--on-line);color:var(--on-ink)}
.tools .zoom{font-size:20px;line-height:1;padding:0}

.card{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:16px;width:min(320px,calc(100% - 32px));background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 18px 16px;box-shadow:0 14px 36px var(--shadow)}
.card-close{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);border-radius:var(--r)}
.eyebrow{font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.card h2{margin:2px 44px 0 0;font-size:var(--t-lg);font-weight:var(--title-weight);line-height:1.15;text-wrap:balance}
.guests{margin:4px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.copy{margin:10px 0 0;font-size:var(--t-sm);color:var(--muted)}
.card dl{margin:12px 0 0;display:grid;gap:6px;font-size:var(--t-sm)}
.card dl div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:6px}
.card dt{color:var(--muted)}
.card dd{margin:0;text-align:right}
.primary{margin-top:14px;width:100%;min-height:48px;border:0;border-radius:var(--r);background:var(--accent);color:var(--on-accent);font-size:var(--t-md);font-weight:600;letter-spacing:var(--track);cursor:pointer;-webkit-tap-highlight-color:transparent}
.note,.status{margin:8px 0 0;font-size:var(--t-xs);color:var(--muted)}
.status:empty{display:none}

.nogl{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;padding:24px;color:var(--muted)}
.nogl p{margin:0}
.nogl a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;color:var(--accent);font-weight:600}

/* The table list is for VoiceOver and keyboards. It takes no room on screen. */
.sr-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Any embed: the host already shows the venue's name, so the page's own bar is hidden. */
html[data-embed=app] .bar{display:none}
html[data-embed=app] .filters{padding-top:8px}
html[data-embed=app] .app{min-height:0}

/* Inside The Party App. */
html[data-embed=app]:not([data-site-guide]) .filters button,
html[data-embed=app]:not([data-site-guide]) .tools button{font-weight:600}
html[data-embed=app]:not([data-site-guide]) .eyebrow{letter-spacing:.08em}
html[data-embed=app]:not([data-site-guide]) .primary{font-weight:700}
html[data-embed=app]:not([data-site-guide]) .tools button{box-shadow:none}

/* Inside the venue website: the frame grows to fit, so the deck needs a height of its own. */
html[data-site-guide],html[data-site-guide] body{height:auto}
html[data-site-guide] .app{height:auto}
html[data-site-guide] .stage{flex:none;height:min(620px,max(420px,62vw));border:1px solid var(--line);border-radius:12px}
html[data-site-guide=compact] .stage{height:420px}
html[data-site-guide] .gutter{padding-left:2px;padding-right:2px}

@media (max-width:719px){
  .card{top:auto;bottom:12px;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));width:auto;padding:14px 16px 12px}
  .card h2{font-size:20px}
  .copy{display:none}
  .tools{top:12px;bottom:auto}
  .stage.has-card .hint{display:none}
}
/* Short views (the deck inside a phone page): keep the sheet small so the chosen table stays in sight. */
@media (max-width:719px) and (max-height:620px){
  .card dl{display:none}
  .primary{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}