@font-face{font-family:'Gilda Display';src:url('/fonts/gildadisplay-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --linen:#D9DCE0; --bg:#E8EBEF; --card:#B5C7DA; --card-deep:#9DB2C9; --mist:#DCE6F0; --pale:#F3F6F9;
  --ink:#223C57; --ink-2:#2E4B69; --white:#fff; --claret:#7E2433; --rose:#F6E3E6; --grey:#6B7785;
  --roman:'Gilda Display','Iowan Old Style',Georgia,serif;
  --serif:'Spectral','Iowan Old Style',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --lift:0 2px 4px rgba(34,60,87,.12),0 14px 34px rgba(34,60,87,.20);
  --print:0 1px 2px rgba(34,60,87,.16),0 6px 16px rgba(34,60,87,.14);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --panel:36dvh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.4;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
.bad{color:var(--claret)}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;padding:calc(8px + var(--safe-t)) 14px 8px;
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.brand .names{display:block;font-family:var(--roman);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--card)}
.brand h1{font-family:var(--roman);font-weight:400;font-size:20px;line-height:1.1}
.stats{grid-column:1/-1;font-size:13px;color:var(--mist)}
.stats b{color:#fff;font-weight:500}
.stats .bad{color:#F2B8C0}
.actions{display:flex;gap:6px;justify-self:end}
.actions button,.actions a{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 11px;font-size:13px;color:#fff;text-decoration:none;line-height:1.2;white-space:nowrap}
.actions button:hover,.actions a:hover{background:rgba(255,255,255,.12)}

/* layout: phone first, the guest list is a bottom panel */
.layout{display:block}
.board{position:relative;padding:10px 10px calc(var(--panel) + 60px)}
.viewbar{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.seg{display:inline-flex;background:#fff;border:1px solid var(--card);border-radius:999px;padding:2px}
.seg button{padding:4px 12px;border-radius:999px;font-size:13px}
.seg button.on{background:var(--ink);color:#fff}
.hint{font-size:12px;color:var(--ink-2);font-style:italic}

/* map */
.map{position:relative;width:min(100%,560px);aspect-ratio:100/141;margin:0 auto;background:#fff;border:1px solid var(--card);border-radius:16px;container-type:inline-size;overflow:hidden}
.table{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1;border-radius:50%;background:#fff;border:.6cqw solid var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;color:var(--ink);
  transition:transform .15s var(--ease),box-shadow .15s;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.table b{font-family:var(--roman);font-weight:400;font-size:4.8cqw}
.table span{font-size:2.4cqw;margin-top:.8cqw;color:var(--ink-2)}
.table.part{background:var(--mist)}
.table.full{background:var(--card)}
.table.over{border-color:var(--claret);background:var(--rose)}
.table.over span{color:var(--claret);font-weight:500}
.table.open{box-shadow:0 0 0 .9cqw rgba(34,60,87,.25)}
.table.hover{transform:translate(-50%,-50%) scale(1.1);box-shadow:var(--lift)}
body.selecting .table{box-shadow:0 0 0 .6cqw var(--card)}
body.selecting .table.open{box-shadow:0 0 0 .9cqw rgba(34,60,87,.25)}
.table.topt{left:24%;top:6.2%;width:52%;height:5.6%;aspect-ratio:auto;transform:none;border-radius:2.2cqw;flex-direction:row;gap:3cqw;
  background:var(--ink);color:#fff;border-color:var(--ink)}
.table.topt b{font-size:3.6cqw;letter-spacing:.16em;text-transform:uppercase}
.table.topt span{color:var(--mist);margin:0;font-size:2.6cqw}
.table.topt.over{background:var(--claret);border-color:var(--claret)}
.table.topt.over span{color:#fff}
.table.topt.hover{transform:scale(1.02)}

/* list view */
.tlist{list-style:none;display:grid;gap:6px;max-width:560px;margin:0 auto}
.tlist .row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--card);border-radius:12px;padding:8px 12px;width:100%;text-align:left;touch-action:manipulation}
.tlist .row b{font-family:var(--roman);font-weight:400;font-size:18px;min-width:2.4em}
.tlist .row .who{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlist .row .cnt{font-size:13px}
.tlist .row.over{border-color:var(--claret);background:var(--rose)}
.tlist .row.over .cnt{color:var(--claret);font-weight:500}
.tlist .row.hover,.tlist .row.open{box-shadow:var(--lift)}

/* side panel */
.side{position:fixed;left:0;right:0;bottom:0;z-index:15;height:var(--panel);background:#fff;border-top:1px solid var(--card);
  border-radius:18px 18px 0 0;box-shadow:0 -6px 24px rgba(34,60,87,.12);display:flex;flex-direction:column;transition:height .25s var(--ease)}
.side.full{height:88dvh}
.handle{height:22px;display:flex;align-items:center;justify-content:center;flex:none}
.handle span{width:44px;height:5px;border-radius:3px;background:var(--card)}
.sidehead{display:flex;align-items:center;justify-content:space-between;padding:0 14px 6px;min-height:30px}
.sidehead h2{font-family:var(--roman);font-weight:400;font-size:18px}
.sidehead small{font-size:13px;color:var(--ink-2);margin-left:6px}
.drop-unseat{display:none;font-size:13px;padding:5px 12px;border:2px dashed var(--claret);border-radius:999px;color:var(--claret)}
body.dragging .drop-unseat{display:block}
.drop-unseat.hover{background:var(--rose)}
.search{padding:0 14px 8px}
.search input{width:100%;padding:9px 12px;border:1px solid var(--card);border-radius:10px;background:var(--pale);-webkit-appearance:none}
.unseated{overflow:auto;padding:0 14px calc(14px + var(--safe-b));flex:1;overscroll-behavior:contain}
.grp{margin-bottom:10px}
.grp h3{display:flex;justify-content:space-between;font-family:var(--roman);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);padding:6px 0 4px;border-bottom:1px solid var(--linen)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--card);border-radius:999px;background:#fff;font-size:14px;line-height:1.1;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.chip em{font-style:normal;font-size:11px;color:var(--ink-2);background:var(--mist);border-radius:999px;padding:2px 7px}
.chip.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.sel em{background:rgba(255,255,255,.2);color:#fff}
.chip.lifting,.seated li.lifting{opacity:.35}
.empty{color:var(--ink-2);font-style:italic;padding:12px 0}

/* selection bar */
.selbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--panel) + 10px);z-index:18;display:flex;gap:8px;align-items:center;
  background:var(--ink);color:#fff;border-radius:999px;padding:8px 10px 8px 16px;box-shadow:var(--lift);font-size:14px;white-space:nowrap;max-width:94vw}
.selbar .msg{overflow:hidden;text-overflow:ellipsis}
.selbar button{border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:4px 10px;font-size:13px}
.side.full ~ .selbar{bottom:calc(88dvh + 10px)}

/* table sheet */
.scrim{position:fixed;inset:0;background:rgba(34,60,87,.25);z-index:24}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:25;max-height:82dvh;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(34,60,87,.25);display:flex;flex-direction:column}
.sheet header{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 14px 8px;border-bottom:1px solid var(--linen)}
.sheet .tlabel{font-family:var(--roman);font-size:22px;border:0;border-bottom:1px dashed var(--card);background:none;width:12ch;padding:0 0 2px;border-radius:0}
.seatsrow{font-size:14px;color:var(--ink-2);margin-top:6px}
.seatsrow input{width:3.4em;border:1px solid var(--card);border-radius:6px;padding:2px 4px;text-align:center}
.sheet .x{font-size:28px;line-height:1;padding:0 8px}
.seated{list-style:none;overflow:auto;padding:6px 8px;overscroll-behavior:contain}
.seated li{display:grid;grid-template-columns:1.6em 1fr auto auto;gap:4px 6px;align-items:center;padding:6px;border-bottom:1px solid var(--linen);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.seated li .n{grid-column:1;grid-row:1/3;font-size:12px;color:var(--ink-2);text-align:center}
.seated li .name{grid-column:2;grid-row:1;text-align:left;font-size:15px;padding:2px 0}
.seated li .meta{grid-column:2;grid-row:2;font-size:11px;color:var(--ink-2);margin-top:-4px}
.seated li .sm{grid-column:3;grid-row:1/3;font-size:12px;border:1px solid var(--card);border-radius:999px;padding:4px 10px}
.seated li .rm{grid-column:4;grid-row:1/3;font-size:20px;line-height:1;padding:0 6px;color:var(--claret)}
.seated li.free{display:block;text-align:center;font-size:13px;color:var(--ink-2);font-style:italic;border:0;padding:10px}
.seated li.extra{background:var(--rose)}
.sheet footer{display:flex;gap:8px;padding:10px 14px calc(12px + var(--safe-b));border-top:1px solid var(--linen)}
.sheet footer button{flex:1;border:1px solid var(--ink);border-radius:999px;padding:9px;font-size:14px}
.sheet footer button.primary{background:var(--ink);color:#fff}
.sheet footer button:disabled{opacity:.45;cursor:default}

/* ghost, toast, notice */
.ghost{position:fixed;left:0;top:0;z-index:40;pointer-events:none;background:var(--ink);color:#fff;border-radius:999px;padding:8px 14px;font-size:14px;box-shadow:var(--lift);translate:-50% -150%;white-space:nowrap}
body.dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
.toast{position:fixed;left:50%;top:calc(var(--safe-t) + 78px);transform:translateX(-50%);z-index:50;background:#fff;color:var(--ink);border:1px solid var(--card);border-radius:12px;padding:10px 16px;font-size:14px;box-shadow:var(--lift);opacity:0;pointer-events:none;transition:opacity .2s;max-width:92vw;text-align:center}
.toast.show{opacity:1}
.toast.err{border-color:var(--claret);color:var(--claret)}
.offline{position:fixed;left:0;right:0;top:0;z-index:60;background:var(--claret);color:#fff;text-align:center;font-size:13px;padding:6px}
.notice{position:fixed;inset:0;z-index:100;background:var(--linen);display:grid;place-items:center;padding:20px}
.notice .card{background:#fff;border-radius:16px;padding:28px 24px;max-width:360px;text-align:center;box-shadow:var(--print)}
.notice .names{font-family:var(--roman);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.notice h1{font-family:var(--roman);font-weight:400;font-size:28px;margin:6px 0 10px}

/* dialog */
dialog{border:0;border-radius:16px;padding:0;max-width:min(92vw,420px);width:100%;box-shadow:var(--lift);color:var(--ink)}
dialog::backdrop{background:rgba(34,60,87,.35)}
#dlg-form{padding:20px 18px}
#dlg-form h2{font-family:var(--roman);font-weight:400;font-size:22px;margin-bottom:12px}
#dlg-form label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:10px}
#dlg-form input,#dlg-form select{display:block;width:100%;margin-top:3px;padding:9px 10px;border:1px solid var(--card);border-radius:10px;background:#fff;font-size:16px}
.dlg-actions{display:flex;gap:8px;align-items:center;margin-top:14px}
.spacer{flex:1}
.dlg-actions button{border:1px solid var(--ink);border-radius:999px;padding:8px 14px;font-size:14px}
.dlg-actions .primary{background:var(--ink);color:#fff}
.dlg-actions .danger{border-color:var(--claret);color:var(--claret)}

/* desktop: map left, guest list right, table sheet as a right-hand drawer */
@media (min-width:900px){
  .top{grid-template-columns:auto 1fr auto;padding:12px 22px}
  .brand h1{font-size:24px}
  .stats{grid-column:auto;justify-self:center;font-size:14px}
  .layout{display:grid;grid-template-columns:minmax(420px,600px) 1fr;gap:18px;height:calc(100dvh - 74px);padding:18px 22px}
  .board{padding:0;overflow:auto}
  .map{width:100%;max-width:600px}
  .side{position:static;height:auto;border-radius:16px;border:1px solid var(--card);box-shadow:none;min-height:0}
  .side.full{height:auto}
  .handle{display:none}
  .sidehead{padding-top:14px}
  .selbar,.side.full ~ .selbar{bottom:24px}
  .sheet{left:auto;right:22px;top:92px;bottom:22px;width:400px;max-height:none;border-radius:16px}
  .scrim{background:transparent}
}