/* ---- the two numbers ----------------------------------------------------- */
/* "40 guests, 66 people" is the distinction that matters operationally — one is
 * how many invitations you are managing, the other is how many bodies are in
 * the room. So they sit side by side, each with its own word, never merged. */
.tally { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tally__item { flex: 1 1 8rem; padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); }
.tally__num { display: block; font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); font-variant-numeric: tabular-nums; }
.tally__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.tally__item--lead { border-color: var(--color-accent);
  box-shadow: inset var(--border-width-accent) 0 0 var(--color-accent); }

.pay-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: var(--space-3) var(--space-4); background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-sm); }
.pay-strip__label { color: var(--color-text-muted); margin-inline-end: var(--space-2); }

/* ---- status control ------------------------------------------------------ */
/* A native <select>, not a bespoke menu. Every status is reachable from every
 * other one, it is keyboard-operable in a list without a roving-tabindex
 * scheme, and the popup is drawn by the OS — correct in both themes because
 * `color-scheme` is set in the tokens. */
.status-select {
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium);
  min-block-size: var(--target-min);
  padding-inline: var(--space-3);
  border: 1px solid currentcolor; border-radius: var(--radius-full);
  background: none; cursor: pointer;
  color: var(--color-tone-neutral);
}
.status-select--lg { font-size: var(--text-sm); }
.status-select:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset); }
.tone-neutral  { color: var(--color-tone-neutral); }
.tone-draft    { color: var(--color-tone-draft); }
.tone-info     { color: var(--color-tone-info); }
.tone-positive { color: var(--color-tone-positive); }
.tone-warning  { color: var(--color-tone-warning); }
.tone-danger   { color: var(--color-tone-danger); }
.status-select option { color: var(--color-text); background: var(--color-surface-raised); }
.status-select option:disabled { color: var(--color-disabled-text); }

.pax-field { display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted); }
/* The table has a column header saying Pax, so the per-row word is redundant
 * there and only there. The input keeps its own accessible name either way. */
.g-table .pax-word { display: none; }
.pax { inline-size: 4.5rem; min-block-size: var(--target-min);
  padding-inline: var(--space-2); font: inherit;
  font-variant-numeric: tabular-nums; text-align: end;
  color: var(--color-text); background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.pax:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset); }
.pax[aria-invalid="true"] { border-color: var(--color-danger); }

/* A name that opens the record behind it. A real <button>, not a styled span:
 * it is an action, it needs the keyboard, and it needs an accessible name that
 * says whose record it opens. */
.name-link { background: none; border: 0; padding: 0; font: inherit;
  color: var(--color-accent); text-align: start; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.name-link:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); }
.row__title .name-link { font-weight: inherit; }

/* ---- desktop guest table ------------------------------------------------- */
.g-table { inline-size: 100%; border-collapse: collapse; }
.g-table th, .g-table td { text-align: start; padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-border); vertical-align: middle; }
.g-table th { font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text-muted); white-space: nowrap; }
.g-table td:first-child { font-weight: var(--weight-medium); }
.g-table .num { text-align: end; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); }

.desktop-only { display: none; }
.phone-only   { display: block; }
@media (min-width: 48rem) { .desktop-only { display: block; } .phone-only { display: none; } }

/* A small set of checkboxes standing in for a multi-select. Every option is a
 * full-height target, because 44px applies to a checkbox as much as a button. */
.check-set { border: 0; padding: 0; margin: 0; }
.check-set__opts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.check-set__opts label {
  display: flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--target-min); cursor: pointer;
}
.check-set__opts input:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.detail-list { display: grid; gap: var(--space-3); margin: 0; }
.detail-list dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }

.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.proto { background: var(--color-surface-inverse); color: var(--color-text-inverse);
  font-size: var(--text-xs); padding: var(--space-2) var(--space-4); text-align: center;
  display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; align-items: center; }
.proto button { background: none; border: 1px solid currentcolor; color: inherit;
  border-radius: var(--radius-sm); font-size: var(--text-xs);
  padding: 2px var(--space-2); cursor: pointer; }

/* A panel's own actions sit beside its heading and stay content-sized. Only a
   page's primary action goes full width on a phone. */
#person-read-actions .btn { inline-size: auto; }

/* ── plan chooser ────────────────────────────────────────────────────────────
 * Three cards, stacked on a phone and side by side once there is room. No
 * feature column, because there is no feature difference — pricing.md. */
.plan-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}
/* The current plan is marked by a border and by the word "Current plan" on its
 * button — never by colour alone. */
.plan--current { border-color: var(--color-accent);
  box-shadow: inset var(--border-width-accent) 0 0 var(--color-accent); }

.plan__name  { margin: 0; font-size: var(--text-lg); }
.plan__price { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold);
               font-variant-numeric: tabular-nums; }
.plan__per   { font-size: var(--text-sm); font-weight: var(--weight-regular);
               color: var(--color-text-muted); }

.plan__limits { margin: 0; padding: 0; list-style: none;
                display: flex; flex-direction: column; gap: var(--space-2);
                font-size: var(--text-sm); color: var(--color-text-muted); }
/* Pushes the button to the bottom so three cards of different lengths still
 * line their actions up. */
.plan__limits { flex: 1; }