/* Wedding Charts — the editor chrome.
   A visual clone of the iOS app's chrome (Theme/AppTheme.swift +
   Views/Editor/*): warm paper, floating warm-white cards with hairline edges
   and rose-tinted lift, one rose accent, serif only at display moments.
   There is NO top bar — every control floats over the canvas, exactly as the
   app lays it out. Values are the app's, not approximations. */

:root{
  /* AppTheme, verbatim */
  --paper:#FBFAF8;
  --white:#FFFFFF;
  --ink:#221D20;
  --muted:#77696F;
  --hairline:#E8E2DD;
  --rose:#DE97AA;
  --rose-deep:#C06A81;
  --blush:#FCF1F4;          /* AppTheme.roseWash */
  --fill:#F3EEE9;
  --sage:#9AAE9A;
  /* EditorChromeStyle, verbatim */
  --cream:#F6F1E8;
  --tan:#EFDFC8;
  --tan-border:#D8C39F;
  --danger:#D0453E;
  --canvas:#FAF9F5;

  /* New York is unreachable in a browser; Georgia is its closest metric match
     (Didot read a third lighter than the app). Keep in step with render.js. */
  --serif:Georgia,"Iowan Old Style",Charter,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  /* chromeCard: roseDeep 12%, radius 18 y 6 (SwiftUI sigma -> CSS blur x2) */
  --card-shadow:0 6px 36px rgba(192,106,129,.12);
  /* menu cards: ink 16%, radius 22 y 10 */
  --menu-shadow:0 10px 44px rgba(34,29,32,.16);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;overscroll-behavior:none;
}
h1,h2,h3,p,ul,ol{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.ico{display:block;flex:0 0 auto}
.hidden{display:none !important}

/* Kickers: 10pt semibold, 4pt tracking — the app's one and only caps voice,
   used for section labels, never for navigation. */
.sc{font-size:10px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;line-height:1.5}
.sc-rose{color:var(--rose)}
.sc-muted{color:var(--muted)}
.display{font-family:var(--serif);font-weight:500;letter-spacing:-.005em}
.body-copy{color:var(--muted);font-size:13.5px;line-height:1.6}

/* ------------------------------------------------------------------ buttons
   DashRoseButtonStyle / quiet capsules — sentence case, never tracked caps. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:999px;border:1px solid transparent;
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s var(--ease),
    border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.btn-sm{padding:7px 13px;font-size:12.5px}
.btn-primary{
  background:var(--rose);border-color:var(--rose);color:#fff;font-weight:600;
  box-shadow:0 6px 18px -8px rgba(192,106,129,.55);
}
.btn-primary:hover{background:var(--rose-deep);border-color:var(--rose-deep)}
.btn-primary:active{transform:scale(.975);box-shadow:none}
.btn-secondary{background:var(--fill);border-color:transparent;color:var(--ink)}
.btn-secondary:hover{background:#ECE5DE}
.btn:disabled{opacity:.45;cursor:default}

/* Round chrome icon button (ChromeIconButton): 32pt circle, tan when active. */
.qbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:30px;height:30px;padding:0 6px;border-radius:999px;color:var(--ink);
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.qbtn:hover{background:var(--fill)}
.qbtn:disabled{opacity:.3;pointer-events:none}
.qbtn.on{background:var(--tan)}
.qbtn.danger:hover{color:var(--danger);background:var(--blush)}

/* Text+icon action inside a floating pill (EditorView.pillAction). */
.pill-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:11px;
  font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;
  transition:background-color .18s var(--ease);
}
.pill-btn .ico{color:var(--muted)}
.pill-btn:hover{background:var(--fill)}
.pill-btn.on{background:var(--tan)}

/* Small standalone capsule (AccountBarButton, My charts). */
.chip-pill{
  display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
  background:var(--white);border:1px solid var(--hairline);
  font-size:12.5px;color:var(--ink);white-space:nowrap;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.chip-pill .ico{color:var(--muted)}
.chip-pill:hover{border-color:#D8D2CB}

/* Floating chrome surface (View.chromeCard). */
.chrome-card{
  background:var(--white);border:1px solid var(--hairline);
  box-shadow:var(--card-shadow);
}

/* -------------------------------------------------------------------- shell */
.shell{display:flex;height:100%;min-height:0}

/* ------------------------------------------------- guest panel (GuestPanel)
   A full-height side panel on the app's surface white, hairline right edge —
   the ONE panel that does not float. 340pt wide, exactly the app's. */
.panel{
  width:340px;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;
  background:var(--white);border-right:1px solid var(--hairline);
  transition:width .24s var(--ease);
}
/* Collapsed: the app's GuestListRail — 38pt, icon, rotated kicker, chevron. */
.panel.collapsed{width:38px;align-items:center;justify-content:center;cursor:pointer}
.panel.collapsed .rail-label{display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--muted)}
.panel.collapsed .rail-label .ico:first-child{color:var(--ink)}
.panel.collapsed .rail-word{writing-mode:vertical-rl;transform:rotate(180deg)}
.rail-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:999px;color:var(--muted);transition:background-color .18s var(--ease)}
.rail-toggle:hover{background:var(--fill);color:var(--ink)}

.panel-head{display:flex;align-items:center;gap:8px;padding:14px 14px 11px}
.panel-head .spacer{flex:1}

/* Segmented capsule (GuestSegmented): cream track, white active pill. */
.seg-caps{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;
  background:var(--cream)}
.seg-caps button{padding:5px 12px;border-radius:999px;font-size:12px;color:var(--muted);
  white-space:nowrap;transition:color .16s var(--ease),background-color .16s var(--ease)}
.seg-caps button.on{background:var(--white);border:1px solid var(--hairline);
  color:var(--ink);font-weight:600;padding:4px 11px}
.seg-caps.mini button{font-size:11px;padding:5px 10px}
.seg-caps.mini button.on{padding:4px 9px}

/* Add row: cream field, rose-wash plus, dashed import (GuestPanel.addRow). */
.panel-add{display:flex;gap:8px;padding:0 14px 10px}
.panel-add input{
  flex:1;min-width:0;padding:9px 12px;border:1px solid var(--hairline);border-radius:10px;
  background:var(--cream);font-size:13px;outline:none;transition:border-color .2s var(--ease);
}
.panel-add input:focus{border-color:var(--rose);background:var(--white)}
.btn-add{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex:0 0 auto;border:1px solid rgba(222,151,170,.6);border-radius:10px;
  background:var(--blush);color:var(--rose-deep);
  transition:background-color .2s var(--ease)}
