/* Plus One design system — bundle.css. Load after tokens.css.
   The prelude is generated by .claude/design-kit/sync_system.py: the text styles as
   font shorthands, and the motion; then the invitation themes; then the kit.
   A shorthand's var() is worked out where it is declared, so the prelude is
   declared on every po-app root too: there it takes the root's face, a theme's included. */
:root, .po-app {
  --po-display: 600 40px/44px var(--po-font-display);
  --po-title: 600 30px/36px var(--po-font-display);
  --po-heading: 600 22px/28px var(--po-font-display);
  --po-reply-word: 600 20px/24px var(--po-font-display);
  --po-body: 400 16px/24px var(--po-font-ui);
  --po-body-strong: 600 16px/24px var(--po-font-ui);
  --po-label: 500 14px/20px var(--po-font-ui);
  --po-small: 400 14px/20px var(--po-font-ui);
  --po-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --po-motion-fast: 150ms;
  --po-motion-confetti: 900ms;
}

/* The invitation themes, from web/tokens/invitation-themes.json. A page or a drawing sets
   data-invite="<id>" on its po-app root. Generated: change the themes file and sync again. */
.po-app[data-invite="t01"] {
  --po-bg-tint: var(--po-invite-t01-ground);
  --po-card: var(--po-invite-t01-card);
  --po-bg-light: var(--po-invite-t01-panel);
  --po-surface-muted: var(--po-invite-t01-panel);
  --po-ink: var(--po-invite-t01-ink);
  --po-text-secondary: var(--po-invite-t01-ink-soft);
  --po-placeholder: var(--po-invite-t01-placeholder);
  --po-border: var(--po-invite-t01-edge);
  --po-control-edge: var(--po-invite-t01-edge);
  --po-border-light: var(--po-invite-t01-line);
  --po-ring: var(--po-invite-t01-ring);
  --po-link: var(--po-invite-t01-accent-strong);
  --po-accent: var(--po-invite-t01-accent);
  --po-accent-strong: var(--po-invite-t01-accent-strong);
  --po-on-accent: var(--po-invite-t01-on-accent);
  --po-accent-soft: var(--po-invite-t01-soft);
  --po-pop-1: var(--po-invite-t01-pop-1);
  --po-pop-2: var(--po-invite-t01-pop-2);
  --po-pop-3: var(--po-invite-t01-pop-3);
  --po-pattern-ink: var(--po-invite-t01-pattern-ink);
  --po-font-display: var(--po-font-face-fredoka);
}
.po-app[data-invite="t02"] {
  color-scheme: dark;
  --po-bg-tint: var(--po-invite-t02-ground);
  --po-card: var(--po-invite-t02-card);
  --po-bg-light: var(--po-invite-t02-panel);
  --po-surface-muted: var(--po-invite-t02-panel);
  --po-ink: var(--po-invite-t02-ink);
  --po-text-secondary: var(--po-invite-t02-ink-soft);
  --po-placeholder: var(--po-invite-t02-placeholder);
  --po-border: var(--po-invite-t02-edge);
  --po-control-edge: var(--po-invite-t02-edge);
  --po-border-light: var(--po-invite-t02-line);
  --po-ring: var(--po-invite-t02-ring);
  --po-link: var(--po-invite-t02-accent-strong);
  --po-accent: var(--po-invite-t02-accent);
  --po-accent-strong: var(--po-invite-t02-accent-strong);
  --po-on-accent: var(--po-invite-t02-on-accent);
  --po-accent-soft: var(--po-invite-t02-soft);
  --po-pop-1: var(--po-invite-t02-pop-1);
  --po-pop-2: var(--po-invite-t02-pop-2);
  --po-pop-3: var(--po-invite-t02-pop-3);
  --po-pattern-ink: var(--po-invite-t02-pattern-ink);
  --po-font-display: var(--po-font-face-fraunces);
}
.po-app[data-invite="t03"] {
  --po-bg-tint: var(--po-invite-t03-ground);
  --po-card: var(--po-invite-t03-card);
  --po-bg-light: var(--po-invite-t03-panel);
  --po-surface-muted: var(--po-invite-t03-panel);
  --po-ink: var(--po-invite-t03-ink);
  --po-text-secondary: var(--po-invite-t03-ink-soft);
  --po-placeholder: var(--po-invite-t03-placeholder);
  --po-border: var(--po-invite-t03-edge);
  --po-control-edge: var(--po-invite-t03-edge);
  --po-border-light: var(--po-invite-t03-line);
  --po-ring: var(--po-invite-t03-ring);
  --po-link: var(--po-invite-t03-accent-strong);
  --po-accent: var(--po-invite-t03-accent);
  --po-accent-strong: var(--po-invite-t03-accent-strong);
  --po-on-accent: var(--po-invite-t03-on-accent);
  --po-accent-soft: var(--po-invite-t03-soft);
  --po-pop-1: var(--po-invite-t03-pop-1);
  --po-pop-2: var(--po-invite-t03-pop-2);
  --po-pop-3: var(--po-invite-t03-pop-3);
  --po-pattern-ink: var(--po-invite-t03-pattern-ink);
  --po-font-display: var(--po-font-face-fraunces);
}
.po-app[data-invite="t04"] {
  color-scheme: dark;
  --po-bg-tint: var(--po-invite-t04-ground);
  --po-card: var(--po-invite-t04-card);
  --po-bg-light: var(--po-invite-t04-panel);
  --po-surface-muted: var(--po-invite-t04-panel);
  --po-ink: var(--po-invite-t04-ink);
  --po-text-secondary: var(--po-invite-t04-ink-soft);
  --po-placeholder: var(--po-invite-t04-placeholder);
  --po-border: var(--po-invite-t04-edge);
  --po-control-edge: var(--po-invite-t04-edge);
  --po-border-light: var(--po-invite-t04-line);
  --po-ring: var(--po-invite-t04-ring);
  --po-link: var(--po-invite-t04-accent-strong);
  --po-accent: var(--po-invite-t04-accent);
  --po-accent-strong: var(--po-invite-t04-accent-strong);
  --po-on-accent: var(--po-invite-t04-on-accent);
  --po-accent-soft: var(--po-invite-t04-soft);
  --po-pop-1: var(--po-invite-t04-pop-1);
  --po-pop-2: var(--po-invite-t04-pop-2);
  --po-pop-3: var(--po-invite-t04-pop-3);
  --po-pattern-ink: var(--po-invite-t04-pattern-ink);
  --po-font-display: var(--po-font-face-bricolage-grotesque);
}
.po-app[data-invite="t05"] {
  --po-bg-tint: var(--po-invite-t05-ground);
  --po-card: var(--po-invite-t05-card);
  --po-bg-light: var(--po-invite-t05-panel);
  --po-surface-muted: var(--po-invite-t05-panel);
  --po-ink: var(--po-invite-t05-ink);
  --po-text-secondary: var(--po-invite-t05-ink-soft);
  --po-placeholder: var(--po-invite-t05-placeholder);
  --po-border: var(--po-invite-t05-edge);
  --po-control-edge: var(--po-invite-t05-edge);
  --po-border-light: var(--po-invite-t05-line);
  --po-ring: var(--po-invite-t05-ring);
  --po-link: var(--po-invite-t05-accent-strong);
  --po-accent: var(--po-invite-t05-accent);
  --po-accent-strong: var(--po-invite-t05-accent-strong);
  --po-on-accent: var(--po-invite-t05-on-accent);
  --po-accent-soft: var(--po-invite-t05-soft);
  --po-pop-1: var(--po-invite-t05-pop-1);
  --po-pop-2: var(--po-invite-t05-pop-2);
  --po-pop-3: var(--po-invite-t05-pop-3);
  --po-pattern-ink: var(--po-invite-t05-pattern-ink);
  --po-font-display: var(--po-font-face-fraunces);
}
.po-app[data-invite="t06"] {
  --po-bg-tint: var(--po-invite-t06-ground);
  --po-card: var(--po-invite-t06-card);
  --po-bg-light: var(--po-invite-t06-panel);
  --po-surface-muted: var(--po-invite-t06-panel);
  --po-ink: var(--po-invite-t06-ink);
  --po-text-secondary: var(--po-invite-t06-ink-soft);
  --po-placeholder: var(--po-invite-t06-placeholder);
  --po-border: var(--po-invite-t06-edge);
  --po-control-edge: var(--po-invite-t06-edge);
  --po-border-light: var(--po-invite-t06-line);
  --po-ring: var(--po-invite-t06-ring);
  --po-link: var(--po-invite-t06-accent-strong);
  --po-accent: var(--po-invite-t06-accent);
  --po-accent-strong: var(--po-invite-t06-accent-strong);
  --po-on-accent: var(--po-invite-t06-on-accent);
  --po-accent-soft: var(--po-invite-t06-soft);
  --po-pop-1: var(--po-invite-t06-pop-1);
  --po-pop-2: var(--po-invite-t06-pop-2);
  --po-pop-3: var(--po-invite-t06-pop-3);
  --po-pattern-ink: var(--po-invite-t06-pattern-ink);
  --po-font-display: var(--po-font-face-baloo-2);
}
.po-app[data-invite="t07"] {
  color-scheme: dark;
  --po-bg-tint: var(--po-invite-t07-ground);
  --po-card: var(--po-invite-t07-card);
  --po-bg-light: var(--po-invite-t07-panel);
  --po-surface-muted: var(--po-invite-t07-panel);
  --po-ink: var(--po-invite-t07-ink);
  --po-text-secondary: var(--po-invite-t07-ink-soft);
  --po-placeholder: var(--po-invite-t07-placeholder);
  --po-border: var(--po-invite-t07-edge);
  --po-control-edge: var(--po-invite-t07-edge);
  --po-border-light: var(--po-invite-t07-line);
  --po-ring: var(--po-invite-t07-ring);
  --po-link: var(--po-invite-t07-accent-strong);
  --po-accent: var(--po-invite-t07-accent);
  --po-accent-strong: var(--po-invite-t07-accent-strong);
  --po-on-accent: var(--po-invite-t07-on-accent);
  --po-accent-soft: var(--po-invite-t07-soft);
  --po-pop-1: var(--po-invite-t07-pop-1);
  --po-pop-2: var(--po-invite-t07-pop-2);
  --po-pop-3: var(--po-invite-t07-pop-3);
  --po-pattern-ink: var(--po-invite-t07-pattern-ink);
  --po-font-display: var(--po-font-face-caveat);
}
.po-app[data-invite="t08"] {
  --po-bg-tint: var(--po-invite-t08-ground);
  --po-card: var(--po-invite-t08-card);
  --po-bg-light: var(--po-invite-t08-panel);
  --po-surface-muted: var(--po-invite-t08-panel);
  --po-ink: var(--po-invite-t08-ink);
  --po-text-secondary: var(--po-invite-t08-ink-soft);
  --po-placeholder: var(--po-invite-t08-placeholder);
  --po-border: var(--po-invite-t08-edge);
  --po-control-edge: var(--po-invite-t08-edge);
  --po-border-light: var(--po-invite-t08-line);
  --po-ring: var(--po-invite-t08-ring);
  --po-link: var(--po-invite-t08-accent-strong);
  --po-accent: var(--po-invite-t08-accent);
  --po-accent-strong: var(--po-invite-t08-accent-strong);
  --po-on-accent: var(--po-invite-t08-on-accent);
  --po-accent-soft: var(--po-invite-t08-soft);
  --po-pop-1: var(--po-invite-t08-pop-1);
  --po-pop-2: var(--po-invite-t08-pop-2);
  --po-pop-3: var(--po-invite-t08-pop-3);
  --po-pattern-ink: var(--po-invite-t08-pattern-ink);
  --po-font-display: var(--po-font-face-baloo-2);
}
.po-app[data-invite="t09"] {
  --po-bg-tint: var(--po-invite-t09-ground);
  --po-card: var(--po-invite-t09-card);
  --po-bg-light: var(--po-invite-t09-panel);
  --po-surface-muted: var(--po-invite-t09-panel);
  --po-ink: var(--po-invite-t09-ink);
  --po-text-secondary: var(--po-invite-t09-ink-soft);
  --po-placeholder: var(--po-invite-t09-placeholder);
  --po-border: var(--po-invite-t09-edge);
  --po-control-edge: var(--po-invite-t09-edge);
  --po-border-light: var(--po-invite-t09-line);
  --po-ring: var(--po-invite-t09-ring);
  --po-link: var(--po-invite-t09-accent-strong);
  --po-accent: var(--po-invite-t09-accent);
  --po-accent-strong: var(--po-invite-t09-accent-strong);
  --po-on-accent: var(--po-invite-t09-on-accent);
  --po-accent-soft: var(--po-invite-t09-soft);
  --po-pop-1: var(--po-invite-t09-pop-1);
  --po-pop-2: var(--po-invite-t09-pop-2);
  --po-pop-3: var(--po-invite-t09-pop-3);
  --po-pattern-ink: var(--po-invite-t09-pattern-ink);
  --po-font-display: var(--po-font-face-caveat);
}
.po-app[data-invite="t10"] {
  color-scheme: dark;
  --po-bg-tint: var(--po-invite-t10-ground);
  --po-card: var(--po-invite-t10-card);
  --po-bg-light: var(--po-invite-t10-panel);
  --po-surface-muted: var(--po-invite-t10-panel);
  --po-ink: var(--po-invite-t10-ink);
  --po-text-secondary: var(--po-invite-t10-ink-soft);
  --po-placeholder: var(--po-invite-t10-placeholder);
  --po-border: var(--po-invite-t10-edge);
  --po-control-edge: var(--po-invite-t10-edge);
  --po-border-light: var(--po-invite-t10-line);
  --po-ring: var(--po-invite-t10-ring);
  --po-link: var(--po-invite-t10-accent-strong);
  --po-accent: var(--po-invite-t10-accent);
  --po-accent-strong: var(--po-invite-t10-accent-strong);
  --po-on-accent: var(--po-invite-t10-on-accent);
  --po-accent-soft: var(--po-invite-t10-soft);
  --po-pop-1: var(--po-invite-t10-pop-1);
  --po-pop-2: var(--po-invite-t10-pop-2);
  --po-pop-3: var(--po-invite-t10-pop-3);
  --po-pattern-ink: var(--po-invite-t10-pattern-ink);
  --po-font-display: var(--po-font-face-bricolage-grotesque);
}

