/* Table Planner.

   The plan itself is drawn on a canvas, which can't read DaisyUI's oklch
   theme tokens or a color-mix() expression — it needs a plain colour string.
   So the drawing palette is written out twice, in literal hex, and the script
   reads it back with getComputedStyle. Everything else in here uses the site's
   own tokens as usual.

   --tp-on-light stays dark in both themes: it's the ink for a name sitting on
   a party colour, and a party colour is a mid-tone whatever the page is doing
   around it.

   Layout: one app window (.tp-app) with a top bar, the guest list down the
   left and the floor plan filling the rest. The details card, the zoom
   controls, messages and the empty-room guide all float over the plan, so
   the plan never changes size when something is selected. */

.tp {
  --tp-ink: #1b2430;
  --tp-on-light: #1b2430;
  --tp-on-dark: #ffffff;
  --tp-faint: #7c8798;
  --tp-room: #ffffff;
  --tp-room-edge: #a3aebc;
  --tp-grid: #edf0f4;
  --tp-grid-major: #dce2e9;
  --tp-top: #ffffff;
  --tp-top-edge: #97a2b1;
  --tp-chair: #e9edf2;
  --tp-chair-edge: #a6b1bf;
  --tp-empty: #f3f5f8;
  --tp-accent: #2f6fbe;
  --tp-danger: #c0433b;
  --tp-feature: #e6eaef;
  --tp-feature-edge: #aeb9c6;
  --tp-floor: #efe5d2;
  --tp-floor-alt: #e3d3b6;
  --tp-floor-seam: #d2bf9c;
  --tp-plant: #d3e2d0;
  --tp-shadow: rgba(16, 24, 40, 0.13);

  --tp-warn: #b7791f;
  --tp-ok: #3f9a5b;
  --tp-panel: var(--color-base-100);
  --tp-line: var(--color-base-300);
  --tp-muted: var(--muted, var(--tp-faint));
  --tp-stage-bg: color-mix(in oklab, var(--color-base-200) 70%, var(--color-base-100));
  --tp-radius: var(--r-md, 0.875rem);
  --tp-sheet-w: 21rem;

  width: 100%;
  max-width: 108rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (width >= 40rem) {
  .tp { padding-inline: 1.5rem; }
}

[data-theme="dark"] .tp {
  --tp-ink: #e6ecf3;
  --tp-faint: #7e8b9c;
  --tp-room: #1d242e;
  --tp-room-edge: #4f5b6a;
  --tp-grid: #242c37;
  --tp-grid-major: #2f3946;
  --tp-top: #2b3541;
  --tp-top-edge: #5c6877;
  --tp-chair: #333e4b;
  --tp-chair-edge: #56626f;
  --tp-empty: #262f3a;
  --tp-accent: #6aa6e8;
  --tp-danger: #e0796f;
  --tp-feature: #28313c;
  --tp-feature-edge: #4a5665;
  --tp-floor: #3a332a;
  --tp-floor-alt: #322c24;
  --tp-floor-seam: #2a251f;
  --tp-plant: #2b3a2e;
  --tp-shadow: rgba(0, 0, 0, 0.45);
  --tp-warn: #e0a64e;
  --tp-ok: #5fbf7d;
  --tp-stage-bg: color-mix(in oklab, var(--color-base-300) 45%, var(--color-base-100));
}

.tp [hidden] { display: none !important; }

.tp-noscript {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--color-base-200);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
}

/* ---- The window -------------------------------------------------------- */

.tp-app {
  container: tp / inline-size;
  display: flex;
  flex-direction: column;
  /* Tall enough to fill the screen once you've scrolled to it, so the whole
     planner is in view at once. */
  height: clamp(34rem, calc(100dvh - 6.5rem), 64rem);
  border: 1px solid var(--tp-line);
  border-radius: var(--r-lg, 1.25rem);
  background: var(--tp-panel);
  box-shadow: 0 1px 2px var(--tp-shadow), 0 24px 48px -32px var(--tp-shadow);
  overflow: hidden;
}

/* ---- Top bar ----------------------------------------------------------- */

.tp-bar {
  position: relative;
  z-index: 50; /* its menus open over the plan */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--tp-line);
  background: var(--tp-panel);
}

.tp-bar-plan {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
}

.tp-bar-tools,
.tp-bar-end {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
}

.tp-bar-end {
  padding-left: 0.5rem;
  border-left: 1px solid var(--tp-line);
}

.tp-plan-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  max-width: 22rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--r-sm, 0.5rem);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.tp-plan-btn:hover,
.tp-menu[open] > .tp-plan-btn { background: var(--color-base-200); }
.tp-plan-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-plan-chev { flex: none; width: 0.875rem; height: 0.875rem; opacity: 0.55; }

.tp-status {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tp-muted);
  white-space: nowrap;
}
.tp-status:hover { background: var(--color-base-200); color: var(--color-base-content); }
.tp-status-text { overflow: hidden; text-overflow: ellipsis; }
.tp-status-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tp-faint);
}
.tp-status.is-saved .tp-status-dot { background: var(--tp-ok); }
.tp-status.is-busy .tp-status-dot { background: var(--tp-accent); animation: tp-blink 1s ease-in-out infinite; }
.tp-status.is-warn { color: var(--tp-warn); }
.tp-status.is-warn .tp-status-dot { background: var(--tp-warn); }

@keyframes tp-blink { 50% { opacity: 0.3; } }

/* Buttons */