.btn-add:hover{background:#F9E6EC}
.btn-import{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex:0 0 auto;border:1px dashed var(--hairline);border-radius:10px;background:var(--white);
  color:var(--ink);transition:border-color .2s var(--ease)}
.btn-import:hover{border-color:#CFC8C0}

/* Search: cream capsule with the magnifier (GuestPillField). */
.panel-search{padding:0 14px 10px;display:flex;align-items:center;gap:8px}
.panel-search .searchwrap{display:flex;align-items:center;gap:7px;padding:8px 11px;
  border-radius:999px;background:var(--cream);border:1px solid var(--hairline)}
.panel-search .searchwrap:focus-within{border-color:var(--rose)}
.panel-search .searchwrap .ico{color:var(--muted)}
.panel-search input{flex:1;min-width:0;border:0;background:none;font-size:13px;outline:none}
.panel-search input::-webkit-search-cancel-button{display:none}

.panel-search{display:flex;align-items:center;gap:8px}
.panel-search .searchwrap{flex:1;min-width:0}
.search-clear{display:flex;color:rgba(119,105,111,.7);border-radius:999px;padding:2px}
.search-clear:hover{color:var(--ink)}
.group-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex:0 0 auto;border:1px solid var(--hairline);border-radius:10px;background:var(--cream);
  color:var(--ink)}
.group-btn:hover{border-color:#CFC8C0}

.panel-hair{height:1px;background:var(--hairline);flex:0 0 auto}

/* Guest rows: two lines — name over placement — like the app's list. */
.guest-list{flex:1;min-height:0;overflow-y:auto;padding:2px 0 6px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.guest-list .empty{padding:22px 20px;color:var(--muted);font-size:12.5px;text-align:center}
.grow{
  display:flex;align-items:center;gap:9px;padding:8px 14px;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
  border-left:2px solid transparent;
  transition:background-color .16s var(--ease);
}
.grow:hover{background:var(--paper)}
.grow.sel{background:rgba(239,223,200,.55);border-left-color:var(--tan-border)}
.grow.lifting{opacity:.4}
.gdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;border:1px solid var(--hairline)}
.gcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.gname{min-width:0;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gplace{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gparty{font-size:10px;font-weight:600;color:var(--muted);background:var(--fill);
  border-radius:999px;padding:1px 6px;flex:0 0 auto}
.gflag{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:var(--fill);color:var(--muted);flex:0 0 auto}
.gflag.pend{background:rgba(204,153,84,.18);color:#8A6524}
.gflag.plus{background:var(--blush);color:var(--rose-deep)}
.grow-more{opacity:0;color:var(--muted);padding:3px;border-radius:999px;flex:0 0 auto}
.grow:hover .grow-more,.grow:focus-within .grow-more{opacity:1}
.grow-more:hover{color:var(--ink);background:var(--fill)}

/* Rules tab (GuestPanel.rulesTab). */
.rules-tab{flex:1;min-height:0;overflow-y:auto;padding:14px}
.rules-tab .lede{font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:12px}
/* Every select in the app wears the app's field chrome, not the browser's.
   Without an appearance reset the native control keeps its grey fill, inset
   bevel and system chevron — which is what made the Rules pickers look like
   a different product. The chevron is drawn here so it matches the ink. */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1.4 5 5.4 9 1.4' fill='none' stroke='%2377696F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
  padding-right:30px}
select::-ms-expand{display:none}

.rule-pick{width:100%;padding:9px 11px;border:1px solid var(--hairline);border-radius:11px;
  background-color:var(--cream);font-size:13px;color:var(--ink);outline:none;margin-bottom:8px;
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.rule-pick:hover{border-color:rgba(34,29,32,.2)}
.rule-pick:focus{border-color:var(--rose);background-color:var(--white)}
.rule-join{font-size:12px;color:rgba(34,29,32,.75);text-align:center;margin:0 0 8px}
.rule-go{display:block;width:100%;padding:8px 0;border-radius:10px;background:#C4A6A0;
  color:#fff;font-size:12.5px;font-weight:500;text-align:center;
  transition:opacity .18s var(--ease)}
.rule-go:disabled{background:#D9CCC8;cursor:default}
.rules-tab .sc{display:block;margin:16px 0 4px}
.rule-row{display:flex;align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--hairline);font-size:12.5px}
.rule-row:last-child{border-bottom:0}
.rule-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rule-x-btn{display:flex;color:rgba(119,105,111,.6);flex:0 0 auto}
.rule-x-btn:hover{color:var(--danger)}

/* Footer: counts + Arrange capsule + destructive Unseat all (GuestPanel.footer). */
.panel-foot{display:flex;align-items:center;gap:8px;padding:7px 14px;
  border-top:1px solid var(--hairline);background:var(--white)}
.panel-foot .tallies{flex:1;min-width:0;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrange-btn{
  display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;
  background:var(--blush);border:1px solid rgba(222,151,170,.6);
  font-size:12px;font-weight:500;color:var(--rose-deep);white-space:nowrap;
  transition:background-color .18s var(--ease);
}
.arrange-btn:hover{background:#F9E6EC}
.arrange-btn .ico{color:var(--rose-deep)}
.unseat-btn{padding:7px 4px;font-size:12px;font-weight:500;color:var(--danger);white-space:nowrap}
.unseat-btn:hover{opacity:.8}

@media (max-width:1000px){
  .panel{width:300px}
}

/* -------------------------------------------------------------------- stage */
.stage{position:relative;flex:1;min-width:0;background:var(--canvas)}
#canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;
  cursor:default;-webkit-user-select:none;user-select:none}
body.dragging #canvas{cursor:grabbing}
#canvas text{font-family:var(--sans);pointer-events:none;-webkit-user-select:none;user-select:none}
#canvas .tbl,#canvas .obj{cursor:grab}
#canvas .tbl.locked,#canvas .obj.locked{cursor:default}
#canvas .grip{cursor:pointer}
#canvas .venue-grip{cursor:nwse-resize}
/* The app's drop treatment: the chair chip GROWS 1.15x under a carried guest
   (the static rose ring draws in the drag layer) — no pulse, no edge recolor. */
#canvas .seat.drop .disc{transform:scale(1.15)}

/* --------------------------------------- title pill, top-left (TitlePill) */
.chrome-tl{position:absolute;top:10px;left:16px;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px;z-index:31;max-width:min(440px,calc(100% - 200px))}
.title-pill{
  display:flex;align-items:center;gap:4px;padding:8px 10px;border-radius:18px;
}
.pill-mark{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;overflow:hidden;flex:0 0 auto;
  transition:transform .16s var(--ease)}
.pill-mark:hover{transform:scale(1.04)}
.pill-mark img,.pill-mark svg{display:block;width:30px;height:30px;border-radius:8px}
.pill-div{width:1px;height:26px;background:var(--hairline);margin:0 4px;flex:0 0 auto}
.pill-title{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-width:0;padding-right:6px;text-align:left}
.pill-title .t-name{font-family:var(--serif);font-weight:500;font-size:15px;color:var(--ink);
  max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.t-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:nowrap}
.t-status .dot{width:6px;height:6px;border-radius:50%;background:var(--sage);flex:0 0 auto}
.t-status.dirty .dot{background:#CC9954}
.t-status.saving .dot{background:var(--muted)}
.t-status.failed .dot{background:#B4506C}

/* -------------------- actions pill + account, top-right (EditorView) */
.chrome-tr{position:absolute;top:10px;right:16px;display:flex;align-items:center;gap:8px;z-index:31}
.actions-pill{display:flex;align-items:center;gap:2px;padding:5px 8px;border-radius:18px}
.theme-swatch{display:block;width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  background:var(--fill);border:1px solid var(--hairline)}

/* ------------------------------------------------- zoom pill (ZoomControls) */
.zoomctl{
  position:absolute;bottom:20px;right:20px;z-index:30;
  display:flex;align-items:center;gap:2px;padding:5px 6px;border-radius:20px;
}
.zoomctl .qbtn{width:30px;padding:0}
.zoomctl .qbtn.fit{color:var(--muted)}

/* --------------------------------------------- quick-add bar (EditorToolbar) */
.addbar{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:2px;padding:5px 8px;border-radius:18px;
  max-width:calc(100% - 190px);overflow-x:auto;
}
.add-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:11px;
  color:var(--ink);white-space:nowrap;transition:background-color .18s var(--ease);
}
.add-btn:hover{background:var(--fill)}
.add-btn .ico{color:var(--muted)}
.add-btn span{font-size:13px;font-weight:500}
@media (max-width:980px){
  .add-btn span{display:none}
  .add-btn{padding:9px 10px}
  .addbar{max-width:calc(100% - 160px)}
}

/* ------------------- selection bars, top-leading (FloatingTableBar) */
.selbar{
  position:absolute;left:16px;top:76px;z-index:30;
  display:none;flex-direction:column;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:16px;
  background:var(--white);border:1px solid var(--hairline);
  box-shadow:0 4px 24px rgba(34,29,32,.08);
  opacity:0;transform:translateY(-8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
  max-width:calc(100% - 32px);
}
.selbar.in{display:flex;opacity:1;transform:none}
.sel-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sel-name{width:140px;padding:7px 10px;border:1px solid var(--hairline);border-radius:10px;
  background:var(--cream);font-size:13px;font-weight:500;outline:none}
.sel-name:focus{border-color:var(--rose)}
/* Bordered stepper chip: small buttons that DISABLE at the bounds. */
.stepchip{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:10px;
  background:var(--white);border:1px solid var(--hairline);white-space:nowrap}
.stepchip span{font-size:12px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums}
.stepchip button{display:flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:6px;color:var(--ink)}
.stepchip button:hover{background:var(--fill)}
.stepchip button:disabled{color:rgba(119,105,111,.35);pointer-events:none}
/* Quiet bordered chip (size, guests, rotation, Style). */
.chip-plain{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:10px;
  font-size:12px;font-weight:500;color:var(--ink);background:var(--white);
  border:1px solid var(--hairline);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.chip-plain:hover{border-color:#CFC8C0}
.rot-chip .ico{color:var(--ink)}
.rot-deg{font-variant-numeric:tabular-nums}
.color-chip{width:18px;height:18px;border-radius:50%;border:1px solid var(--hairline);
  flex:0 0 auto;transition:transform .16s var(--ease)}
.color-chip:hover{transform:scale(1.1)}
.style-chip .style-swatch{width:14px;height:14px;border-radius:50%;
  border:1px solid var(--hairline);flex:0 0 auto}
.bar-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;color:var(--ink)}
.bar-icon:hover{background:var(--fill)}
.bar-icon.danger{color:var(--danger)}
.bar-icon.danger:hover{background:var(--blush)}

/* The guests-at-this-table strip: 36px chips, group dot at (4,-4), first-name
   caption, and the dashed Edit seats chip into the inspector. */
.guest-strip{display:flex;align-items:flex-start;gap:10px;padding:2px 0;
  max-width:640px;overflow-x:auto;scrollbar-width:thin}
.strip-seat{display:flex;flex-direction:column;align-items:center;gap:3px;width:48px;
  flex:0 0 auto;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}
.strip-seat.lifting{opacity:.4}
.strip-chip{position:relative;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:11px;background:var(--cream);
  border:1px solid var(--hairline)}
.strip-chip.occ{background:#A5647A;border-color:transparent}
.strip-label{font-size:12px;font-weight:600;color:var(--muted)}
.strip-chip.occ .strip-label{font-size:11px;color:#FFFFFF}
.strip-dot{position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;
  border:1.2px solid #FFFFFF}
.strip-seat.drop .strip-chip{box-shadow:0 0 0 2px var(--rose)}
.strip-cap{width:48px;font-size:9px;color:var(--muted);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-edit{align-self:center;margin-left:2px;flex:0 0 auto}

/* Color / style popover furniture. */
.pal-row{display:flex;align-items:center;gap:7px;padding:6px 6px 4px;flex-wrap:wrap}
.pal-sw{width:24px;height:24px;border-radius:50%;border:1px solid var(--hairline);
  flex:0 0 auto;transition:transform .14s var(--ease)}
.pal-sw:hover{transform:scale(1.08)}
.pal-sw.on{border:2px solid var(--rose)}
.side-chip{padding:7px 11px;border-radius:10px;font-size:12px;font-weight:500;color:var(--ink);
  background:var(--white);border:1px solid var(--hairline);white-space:nowrap}
.side-chip.on{background:var(--tan);border-color:var(--tan-border)}
.side-chip.inert,.side-chip:disabled{color:rgba(119,105,111,.55);border-style:dashed}
.size-row{display:flex;align-items:center;gap:8px;padding:4px 3px 8px;flex-wrap:wrap}
.vdiv{width:1px;height:20px;background:var(--hairline);margin:0 2px}
.style-pop{width:300px;padding:8px 8px 4px}
.style-label{font-size:12px;color:var(--muted);padding:0 2px}
.style-icons-head{display:flex;align-items:center;gap:6px;padding:6px 2px}
.style-icons-head .spacer{flex:1}
.style-icons-head .icon-cell{width:36px;height:30px}
.style-catalog{max-height:250px;overflow-y:auto;padding:0 2px}
.icon-grid.six{grid-template-columns:repeat(6,1fr)}
.style-lock{display:flex;align-items:center;justify-content:space-between;
  padding:9px 2px;font-size:13px;color:var(--ink);cursor:pointer}
.style-lock input{position:absolute;opacity:0;pointer-events:none}

/* Quick-add popovers (AddTablePopover / AddChairRowsPopover): 250pt card. */
.addpop{width:234px;padding:8px}
.addpop-label{font-size:12px;color:var(--muted);margin:6px 0}
.addpop-label:first-child{margin-top:0}
.addpop-name{width:100%;padding:8px 10px;border:1px solid var(--hairline);border-radius:9px;
  background:var(--cream);font-size:13px;outline:none}
.addpop-name:focus{border-color:var(--rose)}
.addpop-step{display:flex;align-items:center;border:1px solid var(--hairline);
  border-radius:9px;background:var(--white)}
.addpop-step button{display:flex;align-items:center;justify-content:center;
  width:36px;height:32px;color:var(--ink)}
.addpop-step button:disabled{color:rgba(119,105,111,.35)}
.addpop-step span{flex:1;text-align:center;font-size:14px;font-weight:500;
  font-variant-numeric:tabular-nums}
.addpop-note{font-size:11.5px;color:var(--muted);line-height:1.5;margin:10px 0 0}
.addpop-go{display:block;width:100%;margin-top:12px;padding:9px 0;border-radius:10px;
  background:#C4A6A0;color:#fff;font-size:13px;font-weight:500;text-align:center}
.addpop-go:hover{background:#B8968F}

/* ------------------------------------- checks card (ValidationPanel), b-l */
.checks-panel{
  position:absolute;left:20px;bottom:20px;z-index:30;width:360px;max-width:calc(100% - 40px);
  border-radius:22px;background:var(--white);border:1px solid var(--hairline);
  box-shadow:var(--card-shadow);overflow:hidden;
  animation:rise .22s var(--ease);
  transition:bottom .2s var(--ease);
}
/* Lifted above the quick-add toolbar when their x-ranges would intersect. */
.checks-panel.lifted{bottom:74px}
.checks-head{display:flex;align-items:center;gap:8px;padding:10px 8px 10px 16px}
.checks-head .t{font-family:var(--serif);font-weight:500;font-size:15px}
.checks-count{font-size:10px;font-weight:600;color:#fff;background:var(--rose);
  border-radius:999px;padding:2px 6px}
.checks-head .spacer{flex:1}
.checks-list{max-height:300px;overflow-y:auto;border-top:1px solid var(--hairline)}
/* Dividers BETWEEN rows are inset 42pt, the app's leading pad. */
.check-row{display:flex;align-items:flex-start;gap:10px;width:100%;padding:11px 16px;
  position:relative;font-size:13px;text-align:left;
  transition:background-color .14s var(--ease)}
.check-row + .check-row::before{content:"";position:absolute;left:42px;right:0;top:0;
  height:1px;background:var(--hairline)}
.check-row[data-table]:hover{background:var(--paper)}
.check-row .ico{margin-top:2px;color:var(--muted)}
.check-row.hot .ico{color:#B4506C}
.check-row.warn .ico{color:#CC9954}
.check-row .check-msg{flex:1;line-height:1.5}
.check-row .chev{margin-top:3px;color:rgba(119,105,111,.6)}
.checks-clear{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:13px;
  color:var(--muted)}
.checks-clear .ico{color:var(--sage)}

/* ------------------------------------------------------------------- menus
   Dropdown cards (DocumentMenuCard / themeMenuCard): radius 13, deep lift. */
#menus{position:fixed;inset:0;pointer-events:none;z-index:60}
.menu{
  position:fixed;pointer-events:auto;min-width:200px;max-width:290px;padding:8px;
  background:var(--white);border:1px solid var(--hairline);border-radius:13px;
  box-shadow:var(--menu-shadow);opacity:0;transform:translateY(4px) scale(.98);
  transition:opacity .16s var(--ease),transform .16s var(--ease);
  max-height:70vh;overflow-y:auto;
}
.menu.in{opacity:1;transform:none}
.menu-wide{min-width:240px}
.menu-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;
  font-size:13.5px;text-align:left;transition:background-color .14s var(--ease)}
.menu-row:hover{background:var(--blush)}
.menu-row .ico{color:var(--rose)}
.menu-row.on{background:var(--blush)}
.ico-gap{width:15px;flex:0 0 auto}
.menu-title{padding:12px 10px 4px}
.menu-sep{height:1px;background:var(--hairline);margin:6px 4px}
.theme-dot{width:15px;height:15px;border-radius:50%;border:1px solid;flex:0 0 auto}
.menu-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:3px}
.icon-cell{display:flex;align-items:center;justify-content:center;height:34px;border-radius:9px;
  color:var(--muted);border:1px solid transparent;transition:all .14s var(--ease)}
.icon-cell:hover{background:var(--paper);color:var(--ink)}
.icon-cell.on{background:var(--blush);border-color:rgba(222,151,170,.5);color:var(--rose-deep)}

/* ------------------------------------------------------------------ modals
   Sheets: paper surface, radius 24 (AppTheme.radiusSheet). */
.modal-scrim{
  position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(34,29,32,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.modal-scrim.open{display:flex}
.sheet-card{
  position:relative;width:100%;max-width:430px;max-height:88vh;overflow-y:auto;
  padding:26px 26px 22px;background:var(--paper);border:1px solid var(--hairline);border-radius:24px;
  box-shadow:0 30px 70px -30px rgba(34,29,32,.5);
  animation:rise .22s var(--ease);
}
.sheet-card.wide{max-width:600px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sheet-head{margin-bottom:18px;padding-right:30px}
.sheet-head .sc{display:block;margin-bottom:9px}
.sheet-head h2{font-size:24px;line-height:1.2;color:var(--ink)}
.sheet-head p{margin-top:9px}
.sheet-x{position:absolute;top:18px;right:18px;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;color:var(--muted)}
.sheet-x:hover{background:var(--fill);color:var(--ink)}
.sheet-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.sheet-actions .btn:first-child:last-child{margin-left:auto}

.field{margin-bottom:14px}
.field label{display:block;font-size:10px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:10px 12px;border:1px solid var(--hairline);
  border-radius:12px;background-color:var(--white);font-size:14px;outline:none;
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.field input:focus,.field select:focus{border-color:var(--rose)}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.row2 label{margin-bottom:6px}
.check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);
  margin-bottom:10px;cursor:pointer}
.check input{width:15px;height:15px;accent-color:var(--rose)}
.pick{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.pick select{padding:7px 10px;border:1px solid var(--hairline);border-radius:10px;background:var(--white)}
.note-line{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:10px}
.note-line.err{color:var(--danger)}
.meta-line{font-size:11px;color:var(--muted);margin-top:6px}
.link{font-size:12px;font-weight:500;color:var(--rose)}
.link:hover{color:var(--rose-deep)}
.link.danger{color:var(--muted)}
.link.danger:hover{color:var(--danger)}

/* checks sheet (kept for narrow screens) */
.check-list{max-height:44vh;overflow-y:auto;margin:0 -4px}
.check-list .check-row{border-top:0;border-bottom:1px solid var(--hairline);padding:11px 4px;
  align-items:baseline}
.check-list .check-row:last-child{border-bottom:0}
.chip-sev{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:var(--fill);
  font-size:9px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.check-list .sev-5 .chip-sev,.check-list .sev-4 .chip-sev{background:var(--blush);color:var(--rose-deep)}
.check-msg{flex:1;font-size:13px;line-height:1.5}
.check-row.ok .check-msg{color:var(--muted)}

/* rules sheet (legacy surface; the panel tab is the primary home) */
.rule-list{margin-bottom:16px}
.rule-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:13.5px}
.rule-list .empty{color:var(--muted);font-size:12.5px;border-bottom:0}
.rule-x{font-family:var(--serif);font-style:italic;color:var(--rose);font-size:12px}
.rule-list .link{margin-left:auto}
.rule-add{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rule-add select{flex:1;min-width:130px;padding:9px 11px;border:1px solid var(--hairline);
  border-radius:10px;background:var(--white);font-size:13px}

/* export */
.export-opts{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--hairline)}
.export-opts .check{margin-bottom:0}
.export-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.export-list li:last-child{border-bottom:0}
.export-list div{flex:1;min-width:0}
.export-list b{display:block;font-size:14px;font-weight:500;font-family:var(--serif)}
.export-list span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.export-kicker{padding:14px 0 2px}

/* seat finder */
.qr-block{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.qr-tile{padding:12px;background:var(--white);border:1px solid var(--hairline);border-radius:16px}
.qr-tile svg{display:block;width:132px;height:132px}
.qr-side{flex:1;min-width:190px}
.qr-url{display:block;margin-top:7px;font-size:12.5px;color:var(--rose);word-break:break-all}
.qr-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* ----------------------------------------------------------------- loader */
@keyframes seatPulse{
  0%,100%{transform:scale(1);opacity:.3}
  50%{transform:scale(1.18);opacity:.9}
}
@keyframes heartBeat{
  0%,100%{transform:scale(1)}
  45%{transform:scale(1.14)}
  60%{transform:scale(1.06)}
}
/* Stark and small, the app's BrandLoader: a ~60px mark on plain paper. */
.wc-lattice{
  width:var(--lattice,60px);height:var(--lattice,60px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--lattice-gap,9px);
}
.wc-lattice i{
  border-radius:50%;background:var(--rose);opacity:.35;
  animation:seatPulse 1s cubic-bezier(.4,0,.2,1) var(--d,0s) infinite;
}
.wc-lattice .h{
  display:block;width:100%;height:100%;justify-self:center;align-self:center;fill:var(--rose);
  animation:heartBeat 1.2s ease-in-out var(--d,0s) infinite;transform-origin:center;
}
/* Quiet caption, well under the mark: 10px, muted, wide-tracked caps. */
.wc-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.wc-loader .cap{
  font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);
}
.wc-loader.sm{gap:14px}
.wc-loader.sm .cap{font-size:9px;letter-spacing:.24em}
.boot{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:var(--paper);transition:opacity .4s var(--ease);
}
.boot.out{opacity:0;pointer-events:none}
.busy-scrim{
  position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
  background:rgba(251,250,248,.94);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:rise .2s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .wc-lattice i,.wc-lattice .h{animation:none}
  .wc-lattice i{opacity:.45}
}

/* ------------------------------------------------------------------ ghost
   The drag chip is the app's GuestDragPreview: a white capsule, hairline. */
.ghost{
  position:fixed;left:0;top:0;z-index:80;display:none;align-items:center;gap:8px;
  height:32px;padding:0 9px;background:var(--white);
  border:1px solid var(--rose);border-radius:16px;
  box-shadow:0 3px 16px rgba(192,106,129,.18);pointer-events:none;will-change:transform;
}
.ghost.on{display:inline-flex}
.ghost .dot{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;flex:0 0 auto;font-size:9px;font-weight:600;color:#FFFFFF}
.ghost .chip-name{font-size:12px;font-weight:500;white-space:nowrap}

/* ------------------------------------------------------------------ toast
   The app's ToastOverlay: a white capsule at the TOP, colored icon, ink text.
   Never a black bar. */
.toast{
  position:fixed;left:50%;top:64px;transform:translate(-50%,-10px);z-index:90;
  display:flex;align-items:center;gap:8px;
  max-width:min(480px,calc(100% - 32px));padding:10px 16px;
  background:var(--white);color:var(--ink);border:1px solid var(--hairline);border-radius:999px;
  font-size:13px;font-weight:500;line-height:1.45;
  box-shadow:0 4px 28px rgba(192,106,129,.15);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ico{color:var(--rose)}
.toast-act{margin-left:4px;font-size:13px;font-weight:600;color:var(--rose-deep);pointer-events:auto}
.toast.show{pointer-events:auto}
.toast.error .ico{color:#B4506C}
.toast.success .ico{color:#739473}

/* ------------------------------------------------------------------ print */
#printroot{display:none}
#printroot .sheet{margin:0 auto}
@media print{
  html,body{height:auto;overflow:visible}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ------------------------------------------------------- narrow (tablet) */
@media (max-width:820px){
  .panel{width:280px}
  .chrome-tl{max-width:calc(100% - 120px)}
  .pill-title .t-name{max-width:150px}
  .chrome-tr .chip-pill span{display:none}
  .sheet-card{padding:22px 20px 18px;border-radius:20px}
  .addbar{bottom:14px}
  .zoomctl{bottom:14px;right:14px}
  .checks-panel{bottom:58px;left:14px}
}

.qr-busy{display:flex;justify-content:center;padding:26px 0 8px}

/* ==========================================================================
   Parity surfaces: the document menu, the guest editor, the importers, the
   icon catalog, version history, and the typeable dimension fields.
   ========================================================================== */

/* --------------------------------------------------------- taller menus */
.menu-tall .menu-scroll{max-height:min(58vh,460px);overflow-y:auto;overscroll-behavior:contain}
.menu-row.disabled{color:#B2ACA5;cursor:default}
.menu-row.disabled:hover{background:none}
.menu-row.check-row{gap:7px}
.menu-tick{display:flex;width:16px;flex:0 0 auto;color:var(--rose);opacity:0}
.menu-tick.on{opacity:1}

/* ----------------------------------------------------------- icon catalog */
.icon-catalog{max-height:230px;overflow-y:auto;padding:2px 4px 4px;
  border:1px solid var(--hairline);background:var(--white);border-radius:12px}
.menu-scroll .icon-grid,.icon-catalog .icon-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:0 0 6px}
.cat-sec{padding:9px 2px 4px}
.icon-cell[title]{position:relative}

/* --------------------------------------------- typeable dimension fields */
.dim-row{display:flex;align-items:center;gap:7px;padding:3px;flex-wrap:wrap}
.dim{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;
  border:1px solid var(--hairline);border-radius:9px;background:var(--cream)}
.dim button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  color:var(--muted);border-radius:999px}
.dim button:hover{background:var(--fill);color:var(--ink)}
.dim-p{font-size:9.5px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.dim-u{font-size:10.5px;color:var(--muted)}
.dim-in{width:42px;text-align:center;font-size:12.5px;font-weight:500;
  font-variant-numeric:tabular-nums;border:0;background:none;padding:2px 0}
.dim-in:focus{outline:none;color:var(--rose-deep)}
.chip-dashed{padding:6px 11px;font-size:11.5px;font-weight:500;border-radius:999px;
  border:1px dashed var(--hairline);background:var(--white);color:var(--ink)}
.chip-dashed:hover{border-color:#CFC8C0}

/* ------------------------------------------------------------ guest editor */
.gcards{display:flex;flex-direction:column;gap:12px;max-height:min(62vh,560px);
  overflow-y:auto;margin:0 -4px;padding:0 4px}
.gcard{display:flex;flex-direction:column;gap:9px;padding:13px 14px;
  background:var(--white);border:1px solid var(--hairline);border-radius:16px}
.gcard>.sc{margin-bottom:-1px}
.gcard input:not([type=checkbox]),.gcard select,.gcard textarea{width:100%;padding:9px 11px;
  border:1px solid var(--hairline);background:var(--cream);border-radius:10px;
  font-size:13px;color:var(--ink)}
.gcard textarea{resize:vertical;min-height:52px;line-height:1.5;font-family:var(--sans)}
.gcard input:focus,.gcard select:focus,.gcard textarea:focus{border-color:var(--rose);outline:none}
.gcard .check{justify-content:flex-start}
.gcard .check input[type=checkbox]{width:15px;height:15px;flex:0 0 auto;padding:0}
.gcard .note-line{margin-top:0}
.gsep{height:1px;background:var(--hairline);margin:1px 0}
.grow2{display:flex;align-items:center;gap:8px}
.grow2.left{justify-content:flex-start}
.grow2.split{justify-content:space-between;font-size:13px}
.grow2 select{flex:1;min-width:0}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-flat{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:var(--white);border:1px solid var(--hairline);font-size:12px}
.chip-flat i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.chip-pick{padding:4px 10px;border-radius:999px;background:var(--white);
  border:1px solid var(--hairline);font-size:11.5px;color:var(--muted)}
.chip-pick:hover{border-color:#CFC8C0;color:var(--ink)}
.chip-pick.on{background:var(--blush);border-color:rgba(222,151,170,.5);color:var(--rose-deep)}
.chip-x{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;
  background:var(--blush);border:1px solid rgba(222,151,170,.5);font-size:12px;color:var(--ink)}
.chip-x .ico{color:var(--muted)}
.chip-x:hover .ico{color:var(--danger)}
.chip-more{font-size:12px;color:var(--muted);padding:5px 4px}

.seg{display:inline-flex;padding:2px;gap:2px;background:var(--cream);
  border-radius:999px;flex-wrap:wrap}
.seg-b{padding:6px 13px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--muted)}
.seg-b:hover{color:var(--ink)}
.seg-b.on{background:var(--white);border:1px solid var(--hairline);color:var(--ink);padding:5px 12px}

/* ------------------------------------------------------------ guest picker */
.pick-list{max-height:min(46vh,380px);overflow-y:auto;margin:0 -4px}
.pick-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;
  border-radius:9px;text-align:left}
.pick-row:hover{background:var(--blush)}
.pick-row .gname{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-tick{display:flex;color:var(--rose);opacity:0}
.pick-row.on{background:var(--blush)}
.pick-row.on .pick-tick{opacity:1}
.pick-list .empty{padding:18px 8px;color:var(--muted);font-size:12.5px}

/* ------------------------------------------------------------------ groups */
.grp-list{max-height:min(46vh,380px);overflow-y:auto;margin:0 0 14px}
.grp-row{padding:7px 0;border-bottom:1px solid var(--hairline)}
.grp-row:last-child{border-bottom:0}
.grp-head{display:flex;align-items:center;gap:10px}
.grp-dot{width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(34,29,32,.12)}
.grp-name{flex:1;min-width:0;padding:6px 8px;font-size:13px;border:1px solid transparent;
  background:none;border-radius:9px}
.grp-name:hover{border-color:var(--hairline)}
.grp-name:focus{border-color:var(--rose);background:var(--white);outline:none}
.grp-count{font-size:11px;color:var(--muted);white-space:nowrap}
.grp-swatches{padding:8px 0 4px 25px}
.grp-list .empty{padding:18px 0;color:var(--muted);font-size:12.5px}

/* --------------------------------------------------------------- importing */
.preview{padding:11px 12px;background:var(--white);border:1px solid var(--hairline);
  border-radius:12px;font-size:12.5px;color:var(--muted)}
.preview b{display:block;font-family:var(--serif);font-size:14.5px;font-weight:500;
  color:var(--ink);margin-bottom:8px}
.field textarea{width:100%;padding:10px 12px;border:1px solid var(--hairline);
  background:var(--white);border-radius:12px;font-size:13px;font-family:var(--sans);
  line-height:1.55;color:var(--ink);resize:vertical}
.field textarea:focus{border-color:var(--rose);outline:none}
.drop-zone{padding:2px 0 6px}
.file-btn{position:relative;overflow:hidden;cursor:pointer}
.file-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.map-list{border:1px solid var(--hairline);border-radius:12px;background:var(--white)}
.map-row{display:flex;align-items:center;gap:12px;padding:8px 11px;
  border-bottom:1px solid var(--hairline)}
.map-row:last-child{border-bottom:0}
.map-row>span{flex:1;min-width:0;font-size:12.5px}
.map-row select{width:auto;min-width:130px;max-width:52%;padding:7px 9px;
  border:1px solid var(--hairline);border-radius:9px;background:var(--white);font-size:12.5px}
.map-row .req,.map-row .hint{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-left:6px}
.map-row .req{color:var(--rose)}

/* ---------------------------------------------------------- version history */
.ver-list{max-height:min(46vh,380px);overflow-y:auto;margin:14px -4px 0}
.ver-row{display:flex;align-items:center;gap:11px;padding:10px 4px;
  border-bottom:1px solid var(--hairline)}
.ver-row:last-child{border-bottom:0}
.ver-row>.ico{color:var(--rose);flex:0 0 auto}
.ver-when{flex:1;min-width:0}
.ver-when b{display:block;font-size:13px;font-weight:500}
.ver-when span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.ver-list .empty{padding:18px 4px;color:var(--muted);font-size:12.5px;border-bottom:0}

@media (max-width:768px){
  .menu-scroll .icon-grid,.icon-catalog .icon-grid{grid-template-columns:repeat(6,1fr)}
  .gcards{max-height:58vh}
}

/* ==========================================================================
   Round 1 parity surfaces: the GuestSheetScaffold header on every editor
   sheet, destructive confirms, the grouped guest list, the table inspector,
   seat assignment, the account sheet, the generate-preview sheet, and the
   welcome tour.
   ========================================================================== */

/* --------------------------------------------- sheet scaffold (app dialect)
   Centered 16pt serif title + 11pt subtitle, quiet Cancel/Done top-left,
   primary action top-right, hairline under the header. No kickers, no X. */
.sheet-card:has(> .scaf-head){padding:0}
.scaf-head{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:30px;padding:13px 16px}
.scaf-title{display:flex;flex-direction:column;align-items:center;gap:1px;
  max-width:70%;text-align:center}
.scaf-title h2{font-family:var(--serif);font-weight:500;font-size:16px;color:var(--ink);
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.scaf-title span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.scaf-side{position:absolute;top:0;bottom:0;display:flex;align-items:center}
.scaf-side.left{left:8px}
.scaf-side.right{right:12px}
.scaf-quiet{font-size:13px;color:var(--muted);padding:6px 8px;border-radius:8px;
  transition:opacity .12s var(--ease)}
.scaf-quiet:hover{color:var(--ink)}
.scaf-quiet:active{opacity:.4;transform:scale(.96)}
.scaf-act{font-size:13px;font-weight:600;color:var(--rose);padding:6px 8px;border-radius:8px}
.scaf-act:hover{color:var(--rose-deep)}
.scaf-act:disabled{color:rgba(119,105,111,.6);pointer-events:none}
.scaf-act:active{opacity:.4;transform:scale(.96)}
.scaf-more{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:999px;color:var(--muted)}
.scaf-more:hover{background:var(--fill);color:var(--ink)}
.scaf-hair{height:1px;background:var(--hairline)}
.sheet-body{padding:16px 22px 22px}
.sheet-body .sheet-actions{display:none}

/* ---------------------------------------------------- destructive confirms
   The app's confirmationDialog register: title, message, the destructive
   action in red, Cancel under it. Never a rose primary, never a kicker. */
.sheet-card.confirm-card{max-width:300px;padding:0;text-align:center;border-radius:16px}
.confirm-box{padding:18px 20px 14px}
.confirm-title{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.confirm-body{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.confirm-actions{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.confirm-actions button{width:100%;padding:12px 14px;font-size:14px}
.confirm-destructive{color:var(--danger);font-weight:600;border-bottom:1px solid var(--hairline)}
.confirm-destructive:hover{background:var(--blush)}
.confirm-cancel{color:var(--ink)}
.confirm-cancel:hover{background:var(--fill)}

/* ------------------------------------------------- grouped guest sections */
.guest-list{padding-bottom:6px}
.gsec-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:7px;
  padding:12px 14px 6px;background:var(--white)}
.gsec-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.gsec-title{flex:1;min-width:0;font-family:var(--serif);font-weight:500;font-size:12.5px;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsec-count{font-size:10.5px;font-weight:500;color:rgba(119,105,111,.75)}
.gsec ul li.grow{border-bottom:1px solid var(--hairline)}
.gsec ul li.grow:last-child{border-bottom:0}
.gflag{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:var(--fill);color:var(--muted);flex:0 0 auto}
.gflag.pend{background:rgba(204,153,84,.18);color:#8A6524}

/* Empty + no-match states, the app's anatomy. */
.guest-empty{padding:18px 14px;flex:1;min-height:0}
.guest-empty-card{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 20px;border:1px dashed var(--hairline);border-radius:16px;text-align:center}
.guest-empty-glyph{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--cream);color:var(--muted)}
.guest-empty-title{font-size:14px;font-weight:600;color:var(--ink)}
.guest-empty-body{font-size:12px;color:var(--muted);line-height:1.55}
.guest-nomatch{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;padding:0 26px;text-align:center}

/* Destructive menu rows (Delete). */
.menu-row.danger,.menu-row.danger .ico{color:var(--danger)}
.menu-row.danger:hover{background:var(--blush)}
.menu-row[disabled]{color:#B2ACA5;cursor:default}
.menu-row[disabled]:hover{background:none}

/* ------------------------------------------------------------ export sheet */
.export-kicker{display:block;padding:12px 0 2px}
.export-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--hairline)}
.export-row:last-child{border-bottom:0}
.export-hit{flex:1;min-width:0;display:block;text-align:left;padding:12px 0}
.export-hit b{display:block;font-size:15px;font-weight:500;font-family:var(--serif);color:var(--ink)}
.export-hit span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.export-row.off .export-hit b{color:var(--muted)}
.export-share{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:999px;color:var(--rose);flex:0 0 auto}
.export-share:hover{background:var(--blush)}
.export-share:disabled{color:rgba(119,105,111,.5);pointer-events:none}
.export-qr{display:flex;color:var(--rose);flex:0 0 auto;padding:0 8px}
.export-empty{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:44px 24px;text-align:center;color:var(--rose)}
.export-empty-title{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--ink)}
.export-empty-body{font-size:13px;color:var(--muted);line-height:1.55;max-width:320px}

/* ------------------------------------------------- generate preview sheet */
.sheet-card.pv-card{max-width:720px;display:flex;flex-direction:column;
  height:min(88vh,760px)}
.pv-band{padding:12px 16px;display:flex;flex-direction:column;gap:11px;
  max-height:220px;overflow-y:auto;flex:0 0 auto;background:var(--paper)}
.pv-group{display:flex;flex-direction:column;gap:5px}
.pv-kicker{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted)}
.pv-chips{display:flex;gap:6px;overflow-x:auto;padding:1px}
.pv-chip{padding:5px 11px;border-radius:9px;font-size:12px;font-weight:500;color:var(--muted);
  background:var(--white);border:1px solid var(--hairline);white-space:nowrap;flex:0 0 auto}
.pv-chip.on{background:var(--blush);border-color:rgba(222,151,170,.6);color:var(--rose-deep)}
.pv-note{font-size:11.5px;color:var(--muted);line-height:1.5}
.pv-fields{display:flex;gap:8px}
.pv-fields label{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;
  font-size:11px;color:var(--muted)}
.pv-fields input{width:100%;padding:8px 11px;border:1px solid var(--hairline);
  border-radius:999px;background:var(--white);font-size:13px;outline:none}
.pv-fields input:focus{border-color:var(--rose)}
.pv-toggle{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.pv-toggle input{position:absolute;opacity:0;pointer-events:none}
.pv-toggle-text{display:flex;flex-direction:column;gap:2px}
.pv-toggle-text b{font-size:13px;font-weight:500;color:var(--ink)}
.pv-toggle-text i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.5}
.switch{position:relative;width:36px;height:22px;flex:0 0 auto;border-radius:999px;
  background:#DCD5CE;transition:background-color .18s var(--ease)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(34,29,32,.25);
  transition:transform .18s var(--ease)}
input:checked+.switch{background:var(--rose)}
input:checked+.switch::after{transform:translateX(14px)}
.pv-stage{position:relative;flex:1;min-height:220px;background:var(--fill);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pv-frame-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pv-frame{border:0;flex:0 0 auto;transform-origin:center center;background:transparent;
  pointer-events:none}
.pv-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pv-page{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:999px;background:var(--white);border:1px solid var(--hairline);
  color:var(--ink);box-shadow:0 2px 10px rgba(34,29,32,.12)}
.pv-page.prev{left:12px}
.pv-page.next{right:12px}
.pv-foot{display:flex;align-items:center;gap:12px;padding:12px 16px;flex:0 0 auto;
  background:var(--paper)}
.pv-foot .spacer{flex:1}
.pv-count{font-size:11.5px;color:var(--muted)}
.pv-link{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:999px;
  background:var(--blush);border:1px solid rgba(222,151,170,.6);
  font-size:13px;font-weight:500;color:var(--rose-deep)}
.pv-link:disabled{opacity:.45;cursor:default}
.pv-print{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;
  background:var(--rose);color:#fff;font-size:13px;font-weight:500}
.pv-print:hover{background:var(--rose-deep)}
.pv-print:disabled{opacity:.45;pointer-events:none}

/* ------------------------------------------------------------ account sheet */
.acct-body{max-width:420px;margin:0 auto}
.acct-line{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--ink);
  line-height:1.3;margin-top:7px}
.acct-email{font-size:20px;word-break:break-all}
.acct-sub{font-size:13px;color:var(--muted);line-height:1.6;margin:7px 0 18px}
.acct-tier{font-size:13px;color:var(--muted);margin-top:6px}
.acct-rose{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:44px;margin-top:11px;border-radius:11px;background:var(--blush);
  border:1px solid rgba(222,151,170,.6);font-size:14px;font-weight:500;color:var(--rose-deep)}
.acct-rose:hover{background:#F9E6EC}
.acct-rose:disabled{background:var(--fill);border-color:var(--hairline);
  color:rgba(119,105,111,.55)}
.acct-code{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:8px;
  text-align:center;font-variant-numeric:tabular-nums}
.acct-again{display:block;margin-top:6px;padding-left:0}
.acct-carries{display:flex;flex-direction:column;gap:7px;margin-top:18px;padding:14px;
  background:var(--blush);border:1px solid rgba(222,151,170,.35);border-radius:14px}
.acct-carries b{font-size:13px;font-weight:500;color:var(--ink)}
.acct-carries span{font-size:12.5px;color:var(--muted);line-height:1.55}
.acct-feedback{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding-left:0}
.acct-row{display:flex;align-items:center;gap:10px}
.acct-row .spacer{flex:1}
.acct-delete{font-size:13px;font-weight:500;color:var(--danger);padding:8px 0}
.acct-delete:hover{opacity:.8}

/* -------------------------------------------------------------- seat finder */
.sf-lede{font-size:13.5px;color:var(--ink);line-height:1.6}
.sf-publish{max-width:280px}
.sf-down{font-size:13px;font-weight:500;color:var(--danger);padding:8px 4px}
.sf-down:hover{opacity:.8}
.qr-actions{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.qr-actions .spacer{flex:1}

/* ----------------------------------------------------------------- feedback */
.fb-lede{font-size:13.5px;color:var(--ink);line-height:1.6;margin-bottom:12px}
#fbText{width:100%;padding:10px 12px;border:1px solid var(--hairline);border-radius:12px;
  background:var(--fill);font-size:14px;font-family:var(--sans);line-height:1.55;
  color:var(--ink);resize:vertical;min-height:130px}
#fbText:focus{border-color:rgba(222,151,170,.6);outline:none}
#fbSend{max-width:100%}
#fbSend.busy .wc-loader{transform:scale(.32);margin:-22px}

/* ------------------------------------------------------------ welcome intro */
.intro{position:fixed;inset:0;z-index:96;display:flex;flex-direction:column;
  align-items:center;background:var(--paper);animation:rise .3s var(--ease)}
.intro-skip{position:absolute;top:14px;right:16px;font-size:14px}
.intro-page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:0 34px;text-align:center;max-width:520px}
.intro-art{width:230px;height:152px;margin-bottom:18px}
.intro-art svg{width:100%;height:100%}
.intro-page h2{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--ink);
  line-height:1.25;margin-top:11px}
.intro-page p{font-size:14.5px;color:var(--muted);line-height:1.65;margin-top:10px;max-width:380px}
.intro-dots{display:flex;align-items:center;gap:7px;padding-bottom:20px}
.intro-dots i{width:6px;height:6px;border-radius:999px;background:var(--hairline);
  transition:width .22s var(--ease),background-color .22s var(--ease)}
.intro-dots i.on{width:18px;background:var(--rose)}
.intro-go{margin-bottom:30px;padding:14px 42px;border-radius:999px;background:var(--rose);
  color:#fff;font-size:15px;font-weight:600;
  box-shadow:0 6px 18px -8px rgba(192,106,129,.55)}
.intro-go:hover{background:var(--rose-deep)}

/* --------------------------------------------------------- table inspector */
.insp-body{max-width:480px;margin:0 auto}
.insp-kicker{display:block;padding:14px 0 8px;border-top:1px solid var(--hairline);margin-top:6px}
.insp-kicker:first-child{border-top:0;margin-top:0;padding-top:2px}
.insp-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 0 8px;font-size:13px;color:var(--ink);cursor:pointer}
.insp-toggle input{position:absolute;opacity:0;pointer-events:none}
.insp-step,.insp-rot{display:flex;align-items:center;gap:8px;padding:5px 0}
.insp-step-label{flex:1;font-size:13px;color:var(--ink)}
.insp-step-value{font-size:13px;font-weight:500;color:var(--muted);
  font-variant-numeric:tabular-nums}
.insp-step-btns{display:flex;gap:3px}
.insp-step-btns button{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;background:var(--white);
  border:1px solid var(--hairline);color:var(--ink)}
.insp-step-btns button:hover{background:var(--fill)}
#tiRot{width:100%;accent-color:var(--rose);margin:2px 0 8px}
.insp-seats{display:flex;flex-direction:column;max-height:240px;overflow-y:auto}
.insp-seat{display:flex;align-items:center;gap:9px;padding:5px 6px}
.insp-seat .spacer{flex:1}
.insp-seat-num{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--fill);font-size:10px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.insp-seat-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.insp-seat-name{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.insp-seat-empty{font-size:13px;color:rgba(119,105,111,.75)}
.insp-unseat{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  color:var(--muted);border-radius:6px}
.insp-unseat:hover{background:var(--fill);color:var(--ink)}
.insp-assign{font-size:12px;font-weight:500;color:var(--rose)}
.insp-assign:hover{color:var(--rose-deep)}
.insp-wide{display:flex;align-items:center;gap:8px;width:100%;margin-top:18px;
  padding:11px 12px;border:1px solid var(--hairline);border-radius:12px;
  font-size:13px;font-weight:500;color:var(--ink)}
.insp-wide:hover{background:var(--fill)}
.insp-delete{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;
  padding:8px 2px;font-size:13px;font-weight:500;color:var(--danger)}
.insp-delete:hover{opacity:.8}

/* ---------------------------------------------------------- seat assignment */
.assign-search{padding:12px 16px}
.assign-search .searchwrap{display:flex;align-items:center;gap:7px;padding:8px 11px;
  border-radius:999px;background:var(--fill)}
.assign-search .searchwrap .ico{color:var(--muted)}
.assign-search input{flex:1;min-width:0;border:0;background:none;font-size:13px;outline:none}
.assign-list,.pick-list{max-height:min(52vh,420px);overflow-y:auto;padding:0 4px 12px}
.assign-row{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;
  text-align:left;border-bottom:1px solid var(--hairline)}
.assign-row:hover{background:var(--paper)}
.assign-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.assign-name{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.assign-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.assign-empty{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:44px 32px 30px;text-align:center}
.pick-group{font-size:11px;color:var(--muted);white-space:nowrap;flex:0 0 auto}

/* Groups: the New group kicker card + two-line empty state. */
.grp-new{margin-top:6px}
.grp-new .sc{display:block;margin-bottom:8px}
.grp-empty{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:22px 0;text-align:center}

/* Guest editor: the destructive row at the card stack's tail. */
.gdel{align-self:flex-start;padding:6px 2px;font-size:13px}

/* ==========================================================================
   Round 2 parity: menu icon slots, toast anatomy, the theme menu card, the
   condensed actions chip, the sign-in gate, and the compact (iPhone) chrome.
   ========================================================================== */

/* Menu rows: 13pt icons in an 18pt slot, the app's DocumentMenuCard metrics. */
.menu-ico{display:flex;justify-content:center;width:18px;flex:0 0 auto}
.menu-ico .ico{color:var(--rose)}
.ico-gap{width:18px}

/* Toast: the divider before the action, the app's ToastOverlay anatomy. */
.toast-div{width:1px;height:16px;background:var(--hairline);flex:0 0 auto;margin-left:2px}

/* Theme menu: the app's 200pt card — palette circle with the chip dot riding
   (7,7), a rose checkmark on the active row, no persistent fill. */
.menu.theme-card{width:216px;min-width:216px}
.theme-row .menu-tick{margin-left:auto}
.theme-ball{position:relative;width:22px;height:22px;flex:0 0 auto}
.theme-ball .big{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  border:1px solid}
.theme-ball .dot{position:absolute;left:14px;top:14px;width:8px;height:8px;border-radius:50%}

/* Condensed actions: one ellipsis chip when the canvas strip is under 700. */
.actions-pill.condensed{padding:3px 4px;border-radius:16px}
.actions-one{display:flex;align-items:center;justify-content:center;width:36px;height:34px;
  border-radius:11px;color:var(--ink)}
.actions-one.on{background:var(--tan)}

/* Quick-add popover card is the app's 250pt. */
.addpop{width:250px}

/* ------------------------------------------------------------ sign-in gate
   The AccountSheet's signed-out language as a full page: nothing behind it
   is reachable without a session. */
.gate{position:fixed;inset:0;z-index:94;overflow-y:auto;background:var(--paper)}
.gate-inner{max-width:400px;margin:0 auto;padding:11vh 28px 60px;
  display:flex;flex-direction:column;gap:18px}
.gate-head{display:flex;flex-direction:column;gap:7px}
.gate-title{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink);
  line-height:1.3}
.gate-sub{font-size:13px;color:var(--muted);line-height:1.6}
.gate-mark{display:block;margin-bottom:14px}
.apple-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:44px;border-radius:10px;background:#000;color:#fff;
  font-size:15px;font-weight:500}
.apple-btn:disabled{opacity:.5;cursor:default}
.apple-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:6px}
.gate-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px}
.gate-or i{flex:1;height:1px;background:var(--hairline)}
.gate .field label{letter-spacing:.4em}
.gate-err{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;color:var(--danger)}
.gate-note{font-size:12.5px;color:var(--muted);line-height:1.55}

/* ------------------------------------------------- compact (iPhone) chrome
   PhoneChrome.swift: the guest list is a bottom sheet with detents, selection
   bars become bottom cards, and every floating control clears the grabber. */
body.compact .shell{display:block}
body.compact .stage{position:absolute;inset:0}

/* The guest sheet. Height is driven by JS (detents); this is the shell. */
body.compact .panel{
  position:fixed;left:0;right:0;bottom:0;z-index:40;width:auto;
  border-right:0;border-top:1px solid var(--hairline);
  border-radius:18px 18px 0 0;overflow:hidden;
  box-shadow:0 -4px 36px rgba(192,106,129,.14);
  transition:height .28s var(--ease);
}
body.compact .panel.dragging-sheet{transition:none}
.sheet-handle{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:9px 16px 10px;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.sheet-grab{width:36px;height:5px;border-radius:999px;background:var(--hairline);
  align-self:center}
.sheet-handle-row{display:flex;align-items:center;gap:8px}
.sheet-counts{flex:1;min-width:0;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-handle-row .arrange-btn{padding:9px 12px}
.sheet-handle-row .unseat-btn{padding:9px 0 9px 4px}

/* Selection bars: bottom cards above the grabber, thumb-sized controls. */
body.compact .selbar{
  left:12px;right:12px;top:auto;bottom:96px;max-width:none;
  flex-direction:column;align-items:stretch;
}
body.compact .selbar .sel-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding:1px}
body.compact .selbar .sel-row::-webkit-scrollbar{display:none}
body.compact .sel-name{flex:1;min-width:120px}
body.compact .stepchip{padding:8px}
body.compact .stepchip button{width:26px;height:26px}
body.compact .chip-plain,body.compact .side-chip{padding:10px}
body.compact .bar-icon{width:40px;height:40px}
body.compact .guest-strip{max-width:none}

/* Floating chrome floats above the collapsed sheet (84 + 12). */
body.compact .addbar{bottom:96px;max-width:calc(100% - 12px)}
body.compact .zoomctl{bottom:96px;right:12px}
body.compact .checks-panel{left:12px;bottom:96px;max-width:calc(100% - 24px)}
body.compact .chrome-tl{max-width:min(380px,calc(100% - 96px))}
body.compact .pill-title .t-name{max-width:130px}
/* The app's compact editor carries no account pill — it lives on the
   dashboard; the ellipsis chip owns the top-right corner. */
body.compact #accountBtn{display:none}

/* Sheets go full screen on the phone. */
@media (max-width:600px){
  .modal-scrim{padding:0}
  .sheet-card{max-width:none;width:100%;height:100%;max-height:none;border-radius:0;
    border:0}
  .sheet-card.confirm-card{width:auto;height:auto;max-width:300px;border-radius:16px;
    margin:auto;border:1px solid var(--hairline)}
  .sheet-card.pv-card{height:100%}
}

/* Event inspector stat tiles. */
.ev-stats{display:flex;gap:8px;padding:2px 0 10px}
.ev-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 6px;background:var(--white);border:1px solid var(--hairline);border-radius:14px}
.ev-stat-num{font-size:20px;font-variant-numeric:tabular-nums}

/* CSV preview rows: name, group and meal, the RSVP chip that will land. */
.cs-row{display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--hairline)}
.cs-row:last-of-type{border-bottom:0}
.cs-name{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cs-sub{flex:1;min-width:0;font-size:11px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cs-row .gflag{margin-left:auto}
.cs-more{padding-top:6px;font-size:11.5px;color:var(--muted)}

/* Colour swatch strips (custom-area tint, group recolour) — removed by the
   round-1 retheme while their markup stayed; restored at the app's 24px. */
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:24px;height:24px;border-radius:50%;border:1px solid rgba(45,45,45,.12);flex:0 0 auto;cursor:pointer;padding:0}
.sw:hover{transform:scale(1.1)}
.sw.on{box-shadow:0 0 0 2px var(--white),0 0 0 3.6px var(--rose)}
.sw.none{background:linear-gradient(135deg,var(--white) 45%,var(--hairline) 45%,var(--hairline) 55%,var(--white) 55%)}

/* Chair-style swatches in the theme card: a bevelled chip for dimensional,
   an outlined circle for flat — the picker shows the difference. */
.theme-ball .chip{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:3px}
.theme-ball .ring{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:1px solid var(--hairline)}

/* ---------------------------------------------------------------- paywall
   PaywallSheet.swift's shell: two plan cards side by side (they read as a
   choice; stacked, the second looks like an upsell you scroll past), each a
   1px-hairline surface card at the app's card radius. Under 640px they stack,
   which is the ViewThatFits fallback. */
.sheet-card.pw-wide{max-width:720px}
.pw-body{padding-bottom:22px}
.pw-head{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.pw-title{font-family:var(--serif);font-size:23px;line-height:1.25;color:var(--ink);margin:0}
.pw-sub{font-size:13px;color:var(--muted);margin:0;line-height:1.5}
.pw-status{font-size:12.5px;color:var(--rose-deep);line-height:1.45;
  background:var(--blush);border:1px solid rgba(222,151,170,.35);
  border-radius:14px;padding:13px;margin-bottom:14px}
.pw-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:640px){.pw-cards{grid-template-columns:1fr}}
.pw-card{background:var(--white);border:1px solid var(--hairline);border-radius:18px;
  padding:16px;display:flex;flex-direction:column;gap:12px}
.pw-card-head{display:flex;align-items:baseline;gap:10px}
.pw-name{font-family:var(--serif);font-size:19px;color:var(--ink)}
.pw-price{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.pw-price b{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--ink)}
.pw-price i{font-style:normal;font-size:11px;color:var(--muted)}
.pw-lede{font-size:13px;color:var(--muted);margin:0;line-height:1.45}
.pw-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pw-bullets li{font-size:12.5px;color:var(--ink);line-height:1.4;padding-left:13px;position:relative}
.pw-bullets li::before{content:'';position:absolute;left:0;top:.5em;width:5px;height:5px;
  border-radius:50%;background:rgba(222,151,170,.55)}
.pw-trial{font-size:12px;font-weight:500;color:var(--rose-deep);margin:0;line-height:1.4}
.pw-actions{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.pw-btn{min-height:44px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid transparent;transition:background-color .18s var(--ease);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px}
.pw-btn:disabled{opacity:.6;cursor:default}
.pw-btn-strong{background:var(--rose);color:#fff}
.pw-btn-strong:hover:not(:disabled){background:var(--rose-deep)}
.pw-btn-quiet{background:var(--blush);color:var(--rose-deep);border-color:rgba(222,151,170,.6)}
.pw-btn-quiet:hover:not(:disabled){background:#F8E4EA}
.pw-owned{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--sage);margin-top:2px}
.pw-manage{margin-top:12px}
.pw-account{margin:14px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.pw-legal{font-size:11px;color:var(--muted);line-height:1.55;margin:0}
.pw-sep{color:var(--hairline);margin:0 3px}
.pw-legal a{font-weight:500;color:var(--rose-deep);text-decoration:none}
.pw-legal a:hover{text-decoration:underline}