/* ===== The Plus One kit ==================================================
   The parts a screen is built from, as CSS classes over the tokens. A value here
   is a token; the only literal numbers are border widths, offsets and the motion's
   own distances. Add a part here, with a folder under components/, rather than
   styling it inline twice.

   A drawing sets data-theme on its root; a page sets none and follows the device. */

/* ---- The ground ---- */
.po-app {
  background: var(--po-bg-tint);
  color: var(--po-ink);
  font: var(--po-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
.po-app *, .po-app *::before, .po-app *::after { box-sizing: border-box; }
/* A served page's root fills the window; a drawing's frame sets its own height. */
.po-app--screen { min-height: 100vh; }
/* Shown only when a link to its id is followed: the reply form behind "change your reply". */
.po-later:not(:target) { display: none; }
.po-app :focus-visible {
  outline: 3px solid var(--po-accent-strong);
  outline-offset: 2px;
}
.po-page {
  width: 100%;
  max-width: var(--po-size-page);
  margin: 0 auto;
  padding: var(--po-space-24) var(--po-space-16) var(--po-space-48);
  display: flex;
  flex-direction: column;
  gap: var(--po-space-24);
}
.po-page--wide { max-width: var(--po-size-page-wide); }
.po-stack { display: flex; flex-direction: column; gap: var(--po-space-8); }
.po-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--po-space-12); }
.po-secondary { color: var(--po-text-secondary); }
/* po-link is for a card: on the page ground it falls below 4.5:1. */
.po-link { color: inherit; text-underline-offset: 2px; }
.po-card .po-link { color: var(--po-link); }