.tp-btn {
  height: 2rem;
  min-height: 0;
  padding-inline: 0.625rem;
  gap: 0.375rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--r-sm, 0.5rem);
  background: var(--tp-panel);
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.tp-btn.btn-xs { height: 1.625rem; padding-inline: 0.5rem; font-size: 0.75rem; }
.tp-btn:hover:not(:disabled) { background: var(--color-base-200); }
.tp-btn:disabled { opacity: 0.4; }

.tp-btn-primary,
.tp-btn-primary:hover:not(:disabled) {
  border-color: transparent;
  background: var(--color-primary);
  color: var(--color-primary-content);
}
.tp-btn-primary:hover:not(:disabled) { filter: brightness(1.06); }

.tp-btn-quiet { border-color: transparent; background: transparent; }

.tp-btn-danger {
  border-color: color-mix(in oklab, var(--tp-danger) 35%, transparent);
  color: var(--tp-danger);
}
.tp-btn-danger:hover:not(:disabled) {
  background: color-mix(in oklab, var(--tp-danger) 10%, transparent);
}

.tp-icon-btn { width: 2rem; padding: 0; }

/* "Things to check": a dot that says how the plan is doing, green when
   there's nothing to say. */
.tp-check-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tp-ok); }
.tp-check.is-note .tp-check-dot { background: var(--tp-faint); }
.tp-check.is-bad { border-color: color-mix(in oklab, var(--tp-warn) 45%, transparent); color: var(--tp-warn); }
.tp-check.is-bad .tp-check-dot { background: var(--tp-warn); }

/* The bar gives up its words before it gives up its buttons. */
@container tp (width < 70rem) {
  .tp-bar [data-open-print] .tp-label,
  .tp-bar summary[aria-label^="Add something"] .tp-label { display: none; }
  .tp-bar [data-open-print],
  .tp-bar summary[aria-label^="Add something"] { width: 2rem; padding: 0; }
}
@container tp (width < 56rem) {
  .tp-bar .tp-label { display: none; }
  .tp-bar .tp-btn-primary .tp-label { display: inline; }
  .tp-bar .tp-bar-tools .tp-btn:not(.tp-btn-primary) { min-width: 2rem; padding-inline: 0.4375rem; }
  .tp-status-text { display: none; }
}
/* A phone: the plan's name on one row, every button as an icon on the next. */
@container tp (width < 38rem) {
  .tp-bar { flex-wrap: wrap; row-gap: 0.375rem; }
  .tp-bar-plan { flex-basis: 100%; }
  .tp-bar .tp-btn-primary .tp-label { display: none; }
  .tp-bar .tp-btn-primary { width: 2rem; padding: 0; }
  .tp-bar-tools,
  .tp-bar-end { gap: 0.25rem; }
  .tp-bar-end { margin-left: auto; padding-left: 0; border-left: 0; }
}

/* ---- Menus ------------------------------------------------------------- */

.tp-menu { position: relative; }
.tp-menu > summary { list-style: none; cursor: pointer; }
.tp-menu > summary::-webkit-details-marker { display: none; }

.tp-menu-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.375rem);
  left: 0;
  width: max-content;
  min-width: 14rem;
  max-width: min(92vw, 30rem);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: 0.375rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--tp-panel);
  box-shadow: 0 18px 40px -12px var(--tp-shadow), 0 2px 8px -2px var(--tp-shadow);
  animation: tp-menu-in 0.12s ease-out;
}

@keyframes tp-menu-in {
  from { opacity: 0; transform: translateY(-3px); }
}

.tp-menu-right > .tp-menu-panel { left: auto; right: 0; }
.tp-menu-up > .tp-menu-panel { top: auto; bottom: calc(100% + 0.375rem); animation-name: tp-menu-up; }
.tp-menu-wide { min-width: 22rem; }

@keyframes tp-menu-up {
  from { opacity: 0; transform: translateY(3px); }
}

.tp-menu-title {
  padding: 0.5rem 0.5rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-muted);
}

.tp-menu-note,
.tp-menu-text {
  padding: 0.25rem 0.5rem 0.5rem;
  max-width: 19rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--tp-muted);
}

.tp-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  text-align: left;
}
.tp-menu-item:hover { background: var(--color-base-200); }
.tp-menu-danger { color: var(--tp-danger); }

.tp-menu-rule {
  height: 1px;
  margin: 0.375rem 0.25rem;
  background: var(--tp-line);
}

.tp-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.25rem;
}

.tp-preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.5rem;
  border-radius: 0.625rem;
  text-align: left;
}
.tp-preset:hover { background: var(--color-base-200); }

.tp-preset-shape {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.125rem;
  border: 1.5px solid var(--tp-top-edge);
  background: var(--tp-top);
}
.tp-shape-round { border-radius: 50%; }
.tp-shape-oval { border-radius: 50%; width: 1.75rem; height: 1.125rem; }
.tp-shape-rect { border-radius: 0.1875rem; width: 1.75rem; height: 1rem; }
.tp-shape-serpentine {
  border-radius: 50%;
  border-color: transparent;
  border-top-color: var(--tp-top-edge);
  border-left-color: var(--tp-top-edge);
  background: transparent;
  transform: rotate(45deg);
}

.tp-preset-name { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.tp-preset-hint { font-size: 0.6875rem; color: var(--tp-muted); }

.tp-preset-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.125rem; }

/* Your plans */

.tp-plan-panel { width: 22rem; }

.tp-plan-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: 16rem;
  overflow-y: auto;
  margin-bottom: 0.25rem;
}

.tp-plan-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  width: 100%;
  padding: 0.4375rem 2rem 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  text-align: left;
}
button.tp-plan-item:hover { background: var(--color-base-200); }
.tp-plan-item-name { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-plan-item-meta { font-size: 0.6875rem; color: var(--tp-muted); }
.tp-plan-item.is-current { background: color-mix(in oklab, var(--tp-accent) 10%, transparent); }
.tp-plan-item.is-current::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 0.375rem;
  height: 0.6875rem;
  border: solid var(--tp-accent);
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
}

