/* Seating chart. The page chrome comes from style.css (the Press design
   system). The plan is a workbench: the guest list on the left, the room lying
   on a dotted desk, and one context bar above it that changes with what you
   are doing. The printed pages (".pp", at the bottom) keep their own quiet
   ink-on-white type and are laid out in millimetres. */

.seat-page {
  --desk: #e4e5df;
  --table: #dde9f2;
  --blue-wash: #dbe9f3;
  --orange-wash: #ffd9c7;
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}
@property --r { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

/* ---------- workbench ---------- */
.seat-app { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.seat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.seat-bar-gap { flex: 1; }
@media (max-width: 560px) {
  .seat-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .seat-bar > .menu-wrap > .btn, .seat-bar > .btn { width: 100%; padding: 0 10px; }
  .seat-bar-gap { display: none; }
  #namesBtn { grid-column: 1; }
}
.say-short { display: none; }
@media (max-width: 560px) { .say-long { display: none; } .say-short { display: inline; } }
.seat-bar .btn { padding: 0 16px; }
.seat-app .btn svg { width: 18px; height: 18px; flex: none; }
.seat-app .btn[aria-pressed="true"]:not(.primary) { background: var(--blue); border-color: var(--blue); color: var(--sheet); }
.seat-app .btn.icon { width: var(--tap); padding: 0; }
.seat-app .btn.quiet { border-color: transparent; background: transparent; }
.seat-app .btn.quiet:hover { border-color: var(--ink); box-shadow: none; transform: none; }
body.dragging, body.dragging * { cursor: grabbing !important; }

.menu-wrap { position: relative; }
.seat-menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; min-width: 280px; display: grid; gap: 2px; padding: 6px;
  background: var(--sheet); border: var(--rule); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink);
  transform-origin: top left; animation: seat-pop 0.22s var(--spring);
}
.seat-menu button {
  display: grid; gap: 2px; min-height: var(--tap); padding: 8px 12px; text-align: left; font: inherit; color: var(--ink);
  border: 0; border-radius: var(--radius); background: transparent; cursor: pointer;
}
.seat-menu button:hover, .seat-menu button:focus-visible { background: var(--paper); }
.seat-menu b { font-size: 15px; }
.seat-menu span { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.menu-sep {
  margin: 4px 0 0; padding: 8px 12px 2px; border-top: 2px solid var(--paper);
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-wide); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.menu-sep:first-child { border-top: 0; margin-top: 0; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
#autoMenu { width: min(340px, calc(100vw - 2 * var(--gutter))); }

.seat-work { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .seat-work { grid-template-columns: minmax(0, 1fr); } }

/* ---------- guest tray ---------- */
.seat-tray {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px;
  background: var(--sheet); border: var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-sheet);
  max-height: calc(clamp(460px, 72vh, 900px) + 76px); transition: background-color var(--dur-quick);
}
.seat-tray > * { flex: none; }
.seat-tray > .glist { flex: 1 1 auto; }
/* The list editor takes the room the list had, so the text box never spills out of the tray. */
.seat-tray { overflow-y: auto; }
.seat-tray > .editor:not([hidden]) { flex: 1 0 auto; grid-template-rows: auto auto minmax(160px, 1fr) auto; }
.seat-tray > .editor textarea { min-height: 160px; height: 100%; }
.seat-tray:has(> .editor:not([hidden])) > .tray-foot { display: none; }
@media (max-width: 900px) { .seat-tray { max-height: none; } .seat-app.previewing .seat-tray { display: none; } }
.seat-tray.drop-hot { background: var(--blue-wash); }
.tray-head { display: flex; align-items: center; gap: 8px; }
.tray-head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-wide); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.tally { margin: 0; color: var(--ink-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.tally b { margin-right: 4px; font-weight: 700; font-size: 26px; line-height: 1; color: var(--ink); vertical-align: -3px; }
.seat-app .inp {
  width: 100%; min-width: 0; min-height: var(--tap); padding: 6px 10px; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: var(--rule); border-radius: var(--radius);
}
.seat-app select.inp { padding-right: 6px; cursor: pointer; }
.seg { display: inline-flex; flex-wrap: nowrap; background: #fff; border: var(--rule); border-radius: var(--radius); overflow: hidden; }
.seat-tray .seg { width: 100%; }
.seat-tray .seg button { flex: 1; }
.seg button {
  min-height: var(--tap); padding: 0 12px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap;
  background: transparent; border: 0; cursor: pointer; transition: background-color var(--dur-quick), color var(--dur-quick);
}
.seg button + button { border-left: var(--rule); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.seg button:focus-visible { outline-offset: -5px; }
.paid {
  display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 2px; background: var(--orange); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-wide); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 2px solid currentColor; border-radius: var(--radius-round);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; background: transparent;
}
button.chip { min-height: var(--tap); cursor: pointer; }
.chip.good { color: var(--good); }
.chip.ok { color: var(--blue-text); }
.chip.soft { color: var(--orange-text); border-style: dashed; }
.chip.plain { color: var(--ink-2); }
.chip.pair { color: var(--orange-text); padding-right: 2px; }
.chip.pair button { min-width: var(--tap); min-height: var(--tap); margin: -8px 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }

.glist { min-height: 120px; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; padding: 2px 6px 6px; overscroll-behavior: contain; }
@media (max-width: 900px) { .glist { max-height: 44vh; } }
.grp { display: grid; gap: 4px; }
.grp + .grp { margin-top: 8px; }
.grp-h, .grp-t {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap); margin: 0; padding: 4px 6px 4px 2px; text-align: left;
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-wide); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  border: 0; border-radius: var(--radius); background: none;
}
.grp-t { min-height: 32px; }
.grp-h { cursor: grab; touch-action: pan-y; transition: background-color var(--dur-quick), color var(--dur-quick); }
.grp-h:hover { background: var(--paper); color: var(--ink); }
.grp-h .gpn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-h .n, .grp-t .n { margin-left: auto; font-variant-numeric: tabular-nums; }
.grp-h .dp { flex: none; font-family: var(--font-body); font-stretch: normal; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--blue-text); }
.grp-h.sel { background: var(--blue); color: var(--sheet); }
.grp-h.sel .dp { color: var(--sheet); }
.gst {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 4px 8px 4px 4px; text-align: left;
  font: inherit; font-size: 16px; color: var(--ink); background: var(--sheet); border: var(--rule); border-radius: var(--radius);
  cursor: grab; touch-action: pan-y; transition: transform 0.15s var(--ease-feed), box-shadow 0.15s, background-color var(--dur-quick), color var(--dur-quick);
}
.gst:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.gst.sel { background: var(--blue); border-color: var(--blue); color: var(--sheet); }
.gst.seated { border-color: var(--rule-soft); }
.gst .gn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gst .where {
  flex: none; margin-left: auto; padding: 1px 8px; border: 2px solid currentColor; border-radius: var(--radius-round);
  font-size: 12px; font-weight: 700; color: var(--blue-text); font-variant-numeric: tabular-nums; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gst .ap { flex: none; font-weight: 700; color: var(--orange-text); }
.gst.clash .where { color: var(--orange-text); border-style: dashed; }
.gst.sel .where, .gst.sel .ap { color: var(--sheet); }
.dragging-src { opacity: 0.35 !important; }
.grip { flex: none; width: 18px; height: 30px; color: inherit; opacity: 0.5; touch-action: none; background: radial-gradient(currentColor 1.4px, transparent 1.7px) 3px 3px / 6px 6px; }
.empty-list { margin: 0; padding: 18px 8px; text-align: center; color: var(--ink-2); font-size: var(--text-sm); }
.empty-list b { display: block; font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch-head); font-size: 24px; text-transform: uppercase; color: var(--good); }
.editor { display: grid; gap: 8px; }
.editor label { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.editor textarea {
  width: 100%; min-height: 280px; padding: 10px; resize: vertical; font: inherit; font-size: 15px; line-height: 1.45; color: var(--ink);
  background: #fff; border: var(--rule); border-radius: var(--radius);
}
.editor-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tray-foot { display: grid; gap: 8px; padding-top: 10px; border-top: 2px solid var(--paper); }
.tray-foot .btn { justify-content: flex-start; }
.check.small { align-items: flex-start; min-height: 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; padding: 6px 0; }
.check.small input { margin-top: 1px; }
.start-over .linkish { min-height: var(--tap); }

/* ---------- context bar ---------- */
.seat-stage { display: grid; gap: var(--space-3); min-width: 0; }
.seat-context {
  min-height: 62px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px;
  background: var(--sheet); border: var(--rule); border-radius: var(--radius); animation: seat-slide 0.24s var(--ease-feed);
}
.seat-context .say { margin: 0; padding-left: 4px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.4; flex: 1 1 260px; }
.seat-context .say b { color: var(--ink); }
.seat-context .meta { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.seat-context .btn { min-height: var(--tap); padding: 0 14px; font-size: 15px; }
.cfield { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.cfield .inp { width: auto; max-width: 230px; }
.cfield .inp.short { width: 4.5em; }
.cfield .inp.num { width: 5.2em; }
.cfield .inp.wide { width: min(260px, 60vw); }
.cfield .paid { margin: 0; }
.stepper { display: inline-flex; align-items: stretch; background: #fff; border: var(--rule); border-radius: var(--radius); overflow: hidden; }
.stepper button { width: var(--tap); min-height: var(--tap); border: 0; background: transparent; font: inherit; font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer; }
.stepper button:hover:not(:disabled) { background: var(--paper); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper output { min-width: 3em; display: grid; place-items: center; padding: 0 4px; border-inline: var(--rule); font-weight: 700; font-variant-numeric: tabular-nums; }
.seat-context .rule { align-self: stretch; width: 2px; margin: 0 2px; background: var(--paper); }
@media (max-width: 560px) {
  .seat-context { padding: 8px; }
  .seat-context .meta { margin-left: 0; }
  .cfield { flex-wrap: wrap; }
  .cfield .inp { max-width: 100%; }
  .seat-context .seg { width: 100%; min-width: 0; }
  .seat-context .seg button { flex: 1 1 0; min-width: 0; padding: 4px 6px; font-size: 14px; line-height: 1.15; white-space: normal; }
  .seat-context .seg .paid { margin: 2px 0 0; }
}

/* ---------- desk and room ---------- */
.seat-desk {
  position: relative; height: clamp(460px, 72vh, 900px); overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  background-color: var(--desk); background-image: radial-gradient(rgb(28 29 34 / 0.13) 1px, transparent 1.2px); background-size: 16px 16px;
  border: var(--rule); border-radius: var(--radius);
}
@media (max-width: 900px) { .seat-desk { height: clamp(380px, 64vh, 680px); } }
.seat-desk.panning { cursor: grabbing; }
.seat-desk.printing { cursor: default; touch-action: auto; user-select: text; -webkit-user-select: text; background-color: #d9dad4; }
.seat-room {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; --ls: 1; --iz: 1;
  background-color: var(--sheet);
  background-image: linear-gradient(to right, rgb(28 29 34 / 0.07) 2px, transparent 2px), linear-gradient(to bottom, rgb(28 29 34 / 0.07) 2px, transparent 2px);
  background-size: 100px 100px;
  box-shadow: 0 2px 0 rgb(28 29 34 / 0.08), 0 40px 70px -40px rgb(28 29 34 / 0.55);
}
.seat-room.glide { transition: transform 0.34s var(--ease-feed); }
.seat-room .rc { position: absolute; width: 34px; height: 34px; border: 0 solid var(--ink); opacity: 0.5; pointer-events: none; }
.seat-room .rc.tl { left: -46px; top: -46px; border-width: 0 3px 3px 0; }
.seat-room .rc.tr { right: -46px; top: -46px; border-width: 0 0 3px 3px; }
.seat-room .rc.bl { left: -46px; bottom: -46px; border-width: 3px 3px 0 0; }
.seat-room .rc.br { right: -46px; bottom: -46px; border-width: 3px 0 0 3px; }
/* The layers only hold the tables and features; clicks between them reach the floor (and the features under the tables layer). */
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > .tbl, .layer > .feat { pointer-events: auto; }
.guides { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.guide { position: absolute; background: var(--orange); }
.guide.v { top: -30px; bottom: -30px; width: calc(3px * var(--iz)); transform: translateX(-50%); }
.guide.h { left: -30px; right: -30px; height: calc(3px * var(--iz)); transform: translateY(-50%); }
.room-empty {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); margin: 0; padding: 14px 18px; max-width: min(340px, 80%);
  text-align: center; background: var(--sheet); border: var(--rule-dashed); color: var(--ink-2); pointer-events: none;
}
.room-empty .when-aside, .room-empty.aside .when-empty { display: none; }
.room-empty.aside .when-aside { display: inline; }
.room-empty.aside { left: 12px; top: 12px; transform: none; max-width: min(260px, 60%); padding: 8px 12px; font-size: var(--text-sm); text-align: left; }

/* tables */
.tbl { position: absolute; left: 0; top: 0; width: 0; height: 0; cursor: grab; outline: none; }
.tbl.settle { transition: transform 0.45s var(--spring); }
.tbl.lift { z-index: 30; cursor: grabbing; }
.tbl .body { position: absolute; left: 0; top: 0; transition: transform 0.2s var(--ease-feed); }
.tbl.lift .body { transform: scale(1.04); }
.tbl.lift .tt { box-shadow: 0 26px 30px -14px rgb(28 29 34 / 0.45); }
.tbl.enter .body { animation: seat-drop 0.5s var(--spring) both; }
.tbl.nope .body { animation: seat-shake 0.42s var(--ease-feed); }
.tt { position: absolute; display: grid; place-items: center; background: var(--table); border: 3px solid var(--ink); border-radius: 8px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s; }
.tt.round { border-radius: 50%; }
.lbl { display: grid; justify-items: center; gap: 3px; line-height: 1; text-align: center; pointer-events: none; transform: rotate(calc(-1 * var(--r))); }
.lbl b { font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch-head); font-size: 46px; line-height: 0.9; }
.lbl span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 17px; }
.lbl span.big { font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-narrow); font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; }
.lbl em { padding: 3px 9px; border-radius: var(--radius-round); background: var(--ink); color: var(--on-ink); font-style: normal; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.lbl em.full { background: var(--good); }
.tbl .warn {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%;
  background: var(--orange); color: var(--ink); border: 3px solid var(--ink); font-style: normal; font-weight: 900; font-size: 20px; transform: rotate(calc(-1 * var(--r)));
}
.tbl.sel .tt, .tbl:focus-visible .tt { box-shadow: 0 0 0 calc(6px * var(--iz)) var(--sheet), 0 0 0 calc(11px * var(--iz)) var(--blue); }
.tbl.hot .tt { background: var(--orange-wash); border-color: var(--orange-text); }
.tbl.tight .tt { background: repeating-linear-gradient(45deg, var(--orange-wash) 0 12px, var(--sheet) 12px 24px); }
.seat {
  position: absolute; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: var(--sheet); border: 3px solid var(--rule-soft); transition: transform 0.18s var(--ease-feed), background-color 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.seat i { font-style: normal; font-weight: 700; font-size: 20px; letter-spacing: 0.02em; pointer-events: none; transform: rotate(calc(-1 * var(--r))); }
.seat.on { background: var(--blue); border-color: var(--blue); color: var(--sheet); cursor: grab; }
.seat.hot { background: var(--orange); border-color: var(--ink); color: var(--ink); transform: scale(1.2); }
.seat.clash::after { content: ""; position: absolute; inset: -10px; border: 3px dashed var(--orange); border-radius: 50%; pointer-events: none; }
.seat.sel { box-shadow: 0 0 0 5px var(--sheet), 0 0 0 10px var(--ink); }
.seat.land { animation: seat-land 0.6s var(--spring) both; animation-delay: var(--d, 100ms); }
/* Names run out from each seat; --ls keeps them readable as you zoom out. */
.nm {
  position: absolute; z-index: 2; transform-origin: 0 0; padding: 0 4px; border-radius: 3px; pointer-events: none;
  font-size: 17px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--ink); background: rgb(251 251 248 / 0.9);
}
.seat-room.far .nm, .seat-room.far .seat i, .seat-room.far .lbl span, .seat-room.far .lbl em { display: none; }
.seat-room.far .lbl b { font-size: 70px; }

/* room features */
.feat { position: absolute; left: 0; top: 0; width: 0; height: 0; cursor: grab; outline: none; }
.feat.enter .fbox { animation: seat-drop 0.5s var(--spring) both; }
.fbox {
  position: absolute; display: grid; place-items: center; border: 3px solid var(--ink-2); border-radius: 6px; color: var(--ink-2);
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-wide); font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase;
}
.fbox .ur { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; transform: rotate(calc(-1 * var(--r))); }
.fbox.dance { background: repeating-conic-gradient(rgb(28 29 34 / 0.08) 0 25%, transparent 0 50%) 0 0 / 60px 60px, var(--sheet); }
.fbox.stage { background: repeating-linear-gradient(90deg, rgb(28 29 34 / 0.07) 0 4px, transparent 4px 22px), var(--paper); }
.fbox.bar { background: var(--desk); }
.fbox.door { background: var(--sheet); border-style: dashed; font-size: 15px; }
.feat.sel .fbox, .feat:focus-visible .fbox { box-shadow: 0 0 0 calc(5px * var(--iz)) var(--sheet), 0 0 0 calc(10px * var(--iz)) var(--blue); }
.fh {
  position: absolute; display: none; width: calc(26px * var(--iz)); height: calc(26px * var(--iz)); margin: calc(-13px * var(--iz)) 0 0 calc(-13px * var(--iz));
  border-radius: 50%; background: var(--sheet); border: calc(4px * var(--iz)) solid var(--blue); touch-action: none; z-index: 2;
}
.fh::before { content: ""; position: absolute; inset: -40%; }
.fh.nw { left: 0; top: 0; cursor: nwse-resize; }
.fh.ne { left: 100%; top: 0; cursor: nesw-resize; }
.fh.sw { left: 0; top: 100%; cursor: nesw-resize; }
.fh.se { left: 100%; top: 100%; cursor: nwse-resize; }
.feat.sel .fh { display: block; }

/* desk overlays */
.zoombar {
  position: absolute; right: 10px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 3px; cursor: default;
  background: var(--sheet); border: var(--rule); border-radius: var(--radius);
}
.zoombar button { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; border-radius: var(--radius); background: transparent; font: inherit; font-size: 22px; font-weight: 700; color: var(--ink); cursor: pointer; }
.zoombar button:hover { background: var(--paper); }
.zoombar svg { width: 20px; height: 20px; }
.zoombar .pct { min-width: 48px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.roomtag {
  position: absolute; left: 12px; bottom: 16px; z-index: 4; max-width: calc(100% - 240px); pointer-events: none; color: var(--ink-2);
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-wide); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.roomtag .smp { display: inline-block; margin-right: 6px; padding: 2px 6px; background: var(--ink); color: var(--on-ink); }
@media (max-width: 560px) { .roomtag { top: 10px; bottom: auto; max-width: calc(100% - 24px); } .rt-scale { display: none; } }
.seat-status { text-align: left; }

.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 100; padding: 8px 14px; pointer-events: none; white-space: nowrap; will-change: transform;
  border-radius: var(--radius-round); background: var(--ink); color: var(--on-ink); font-weight: 700; box-shadow: 0 18px 30px -12px rgb(28 29 34 / 0.6);
  transition: background-color 0.15s, color 0.15s;
}
.drag-ghost.over { background: var(--orange); color: var(--ink); }
.drag-ghost small { margin-left: 6px; font-weight: 400; opacity: 0.85; }

.seat-toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 120; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: var(--radius);
  background: var(--ink); color: var(--on-ink); font-weight: 700; line-height: 1.4; box-shadow: 4px 4px 0 var(--orange);
}
.seat-toast.show { animation: seat-toast 0.32s var(--spring); }

/* ---------- print preview ---------- */
.preview-layer { position: absolute; inset: 0; overflow: auto; padding: 28px 24px 40px; }
.pv-sheets { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.pv-sheets.tiled { display: grid; gap: 0; justify-content: center; box-shadow: 0 1px 0 rgb(28 29 34 / 0.08), 0 22px 44px -20px rgb(28 29 34 / 0.5); }
.pv-sheets.tiled .pv-wrap { box-shadow: none; outline: 1px dashed rgb(28 29 34 / 0.18); outline-offset: -1px; }
.pv-sheet { margin: 0; position: relative; }
.pv-wrap { position: relative; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgb(28 29 34 / 0.08), 0 22px 44px -20px rgb(28 29 34 / 0.5); }
.pv-wrap > .pp { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pv-sheet figcaption {
  position: absolute; left: 0; bottom: -26px; white-space: nowrap; color: var(--ink-2);
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-wide); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.locked-stamp { position: absolute; left: 50%; top: 50%; z-index: 2; font-size: 16px; transform: translate(-50%, -50%) rotate(-8deg); box-shadow: 0 0 0 6px rgb(251 251 248 / 0.7); }
.tile-note { margin: 22px auto 0; max-width: 60ch; text-align: center; color: var(--ink-2); font-size: var(--text-sm); }

/* ---------- printed pages ---------- */
.pp {
  position: relative; overflow: hidden; background: #fff; color: #161616; letter-spacing: normal;
  font: 400 4mm/1.3 "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pp * { box-sizing: border-box; }
.pp .abs { position: absolute; }
.pp .serif { font-family: Georgia, "Times New Roman", serif; }
.pp .pt { margin: 0; text-align: center; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp .ps { margin: 0; text-align: center; text-transform: uppercase; letter-spacing: 0.24em; color: #66676b; white-space: nowrap; overflow: hidden; }
.pp .pfoot { position: absolute; left: 0; margin: 0; text-align: center; font-size: 2.6mm; letter-spacing: 0.06em; color: #66676b; }
.pp .empty { text-align: center; color: #66676b; }

.pp .tb { overflow: hidden; }
.pp .tb-h { display: flex; align-items: baseline; gap: 0.45em; margin-bottom: 0.35em; padding-bottom: 0.2em; border-bottom: 0.3mm solid #bdbdbd; white-space: nowrap; overflow: hidden; }
.pp .tb-h .tk { font-weight: 700; font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; color: #66676b; }
.pp .tb-h .no { font-size: 1.9em; line-height: 0.9; }
.pp .tb-h .tn { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.pp .tb-h .tn.serif { font-weight: 400; font-size: 1.35em; }
.pp .tb ol { list-style: none; margin: 0; padding: 0; line-height: 1.3; column-gap: 1.6em; column-fill: balance; }
.pp .tb li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; break-inside: avoid; }
.pp .none { color: #8a8a8a; font-style: italic; }

.pp .map { display: block; overflow: visible; }
.pp .map .mt { fill: #fff; stroke: #161616; stroke-width: 5; }
.pp .map .ms { fill: #fff; stroke: #161616; stroke-width: 3; }
.pp .map .ms.on { fill: #161616; }
.pp .map .mn { font-family: Georgia, "Times New Roman", serif; fill: #161616; }
.pp .map .mf { fill: #f3f3f1; stroke: #9a9a9a; stroke-width: 3; }
.pp .map .mf-door { stroke-dasharray: 10 8; fill: #fff; }
.pp .map .mf-label { fill: #77787c; font-weight: 700; letter-spacing: 3px; }
.pp .mapbox { border: 0.3mm solid #bdbdbd; padding: 7mm 3mm 3mm; }
.pp .mapcap { position: absolute; left: 3mm; top: 1.5mm; margin: 0; font-size: 3.2mm; letter-spacing: 0.2em; text-transform: uppercase; color: #66676b; }

.pp .fl { margin: 0; line-height: 1; border-bottom: 0.3mm solid #161616; }
.pp .fl small { font-family: "Atkinson Hyperlegible", Verdana, sans-serif; font-size: 0.45em; letter-spacing: 0.1em; text-transform: uppercase; color: #66676b; }
.pp .fr { display: flex; align-items: baseline; gap: 1.2mm; white-space: nowrap; line-height: 1.5; }
.pp .fr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pp .fr i { flex: 1; min-width: 3mm; border-bottom: 0.4mm dotted #9a9a9a; transform: translateY(-0.6mm); }
.pp .fr b { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }

.pp .ck { margin: 0; text-align: center; text-transform: uppercase; letter-spacing: 0.3em; color: #66676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp .cnum { margin: 0; text-align: center; line-height: 1; white-space: nowrap; overflow: hidden; }
.pp .cname { margin: 0; text-align: center; white-space: nowrap; overflow: hidden; }
.pp .cbar { height: 0; border-top: 0.5mm solid #161616; }
.pp .cnames { list-style: none; margin: 0; padding: 0; text-align: center; line-height: 1.45; column-gap: 8mm; column-fill: balance; }
.pp .cnames li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; break-inside: avoid; }
.pp .cut { left: 0; height: 0; border-top: 0.4mm dashed #bdbdbd; }
.pp .cut span { position: absolute; left: 50%; top: -1.8mm; padding: 0 2mm; transform: translateX(-50%); background: #fff; font-size: 2.4mm; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8a; }

.pp .clip { overflow: hidden; }
.pp .trim { position: absolute; background: #161616; }
.pp .trim.h { height: 0.25mm; }
.pp .trim.v { width: 0.25mm; }
.pp .tilecap { position: absolute; margin: 0; font-size: 2.4mm; letter-spacing: 0.08em; text-transform: uppercase; color: #66676b; white-space: nowrap; }
.pp .locked { margin: 0; text-align: center; line-height: 1.5; }

/* ---------- motion ---------- */
@keyframes seat-pop { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes seat-drop { from { transform: scale(0.82) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes seat-slide { from { transform: translateY(-4px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes seat-toast { from { transform: translate(-50%, 14px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes seat-land { 0% { transform: scale(0.15); background: var(--orange); border-color: var(--orange); } 55% { transform: scale(1.18); background: var(--orange); border-color: var(--ink); } 100% { transform: none; } }
@keyframes seat-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }

/* ---------- print ---------- */
.print-only { display: none; }
@media print {
  body { background: #fff; min-height: 0; }
  .no-print, .test-banner, .seat-toast { display: none !important; }
  .print-only { display: block; }
  .printout .pp { break-after: page; break-inside: avoid; }
  .printout .pp:last-child { break-after: auto; }
}