/* ---- A word the owner has not named ---- */
.po-word {
  display: inline-block;
  padding: 0 var(--po-space-4);
  border: 2px dashed currentColor;
  border-radius: var(--po-radius-small);
}
.po-word--block { display: block; padding: var(--po-space-8) var(--po-space-12); }

/* ---- Buttons ---- */
.po-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--po-space-8);
  min-height: var(--po-size-touch);
  padding: var(--po-space-8) var(--po-space-20);
  border: 2px solid var(--po-accent-strong);
  border-radius: var(--po-radius-control);
  background: var(--po-accent);
  color: var(--po-on-accent);
  font: var(--po-body-strong);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--po-motion-fast) var(--po-motion-ease);
}
.po-btn:hover { transform: translateY(-1px); }
.po-btn--outline { background: transparent; border-color: var(--po-accent-strong); color: var(--po-accent-strong); }
.po-btn--quiet { background: transparent; border-color: transparent; color: var(--po-text-secondary); }
.po-btn:disabled {
  background: var(--po-surface-muted);
  border-color: var(--po-border);
  color: var(--po-text-secondary);
  cursor: not-allowed;
  transform: none;
}

/* ---- Reply buttons: three large choices ---- */
.po-reply { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--po-space-12); }
.po-reply__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--po-size-reply);
  padding: var(--po-space-8);
  border: 2px solid var(--po-control-edge);
  border-radius: var(--po-radius-control);
  background: var(--po-card);
  color: var(--po-ink);
  font: var(--po-reply-word);
  cursor: pointer;
  transition: transform var(--po-motion-fast) var(--po-motion-ease);
}
.po-reply__btn:hover { transform: translateY(-2px); border-color: var(--po-accent-strong); }
.po-reply__btn[aria-pressed="true"],
.po-reply__btn:has(> .po-reply__choice:checked) { background: var(--po-accent); border-color: var(--po-accent-strong); color: var(--po-on-accent); }
/* On a served page a reply button is a label holding its radio, so the choice needs no
   script and Enter sends the form, never a reply. The radio is there for the keyboard only. */