.tp-account {
  margin: 0.5rem 0.25rem 0.25rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--tp-accent) 25%, var(--tp-line));
  border-radius: 0.625rem;
  background: color-mix(in oklab, var(--tp-accent) 6%, var(--tp-panel));
  font-size: 0.8125rem;
  line-height: 1.5;
}
.tp-account p + p { margin-top: 0.25rem; color: var(--tp-muted); }
.tp-account-actions { display: flex; gap: 0.375rem; margin-top: 0.625rem; }

/* Things to check */

.tp-issues-panel { width: 22rem; }
.tp-issues { display: flex; flex-direction: column; gap: 0.0625rem; }

.tp-issue {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
}
.tp-issue:hover { background: var(--color-base-200); }
.tp-issue-dot { width: 0.5rem; height: 0.5rem; margin-top: 0.3125rem; border-radius: 50%; flex: none; }
.tp-issue.is-error .tp-issue-dot { background: var(--tp-danger); }
.tp-issue.is-warn .tp-issue-dot { background: var(--tp-warn); }
.tp-issue.is-info .tp-issue-dot { background: var(--tp-faint); }

.tp-issues-clear { padding: 0.25rem 0.5rem 0.5rem; font-size: 0.8125rem; color: var(--tp-muted); max-width: 19rem; }

/* What to show */

.tp-view-panel { min-width: 15rem; }

.tp-switch {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
}
.tp-switch:hover { background: var(--color-base-200); }
.tp-switch input {
  appearance: none;
  position: relative;
  flex: none;
  width: 1.875rem;
  height: 1.125rem;
  border-radius: 999px;
  background: var(--color-base-300);
  cursor: pointer;
  transition: background 0.15s;
}
.tp-switch input::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.tp-switch input:checked { background: var(--tp-accent); }
.tp-switch input:checked::after { transform: translateX(0.75rem); }
.tp-switch input:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }

/* How it works */

.tp-help { width: 23rem; }
.tp-help ul { display: flex; flex-direction: column; gap: 0.3125rem; padding: 0.125rem 0.5rem 0.5rem 1.375rem; list-style: disc; }
.tp-help ul.tp-keys { list-style: none; padding-left: 0.5rem; }
.tp-help li { font-size: 0.8125rem; line-height: 1.45; }
.tp-help li::marker { color: var(--tp-faint); }

.tp kbd {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 0.3125rem;
  border: 1px solid var(--tp-line);
  border-bottom-width: 2px;
  border-radius: 0.3125rem;
  background: var(--color-base-200);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}

/* ---- Tabs (narrow screens) --------------------------------------------- */

.tp-tabs {
  display: none;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--tp-line);
  background: var(--color-base-200);
}

.tp-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4375rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tp-muted);
}
.tp-tab.is-on { background: var(--tp-panel); color: var(--color-base-content); box-shadow: 0 1px 3px var(--tp-shadow); }

.tp-tab-count {
  min-width: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 0.75rem;
  background: var(--color-base-300);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Workspace --------------------------------------------------------- */

.tp-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
}

@container tp (width < 64rem) {
  .tp-body { grid-template-columns: 15.5rem minmax(0, 1fr); }
}

@container tp (width < 48rem) {
  .tp-tabs { display: flex; }
  .tp-body { grid-template-columns: minmax(0, 1fr); }
  .tp-body > [data-pane] { display: none; }
  .tp-body[data-showing="guests"] > [data-pane="guests"] { display: flex; border-right: 0; }
  .tp-body[data-showing="plan"] > [data-pane="plan"] { display: block; }
}

.tp-side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--tp-line);
  background: var(--tp-panel);
}

.tp-stage {
  container: stage / inline-size;
  position: relative;
  z-index: 0; /* everything floating over the plan stays under the top bar's menus */
  min-width: 0;
  min-height: 0;
  background: var(--tp-stage-bg);
  overflow: hidden;
}

/* Konva builds its own canvases inside this element, so it is a plain box:
   everything about how the plan looks lives in scene.js. */
.tp-canvas {
  position: absolute;
  inset: 0;
  /* Every gesture is handled in script, including pinch and pan, so the
     browser must not also scroll the page under the plan. */
  touch-action: none;
  outline: none;
  cursor: grab;
}
.tp-canvas:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: -2px; }
.tp-canvas canvas { display: block; }

/* ---- Full screen ------------------------------------------------------- */

html.tp-locked { overflow: hidden; }

.tp.is-focus {
  position: fixed;
  inset: 0;
  z-index: 60; /* over the site's sticky header, which sits at 40 */
  max-width: none;
  margin: 0;
  padding: 0.5rem;
  background: var(--color-base-200);
  overscroll-behavior: contain;
  animation: tp-focus-in 0.18s ease-out;
}
.tp.is-focus .tp-app { height: 100%; }

@keyframes tp-focus-in {
  from { opacity: 0; transform: scale(0.994); }
  to { opacity: 1; transform: none; }
}

[data-focus] .tp-focus-off { display: none; }
[data-focus][aria-pressed="true"] .tp-focus-on { display: none; }
[data-focus][aria-pressed="true"] .tp-focus-off { display: block; }

/* ---- The guest list ---------------------------------------------------- */

.tp-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.5rem 0.875rem;
}

.tp-side-title {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.tp-pill {
  min-width: 1.5rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.75rem;
  background: var(--color-base-200);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--tp-muted);
}

.tp-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.75rem;
  padding: 0 0.625rem;
  height: 2.125rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--r-sm, 0.5rem);
  color: var(--tp-muted);
}
.tp-search:focus-within { border-color: var(--tp-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--tp-accent) 15%, transparent); }
.tp-search input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  color: var(--color-base-content);
  outline: none;
}
.tp-search input::-webkit-search-cancel-button { cursor: pointer; }

.tp-filters {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem 0.5rem;
}

.tp-chip {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tp-muted);
}
.tp-chip:hover { background: var(--color-base-200); color: var(--color-base-content); }
.tp-chip.is-on {
  background: var(--color-base-content);
  color: var(--color-base-100);
}
.tp-chip-n {
  min-width: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--tp-warn) 22%, transparent);
  color: var(--tp-warn);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.tp-chip.is-on .tp-chip-n { background: color-mix(in oklab, var(--color-base-100) 22%, transparent); color: inherit; }
.tp-chip-n.is-zero { background: var(--color-base-200); color: var(--tp-muted); }

.tp-guest-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--tp-line);
}

.tp-side-empty {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tp-muted);
}
.tp-side-empty strong { color: var(--color-base-content); }

.tp-link {
  color: var(--tp-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tp-guests { padding: 0 0.375rem 0.5rem; }

.tp-guest-group {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.625rem 0.5rem 0.3125rem;
  background: var(--tp-panel);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tp-muted);
}
.tp-guest-group { cursor: pointer; border-radius: 0.375rem; }
.tp-guest-group:hover .tp-guest-group-name { color: var(--color-base-content); }
.tp-guest-group.is-on { color: var(--tp-accent); }
.tp-guest-group-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.tp-guest-group-dot.is-plain { box-shadow: inset 0 0 0 1.5px var(--tp-chair-edge); }
.tp-guest-group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-guest-group-count { font-variant-numeric: tabular-nums; }
.tp-guest-group-x { display: grid; place-items: center; }
.tp-guest-group-x svg { width: 0.75rem; height: 0.75rem; }

/* Show one group. Quiet until it's in use. */
.tp-group-pick {
  position: relative;
  margin: 0 0.75rem 0.5rem;
}
.tp-group-pick select {
  width: 100%;
  height: 1.875rem;
  padding: 0 1.75rem 0 0.625rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--r-sm, 0.5rem);
  background: var(--tp-panel);
  font-size: 0.8125rem;
  color: var(--tp-muted);
  appearance: none;
  cursor: pointer;
}
.tp-group-pick::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  border: solid var(--tp-muted);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.tp-group-pick select:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 1px; }
.tp-group-pick.is-on select {
  border-color: color-mix(in oklab, var(--tp-accent) 50%, transparent);
  background: color-mix(in oklab, var(--tp-accent) 9%, var(--tp-panel));
  color: var(--color-base-content);
  font-weight: 600;
}

.tp-guest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0.375rem 0.125rem 0.5rem;
  border-radius: 0.5rem;
  cursor: grab;
}
.tp-guest:hover { background: var(--color-base-200); }
.tp-guest.is-selected {
  background: color-mix(in oklab, var(--tp-accent) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tp-accent) 40%, transparent);
}
.tp-guest.is-dragging { opacity: 0.4; }
.tp-guest.is-new { animation: tp-flash 1.4s ease-out; }

@keyframes tp-flash {
  from { background: color-mix(in oklab, var(--tp-accent) 28%, transparent); }
}

.tp-guest-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; }
.tp-guest-dot.is-plain { box-shadow: inset 0 0 0 1.5px var(--tp-chair-edge); }

.tp-guest-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0.3125rem 0;
  text-align: left;
  cursor: inherit;
}
.tp-guest-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.tp-guest.is-vip .tp-guest-name::after {
  content: "★";
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: var(--tp-accent);
}
.tp-guest-sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--tp-muted);
}

.tp-guest-where {
  padding: 0.0625rem 0.375rem;
  border-radius: 0.375rem;
  background: var(--color-base-200);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tp-muted);
}
.tp-guest.is-standing .tp-guest-where {
  background: color-mix(in oklab, var(--tp-warn) 16%, transparent);
  color: var(--tp-warn);
}

.tp-guest-act {
  padding: 0.125rem 0.4375rem;
  border: 1px solid color-mix(in oklab, var(--tp-accent) 35%, transparent);
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--tp-accent);
  opacity: 0;
}
.tp-guest:hover .tp-guest-act,
.tp-guest:focus-within .tp-guest-act { opacity: 1; }
.tp-guest-act:hover { background: color-mix(in oklab, var(--tp-accent) 12%, transparent); }
@media (hover: none) {
  .tp-guest-act { opacity: 1; }
}

.tp-guest-none { padding: 1rem 0.5rem; font-size: 0.8125rem; color: var(--tp-muted); }

.tp-quickadd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0.75rem;
  padding: 0 0.625rem;
  height: 2.25rem;
  border: 1px dashed color-mix(in oklab, var(--color-base-content) 22%, transparent);
  border-radius: var(--r-sm, 0.5rem);
  color: var(--tp-muted);
}
.tp-quickadd:focus-within {
  border-style: solid;
  border-color: var(--tp-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tp-accent) 15%, transparent);
  color: var(--color-base-content);
}
.tp-quickadd input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  color: var(--color-base-content);
  outline: none;
}
.tp-quickadd input::placeholder { color: var(--tp-muted); }
.tp-quickadd-key { opacity: 0; transition: opacity 0.12s; }
.tp-quickadd:focus-within .tp-quickadd-key { opacity: 0.75; }