.po-reply__choice { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.po-reply__btn:has(> .po-reply__choice:focus-visible) { outline: 3px solid var(--po-accent-strong); outline-offset: 2px; }

/* ---- The invitation card ---- */
.po-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--po-border);
  border-radius: var(--po-radius-card);
  background: var(--po-card);
}
.po-card__art {
  display: block;
  width: 100%;
  background: var(--po-accent-soft);
}
.po-card__art:empty { min-height: var(--po-size-art); }
.po-card__art > svg, .po-card__art > img { display: block; width: 100%; height: auto; }
.po-card__body { display: flex; flex-direction: column; gap: var(--po-space-20); padding: var(--po-space-20); }
.po-facts { margin: 0; display: flex; flex-direction: column; gap: var(--po-space-8); }
.po-facts__item { margin: 0; }

/* ---- An invitation theme, and its pattern behind the page ----
   A theme is set by data-invite="<id>" on the po-app root (the rules are generated, in
   this bundle's prelude). A theme with a pattern draws one .po-pattern svg as the
   root's first child; its shapes carry .po-pattern__ink. The card covers it. */
.po-app[data-invite] { position: relative; isolation: isolate; }
.po-pattern { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
.po-pattern__ink { fill: var(--po-pattern-ink); }

/* ---- Fields ---- */
.po-field { display: flex; flex-direction: column; gap: var(--po-space-8); }
.po-field__label { font: var(--po-label); color: var(--po-ink); }
.po-field__input {
  width: 100%;
  min-height: var(--po-size-touch);
  padding: var(--po-space-8) var(--po-space-12);
  border: 2px solid var(--po-control-edge);
  border-radius: var(--po-radius-control);
  background: var(--po-card);
  color: var(--po-ink);
  font: var(--po-body);
}
.po-field__input::placeholder { color: var(--po-placeholder); }
.po-field__input:focus-visible { border-color: var(--po-accent-strong); outline: 4px solid var(--po-ring); outline-offset: 0; }
.po-field__hint { font: var(--po-small); color: var(--po-text-secondary); }

/* ---- Stepper: how many are coming ---- */
.po-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--po-space-4);
  padding: var(--po-space-4);
  border: 2px solid var(--po-control-edge);
  border-radius: var(--po-radius-pill);
  background: var(--po-card);
  align-self: flex-start;
}
.po-stepper__btn {
  width: var(--po-size-touch);
  height: var(--po-size-touch);
  padding: 0;
  border: 0;
  border-radius: var(--po-radius-pill);
  background: var(--po-surface-muted);
  color: var(--po-ink);
  font: var(--po-reply-word);
  cursor: pointer;
}
.po-stepper__btn:disabled { color: var(--po-text-secondary); cursor: not-allowed; }
.po-stepper__value { min-width: var(--po-size-touch); text-align: center; font: var(--po-body-strong); font-variant-numeric: tabular-nums; }