.tp-side-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  padding: 0.5rem 0.875rem 0.625rem;
  border-top: 1px solid var(--tp-line);
  font-size: 0.75rem;
  color: var(--tp-muted);
}
.tp-side-foot strong { color: var(--color-base-content); font-variant-numeric: tabular-nums; }

/* Carrying somebody off the plan: the list says where to let go. */
.tp-dropzone {
  position: absolute;
  inset: 0.375rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 2px dashed var(--tp-accent);
  border-radius: var(--tp-radius);
  background: color-mix(in oklab, var(--tp-accent) 9%, var(--tp-panel));
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  color: var(--tp-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.tp.is-carrying .tp-dropzone { opacity: 0.4; }
.tp.is-carrying .tp-side.is-drop .tp-dropzone { opacity: 1; }

/* ---- Over the plan ----------------------------------------------------- */

/* The empty room: a short guide, in the middle. */
.tp-blank {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(27rem, calc(100% - 2rem));
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--tp-panel);
  box-shadow: 0 18px 44px -20px var(--tp-shadow);
}
.tp-blank-title { font-size: 1.0625rem; font-weight: 700; }
.tp-steps {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.625rem 0 0.875rem;
  padding-left: 1.25rem;
  list-style: decimal;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tp-muted);
}
.tp-steps strong { color: var(--color-base-content); }
.tp-steps li::marker { font-weight: 700; color: var(--tp-accent); }
.tp-blank-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* One message at a time across the top: the example, the account nudge, or
   two copies of the plan disagreeing. */
.tp-banner {
  position: absolute;
  z-index: 22;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(42rem, calc(100% - 1.5rem));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 0.625rem 0.5625rem 0.875rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: color-mix(in oklab, var(--tp-panel) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -16px var(--tp-shadow);
  font-size: 0.8125rem;
  line-height: 1.45;
  animation: tp-drop-in 0.2s ease-out;
}
.tp-banner p { flex: 1; min-width: 0; color: var(--tp-muted); }
.tp-banner p strong { color: var(--color-base-content); }
.tp-banner-actions { display: flex; flex: none; gap: 0.375rem; }
.tp-banner-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  color: var(--tp-muted);
}
.tp-banner-x:hover { background: var(--color-base-200); color: var(--color-base-content); }
.tp-banner[data-kind="conflict"] {
  border-color: color-mix(in oklab, var(--tp-warn) 55%, transparent);
  background: color-mix(in oklab, var(--tp-warn) 10%, var(--tp-panel));
}
.tp-banner[data-kind="nudge"] { border-color: color-mix(in oklab, var(--tp-accent) 35%, var(--tp-line)); }

@keyframes tp-drop-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
}

@container stage (width < 44rem) {
  .tp-banner { flex-wrap: wrap; }
  .tp-banner p { flex-basis: calc(100% - 2.5rem); }
}

.tp-hint {
  position: absolute;
  z-index: 15;
  left: 50%;
  bottom: 4rem;
  transform: translateX(-50%);
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  background: var(--color-base-content);
  color: var(--color-base-100);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.tp-hint.is-on { opacity: 0.92; }

/* What just happened, with an Undo when there's something to undo. */
.tp-toast {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  max-width: min(34rem, calc(100% - 2rem));
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--color-base-content) 92%, transparent);
  color: var(--color-base-100);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45);
  font-size: 0.8125rem;
  line-height: 1.4;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.18s, transform 0.18s;
}
.tp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tp-toast span { padding-block: 0.125rem; }
.tp-toast button {
  flex: none;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--color-base-100) 16%, transparent);
  font-weight: 700;
  color: inherit;
}
.tp-toast button:hover { background: color-mix(in oklab, var(--color-base-100) 26%, transparent); }

/* Who is in the chair under the pointer. Worth having even with names turned
   on, because a chair is 46cm and a name is often longer than that. */
.tp-tip {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  max-width: 15rem;
  padding: 0.375rem 0.5625rem;
  border: 1px solid var(--tp-line);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--tp-panel) 95%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px -10px var(--tp-shadow);
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s, transform 0.12s;
  pointer-events: none;
}
.tp-tip.is-on { opacity: 1; transform: none; }
.tp-tip b { font-weight: 700; }
.tp-tip span { color: var(--tp-muted); }
.tp-tip-seat { font-size: 0.6875rem; }

/* The groups along the bottom, one row that scrolls sideways. Each is a
   filter: click one to pick those people out on the plan. */
.tp-legend {
  position: absolute;
  z-index: 10;
  left: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.25rem;
  max-width: calc(100% - 18.5rem);
  padding: 0.1875rem;
  border: 1px solid var(--tp-line);
  border-radius: 0.625rem;
  background: color-mix(in oklab, var(--tp-panel) 92%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px var(--tp-shadow);
  overflow-x: auto;
  scrollbar-width: none;
}
.tp-legend::-webkit-scrollbar { display: none; }
.tp-stage.has-sheet .tp-legend { max-width: calc(100% - 18.5rem - var(--tp-sheet-w) - 0.75rem); }
.tp-legend-item {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-base-content);
}
.tp-legend-item:hover { background: var(--color-base-200); }
.tp-legend-item i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; }
.tp-legend.has-focus .tp-legend-item:not(.is-on) { opacity: 0.55; }
.tp-legend-item.is-on {
  background: color-mix(in oklab, var(--tp-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tp-accent) 45%, transparent);
  opacity: 1;
}
@container stage (width < 46rem) {
  .tp-legend { display: none; }
}

/* The nudge towards full screen, sitting just above its button. */
.tp-coach {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.625rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.375rem 0.4375rem 0.75rem;
  border-radius: 0.625rem;
  background: var(--color-base-content);
  color: var(--color-base-100);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.4);
  font-size: 0.8125rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
}
.tp-coach.is-on { opacity: 1; transform: none; }
.tp-coach::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: var(--color-base-content);
}
.tp-coach-go {
  padding: 0.1875rem 0.5625rem;
  border-radius: 0.4375rem;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-weight: 700;
}
.tp-coach-x {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.375rem;
  opacity: 0.7;
}
.tp-coach-x:hover { opacity: 1; background: color-mix(in oklab, var(--color-base-100) 18%, transparent); }

/* Getting around: bottom right, out from under the details card when it's
   open. */
.tp-corner {
  position: absolute;
  z-index: 20;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: right 0.16s ease-out;
}
.tp-stage.has-sheet .tp-corner { right: calc(var(--tp-sheet-w) + 1.5rem); }

.tp-cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.375rem;
  border: 1px solid var(--tp-line);
  border-radius: 0.5rem;
  background: var(--tp-panel);
  box-shadow: 0 1px 2px var(--tp-shadow);
  color: var(--color-base-content);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.tp-cbtn:hover { background: var(--color-base-200); }
.tp-menu[open] > .tp-cbtn,
.tp-cbtn[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--tp-accent) 50%, transparent);
  color: var(--tp-accent);
}

.tp-zoom {
  display: flex;
  border: 1px solid var(--tp-line);
  border-radius: 0.5rem;
  background: var(--tp-panel);
  box-shadow: 0 1px 2px var(--tp-shadow);
  overflow: hidden;
}
.tp-zoom .tp-cbtn { border: 0; border-radius: 0; box-shadow: none; }
.tp-zoom-label { min-width: 3.25rem; font-variant-numeric: tabular-nums; }

/* The details card. (Not .tp-sheet: that's a printed page, see printing.js.) */
.tp-details {
  position: absolute;
  z-index: 25;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  width: min(var(--tp-sheet-w), calc(100% - 1.5rem));
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.tp-inspector {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--tp-panel);
  box-shadow: 0 22px 48px -22px var(--tp-shadow), 0 2px 8px -2px var(--tp-shadow);
  pointer-events: auto;
  animation: tp-sheet-in 0.16s ease-out;
}

@keyframes tp-sheet-in {
  from { opacity: 0; transform: translateX(8px); }
}

/* Too narrow for a card down the side: it becomes a sheet along the bottom. */
@container stage (width < 40rem) {
  .tp-details { top: auto; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; max-height: 60%; }
  .tp-stage.has-sheet .tp-corner { display: none; }
  .tp-stage.has-sheet .tp-toast { bottom: calc(60% + 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .tp.is-focus,
  .tp-inspector,
  .tp-banner,
  .tp-menu-panel { animation: none; }
}

/* ---- Carrying a guest --------------------------------------------------- */

.tp-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.5rem;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  background: var(--tp-panel);
  color: var(--color-base-content);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.38);
  font-size: 0.8125rem;
  white-space: nowrap;
  pointer-events: none;
}
.tp-ghost i { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--tp-chair-edge); }
.tp-ghost b { font-weight: 700; }
.tp-ghost span { font-size: 0.6875rem; font-weight: 600; color: var(--tp-muted); }
.tp-ghost span:empty { display: none; }
.tp-ghost[data-over="seat"],
.tp-ghost[data-over="list"] { border-color: var(--tp-accent); }
.tp-ghost[data-over="seat"] span,
.tp-ghost[data-over="list"] span { color: var(--tp-accent); }

/* The same tag, parked off screen for the browser to photograph as a drag
   image when a row is dragged out of the list. */
.tp-dragtag { left: -1000px; top: -1000px; }

/* ---- The chair popover ------------------------------------------------- */

.tp-pop {
  position: absolute;
  z-index: 30;
  width: 17rem;
  border: 1px solid var(--tp-line);
  border-radius: 0.75rem;
  background: var(--tp-panel);
  box-shadow: 0 20px 44px -14px var(--tp-shadow), 0 3px 10px -3px var(--tp-shadow);
  overflow: hidden;
}

.tp-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--tp-line);
  font-size: 0.75rem;
  font-weight: 700;
}
.tp-pop-close { padding: 0.125rem; border-radius: 0.25rem; opacity: 0.6; }
.tp-pop-close:hover { opacity: 1; background: var(--color-base-200); }

.tp-pop-search {
  width: 100%;
  padding: 0.5625rem 0.625rem;
  border: 0;
  border-bottom: 1px solid var(--tp-line);
  background: transparent;
  font-size: 0.875rem;
  outline: none;
}

.tp-pop-list { max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; padding: 0.25rem; }
.tp-pop-list button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.3125rem 0.4375rem;
  border-radius: 0.375rem;
  text-align: left;
}
.tp-pop-list li:first-child button { background: var(--color-base-200); }
.tp-pop-list button:hover { background: color-mix(in oklab, var(--tp-accent) 14%, transparent); }
.tp-pop-name { font-size: 0.8125rem; font-weight: 600; }
.tp-pop-meta { font-size: 0.6875rem; color: var(--tp-muted); }
.tp-pop-new .tp-pop-name { color: var(--tp-accent); }
.tp-pop-none { padding: 0.75rem 0.5rem; font-size: 0.75rem; color: var(--tp-muted); }

.tp-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border-top: 1px solid var(--tp-line);
  background: var(--color-base-200);
  font-size: 0.6875rem;
}

.tp-check {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  cursor: pointer;
}
.tp-check input { accent-color: var(--tp-accent); }

/* ---- Details card contents --------------------------------------------- */

.tp-form { padding: 0.75rem 0.875rem 0.875rem; display: flex; flex-direction: column; gap: 0.625rem; }