/* ---- Chips: a guest's reply ---- */
.po-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--po-space-4);
  padding: var(--po-space-4) var(--po-space-12);
  border: 1px solid var(--po-chip-info-border);
  border-radius: var(--po-radius-pill);
  background: var(--po-chip-info-bg);
  color: var(--po-chip-info-fg);
  font: var(--po-label);
}
.po-chip--yes { border-color: var(--po-chip-success-border); background: var(--po-chip-success-bg); color: var(--po-chip-success-fg); }
.po-chip--maybe { border-color: var(--po-chip-warning-border); background: var(--po-chip-warning-bg); color: var(--po-chip-warning-fg); }
.po-chip--no { border-color: var(--po-chip-error-border); background: var(--po-chip-error-bg); color: var(--po-chip-error-fg); }

/* ---- The confirmation after a reply, with its confetti ---- */
.po-confirm {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--po-space-12);
  padding: var(--po-space-20);
  border-radius: var(--po-radius-control);
  background: var(--po-accent-soft);
  color: var(--po-ink);
}
.po-confetti { position: absolute; inset: 0; pointer-events: none; }
.po-confetti__bit {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--po-space-8);
  height: var(--po-space-12);
  border-radius: var(--po-radius-small);
  background: var(--po-pop-1);
  opacity: 0;
  animation: po-confetti-fall var(--po-motion-confetti) var(--po-motion-ease) 1 both;
}
.po-confetti__bit:nth-child(3n + 2) { left: 22%; background: var(--po-pop-2); animation-delay: 80ms; }
.po-confetti__bit:nth-child(3n) { left: 78%; background: var(--po-pop-3); animation-delay: 160ms; }
.po-confetti__bit:nth-child(4n) { left: 36%; background: var(--po-accent); }
.po-confetti__bit:nth-child(5n) { left: 64%; }
@keyframes po-confetti-fall {
  0% { transform: translateY(-16px) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(120px) rotate(220deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .po-confetti { display: none; }
  .po-btn, .po-reply__btn { transition: none; }
}

/* ---- An empty state, and the page for a link that does not work ---- */
.po-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--po-space-16);
  padding: var(--po-space-32) var(--po-space-20);
  border: 2px dashed var(--po-border);
  border-radius: var(--po-radius-card);
  background: var(--po-card);
  text-align: center;
}
.po-mark { display: block; width: var(--po-space-48); height: var(--po-space-48); }
.po-mark__a { fill: var(--po-accent); }
.po-mark__b { fill: var(--po-pop-1); }
.po-mark__c { fill: var(--po-pop-2); }
.po-mark__d { fill: var(--po-pop-3); }