.tp-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}
.tp-sheet-title { min-width: 0; }
.tp-sheet-title h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.tp-sheet-title p { margin-top: 0.125rem; font-size: 0.75rem; color: var(--tp-muted); }
.tp-sheet-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.125rem -0.25rem 0 0;
  border-radius: 0.5rem;
  color: var(--tp-muted);
}
.tp-sheet-close:hover { background: var(--color-base-200); color: var(--color-base-content); }

.tp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tp-form-label { margin-top: 0.25rem; margin-bottom: -0.25rem; font-size: 0.6875rem; font-weight: 700; color: var(--tp-muted); }

.tp-field { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.tp-field > span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--tp-muted); }
.tp-field .input,
.tp-field .select { width: 100%; height: 2rem; min-height: 0; font-size: 0.8125rem; }

.tp-hint-text { font-size: 0.6875rem; font-style: normal; line-height: 1.45; color: var(--tp-muted); }

.tp-rotate-row { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: end; }
.tp-rotate-btns { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.tp-stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tp-stepper-row > span { font-size: 0.6875rem; font-weight: 700; color: var(--tp-muted); }
.tp-stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--tp-line);
  border-radius: var(--r-sm, 0.5rem);
  overflow: hidden;
}
.tp-stepper button { width: 2rem; font-size: 1rem; font-weight: 600; }
.tp-stepper button:hover { background: var(--color-base-200); }
.tp-stepper .input {
  width: 3.25rem;
  height: 2rem;
  min-height: 0;
  padding: 0;
  border-block: 0;
  border-inline: 1px solid var(--tp-line);
  border-radius: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  -moz-appearance: textfield;
}
.tp-stepper .input::-webkit-inner-spin-button,
.tp-stepper .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Chairs-per-side, laid out like the table it describes. */
.tp-sides { display: flex; flex-direction: column; gap: 0.25rem; }
.tp-sides-label { font-size: 0.6875rem; font-weight: 700; color: var(--tp-muted); }
.tp-sides-grid {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  grid-template-areas: ". top ." "left mid right" ". bottom .";
  gap: 0.25rem;
  place-items: center;
}
.tp-sides-grid .input { width: 3rem; height: 1.875rem; min-height: 0; padding: 0 0.25rem; text-align: center; font-size: 0.8125rem; }
.tp-sides-grid [data-side="n"] { grid-area: top; }
.tp-sides-grid [data-side="w"] { grid-area: left; }
.tp-sides-grid [data-side="e"] { grid-area: right; }
.tp-sides-grid [data-side="s"] { grid-area: bottom; }
.tp-sides-mid {
  grid-area: mid;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px dashed var(--tp-line);
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--tp-muted);
}

.tp-seatlist-panel {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  padding: 0.25rem;
  border: 1px solid var(--tp-line);
  border-radius: 0.625rem;
}

.tp-seatrow { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.25rem; }
.tp-seatrow-num {
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  color: var(--tp-muted);
  font-variant-numeric: tabular-nums;
}
.tp-seatrow-btn {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  text-align: left;
}
.tp-seatrow-btn:hover { background: color-mix(in oklab, var(--tp-accent) 12%, transparent); }
.tp-seatrow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-seatrow-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.tp-seatrow-btn em { margin-left: auto; font-size: 0.6875rem; font-style: normal; color: var(--tp-muted); }
.tp-seatrow-empty { color: var(--tp-muted); font-size: 0.75rem; }
.tp-seatrow-x {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  color: var(--tp-muted);
  opacity: 0.6;
}
.tp-seatrow-x svg { width: 0.75rem; height: 0.75rem; }
.tp-seatrow-x:hover { opacity: 1; background: var(--color-base-200); color: var(--color-base-content); }

.tp-actions { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.tp-actions-end { margin-top: 0.25rem; padding-top: 0.625rem; border-top: 1px solid var(--tp-line); }
.tp-align { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
.tp-align-2 { grid-template-columns: repeat(2, 1fr); }
.tp-align .btn { height: 1.875rem; min-height: 0; }

/* Folded-away sections: the things you set once. */
.tp-more {
  border: 1px solid var(--tp-line);
  border-radius: 0.625rem;
}
.tp-more > summary {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.tp-more > summary::-webkit-details-marker { display: none; }
.tp-more > summary::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.125rem;
  border: solid var(--tp-muted);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg);
  transition: transform 0.12s;
}
.tp-more[open] > summary::before { transform: rotate(45deg); }
.tp-more > summary:hover { background: var(--color-base-200); border-radius: 0.625rem; }
.tp-more-body { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.25rem 0.625rem 0.75rem; }

.tp-rule-block { display: flex; flex-direction: column; gap: 0.3125rem; }
.tp-rule-block h4 { font-size: 0.75rem; font-weight: 700; }
.tp-rule-block .select { height: 2rem; min-height: 0; font-size: 0.8125rem; }
.tp-rules { display: flex; flex-direction: column; gap: 0.125rem; }
.tp-rules li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  padding: 0.1875rem 0.25rem 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--color-base-200);
  font-size: 0.8125rem;
}
.tp-rules button { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 0.25rem; opacity: 0.6; }
.tp-rules button svg { width: 0.75rem; height: 0.75rem; }
.tp-rules button:hover { opacity: 1; color: var(--tp-danger); }

/* ---- Dialogs ----------------------------------------------------------- */

.tp-dialog {
  width: min(94vw, 34rem);
  max-height: 92vh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--tp-line);
  border-radius: 1rem;
  background: var(--tp-panel);
  color: var(--color-base-content);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.45);
}
.tp-dialog::backdrop { background: rgba(12, 18, 26, 0.55); backdrop-filter: blur(2px); }
.tp-dialog-form { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.125rem; }
.tp-dialog-form .tp-form { padding: 0; }
.tp-dialog-title { font-size: 1.125rem; font-weight: 700; }
.tp-dialog-text { font-size: 0.8125rem; color: var(--tp-muted); line-height: 1.55; }
.tp-dialog-text code {
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
  background: var(--color-base-200);
  font-size: 0.75rem;
}
.tp-dialog-note { font-size: 0.75rem; color: var(--tp-muted); }
.tp-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

.tp-textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--tp-line);
  border-radius: 0.625rem;
  background: var(--color-base-100);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  resize: vertical;
}
.tp-textarea:focus { outline: 2px solid var(--tp-accent); outline-offset: -1px; }

.tp-print-grid { display: grid; gap: 0.375rem; }
@media (width >= 32rem) { .tp-print-grid { grid-template-columns: 1fr 1fr; } }

.tp-print-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--tp-line);
  border-radius: 0.625rem;
  cursor: pointer;
}
.tp-print-opt:hover { background: var(--color-base-200); }
.tp-print-opt:has(input:checked) {
  border-color: color-mix(in oklab, var(--tp-accent) 55%, transparent);
  background: color-mix(in oklab, var(--tp-accent) 10%, transparent);
}
.tp-print-opt input { margin-top: 0.1875rem; accent-color: var(--tp-accent); }
.tp-print-opt span { display: flex; flex-direction: column; }
.tp-print-opt strong { font-size: 0.8125rem; }
.tp-print-opt em { font-size: 0.6875rem; font-style: normal; color: var(--tp-muted); }

.tp-print-tweaks {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.625rem;
  background: var(--color-base-200);
}
@media (width >= 32rem) { .tp-print-tweaks { grid-template-columns: 1fr 1fr; } }

.tp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.tp-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Printing ---------------------------------------------------------- */

/* The sheets are moved to be a direct child of <body> before printing, so
   this one rule can hide the entire site without having to know how the
   project page is nested. */
.tp-printout { display: none; }

@media print {
  body { background: #fff !important; }
  body > *:not(.tp-printout) { display: none !important; }

  .tp-printout {
    display: block !important;
    color: #1b2430;
    font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  }

  .tp-sheet { break-after: page; }
  .tp-sheet:last-child { break-after: auto; }

  .tp-head { margin-bottom: 6mm; border-bottom: 1.5pt solid #1b2430; padding-bottom: 2mm; }
  .tp-head h1 { font-size: 16pt; font-weight: 800; }
  .tp-head p { margin-top: 1mm; font-size: 9pt; color: #5d6875; }

  .tp-plan { display: flex; justify-content: center; }
  .tp-plan svg { width: 100%; height: auto; max-height: 175mm; }

  /* Table lists: two columns, and never split a table across a page. */
  .tp-cards { columns: 2; column-gap: 10mm; }
  .tp-card { break-inside: avoid; margin-bottom: 6mm; }
  .tp-card h2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 0.75pt solid #9aa5b3;
    padding-bottom: 1mm;
    font-size: 11pt;
    font-weight: 800;
  }
  .tp-count { font-size: 8pt; font-weight: 500; color: #5d6875; }
  .tp-seatlist { margin-top: 1.5mm; }
  .tp-seatlist li {
    display: grid;
    grid-template-columns: 6mm 1fr auto;
    gap: 2mm;
    padding: 0.6mm 0;
    font-size: 9.5pt;
  }
  .tp-num { color: #8d97a4; font-variant-numeric: tabular-nums; }
  .tp-meal { font-size: 8pt; color: #5d6875; }

  .tp-index { columns: 3; column-gap: 8mm; font-size: 9.5pt; }
  .tp-index li {
    display: flex;
    align-items: baseline;
    gap: 1mm;
    padding: 0.5mm 0;
    break-inside: avoid;
  }
  .tp-dots { flex: 1; border-bottom: 0.5pt dotted #b6bec9; }
  .tp-where { font-weight: 700; white-space: nowrap; }

  .tp-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .tp-table th,
  .tp-table td {
    border: 0.5pt solid #b6bec9;
    padding: 1.5mm 2mm;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .tp-table thead th { background: #eef1f4; font-size: 8.5pt; }
  .tp-table tbody th,
  .tp-table tfoot th { text-align: left; font-weight: 700; }
  .tp-table tfoot td,
  .tp-table tfoot th { border-top-width: 1.5pt; font-weight: 800; }

  /* Tent cards: 89mm wide, folded at the middle so the name reads from both
     sides of the table. */
  .tp-tents { display: flex; flex-wrap: wrap; gap: 4mm; }
  .tp-tent {
    width: 89mm;
    height: 102mm;
    break-inside: avoid;
    border: 0.5pt dashed #c9d0d9;
    display: grid;
    grid-template-rows: 1fr 0 1fr;
    text-align: center;
  }
  .tp-tent-back {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg);
    font-size: 15pt;
    font-weight: 700;
  }
  .tp-fold { border-top: 0.5pt dashed #c9d0d9; }
  .tp-tent-front {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2mm;
  }
  .tp-tent-name { font-size: 15pt; font-weight: 700; }
  .tp-tent-sub { font-size: 9pt; color: #5d6875; }

  .tp-escorts { display: flex; flex-wrap: wrap; gap: 3mm; }
  .tp-escort {
    width: 89mm;
    height: 51mm;
    break-inside: avoid;
    border: 0.5pt dashed #c9d0d9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2mm;
  }
  .tp-escort-name { font-size: 13pt; font-weight: 700; }
  .tp-escort-table { font-size: 10pt; color: #5d6875; }
}