/* ---- The guest table, on a host's page ---- */
.po-table { width: 100%; border-collapse: collapse; }
.po-table th {
  padding: var(--po-space-8) var(--po-space-12);
  border-bottom: 1px solid var(--po-border);
  font: var(--po-label);
  color: var(--po-text-secondary);
  text-align: left;
}
.po-table td {
  padding: var(--po-space-12);
  border-bottom: 1px solid var(--po-border-light);
  font: var(--po-body);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.po-table-box { overflow-x: auto; border: 1px solid var(--po-border); border-radius: var(--po-radius-control); background: var(--po-card); }

/* ---- Two widths, on a served host page: what a drawing shows at 1280 and at 390.
   Two columns side by side that stack on a phone; a part shown only at one width (the
   guest table at a desktop, one card a guest on a phone). 760 sits between the two. ---- */
.po-split { display: grid; grid-template-columns: 3fr 2fr; gap: var(--po-space-24); align-items: start; }
@media (max-width: 760px) {
  .po-split { grid-template-columns: minmax(0, 1fr); }
  .po-wide-only { display: none; }
}
@media (min-width: 760.02px) {
  .po-narrow-only { display: none; }
}

/* ---- The foot of a page ---- */
.po-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--po-space-8) var(--po-space-16);
  justify-content: center;
  align-items: center;
  font: var(--po-small);
  color: var(--po-text-secondary);
  text-align: center;
}
.po-footer .po-link { display: inline-flex; align-items: center; min-height: var(--po-size-touch); }