@layer commonpub {
/* ═══ CommonPub Shared Component Styles ═══
 * Canonical definitions for primitives used across all pages.
 * Imported globally via nuxt.config.ts — DO NOT duplicate in scoped styles.
 */

/* ─── BUTTONS ─── */
.cpub-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 14px;
  border: var(--border-width-default) solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.cpub-btn:hover { background: var(--surface2); }
.cpub-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* NOTE: layouts.css also defines .cpub-btn-primary at the same specificity and
   is imported after this file, so ITS declarations win. The two disagreed on
   the label token (--color-text-inverse here vs --color-on-accent there), which
   meant the value that actually shipped depended on import order. Both now name
   --color-on-accent, the token the contrast test locks. */
.cpub-btn-primary {
  background: var(--accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-block);
}

.cpub-btn-primary:hover {
  box-shadow: var(--shadow-block-sm);
}

.cpub-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.cpub-btn-secondary {
  background: var(--secondary);
  color: var(--color-on-secondary);
  border-color: var(--secondary);
  box-shadow: var(--shadow-block);
}
.cpub-btn-secondary:hover { background: var(--secondary-hover); box-shadow: var(--shadow-block-sm); }
.cpub-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.cpub-btn-sm { padding: 4px 10px; font-size: 11px; min-height: 44px; }
.cpub-btn-lg { padding: 12px 24px; font-size: 14px; font-weight: 600; }

.cpub-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-faint);
}

.cpub-btn-ghost:hover { color: var(--text-dim); background: transparent; }

/* ─── TAGS ─── */
.cpub-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs, 12px);
  font-family: var(--font-mono);
  padding: 2px 8px;
  border: var(--border-width-default) solid var(--border2);
  color: var(--text-dim);
  background: var(--surface2);
}

.cpub-tag-accent { border-color: var(--accent-border); color: var(--accent); background: var(--accent-bg); }
.cpub-tag-green { border-color: var(--green-border); color: var(--green-text); background: var(--green-bg); }
.cpub-tag-red { border-color: var(--red-border); color: var(--red-text); background: var(--red-bg); }
.cpub-tag-yellow { border-color: var(--yellow-border); color: var(--yellow-text); background: var(--yellow-bg); }
.cpub-tag-purple { border-color: var(--purple-border); color: var(--purple-text); background: var(--purple-bg); }
.cpub-tag-teal { border-color: var(--teal-border); color: var(--teal-text); background: var(--teal-bg); }

.cpub-tag-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ─── EMPTY STATES ─── */
.cpub-empty-state { text-align: center; padding: 48px 16px; }
.cpub-empty-state-icon { font-size: 32px; color: var(--text-faint); margin-bottom: 12px; }
.cpub-empty-state-title { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.cpub-empty-state-desc { font-size: 12px; color: var(--text-faint); }

/* ─── SIDEBAR CARDS ─── */
.cpub-sb-card {
  background: var(--surface);
  border: var(--border-width-default) solid var(--border);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-block);
  /* Glass treatment hook — `none` by default (a true no-op; non-none values
     create a stacking context, so only opted-in themes pay that cost). */
  -webkit-backdrop-filter: var(--surface-backdrop, none);
  backdrop-filter: var(--surface-backdrop, none);
}

.cpub-sb-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-family: var(--font-mono);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: var(--border-width-thin) solid var(--border2);
}

/* ─── SECTION HEADERS ─── */
.cpub-section-head,
.cpub-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: var(--border-width-default) solid var(--border);
}

.cpub-section-head h2,
.cpub-section-head h3,
.cpub-sec-head h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

/* ─── SECTION TITLE (large) ─── */
.cpub-section-title-lg {
  font-size: 22px;
  font-weight: 700;
}

/* ─── PAGINATION ─── */
.cpub-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
  margin-bottom: 16px;
}

.cpub-page-btn {
  min-width: 44px;
  min-height: 44px;
  border: var(--border-width-default) solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.cpub-page-btn:hover:not(:disabled) { color: var(--text); background: var(--surface2); }
.cpub-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.cpub-page-btn.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  box-shadow: var(--shadow-block-sm);
}

.cpub-page-ellipsis {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* ─── LINKS ─── */
.cpub-link { color: var(--accent); text-decoration: none; }
.cpub-link:hover { text-decoration: underline; }

/* ─── BACK LINK ─── */
.cpub-back-link {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-faint);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.cpub-back-link:hover { color: var(--accent); }

/* ─── HERO EYEBROW ─── */
.cpub-hero-eyebrow {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ─── SECTION SUB / HEAD RIGHT ─── */
.cpub-sec-sub { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.cpub-sec-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ─── FORM LAYOUT ─── */
.cpub-form-error {
  padding: 10px 14px;
  background: var(--red-bg);
  color: var(--red-text);
  border: var(--border-width-default) solid var(--red);
  font-size: 12px;
  font-family: var(--font-mono);
}

.cpub-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.cpub-form-label {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.cpub-form-hint {
  font-size: 10px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.cpub-input {
  padding: 8px 12px;
  border: var(--border-width-default) solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s;
}

.cpub-input:focus { border-color: var(--accent); }
.cpub-input::placeholder { color: var(--text-faint); }

.cpub-textarea {
  padding: 8px 12px;
  border: var(--border-width-default) solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
  transition: border-color 0.15s;
}

.cpub-textarea:focus { border-color: var(--accent); }
.cpub-textarea::placeholder { color: var(--text-faint); }

/* ─── LOADING STATE ─── */
.cpub-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 64px 16px;
  color: var(--text-faint);
  font-size: 13px;
  font-family: var(--font-mono);
}

.cpub-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: var(--border-width-default) solid var(--border);
  border-top-color: var(--accent);
  animation: cpub-spin 0.6s linear infinite;
}

@keyframes cpub-spin {
  to { transform: rotate(360deg); }
}

/* ─── ERROR STATE ─── */
.cpub-fetch-error {
  text-align: center;
  padding: 48px 16px;
  color: var(--red-text);
  font-size: 13px;
  font-family: var(--font-mono);
}

.cpub-fetch-error-icon {
  font-size: 24px;
  margin-bottom: 12px;
}

.cpub-fetch-error-msg {
  margin-bottom: 12px;
  color: var(--text-dim);
}

.cpub-fetch-error .cpub-btn {
  margin-top: 8px;
}

/* ─── DELETE BUTTON ─── */
.cpub-delete-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 4px 6px; font-size: 12px; }
.cpub-delete-btn:hover { color: var(--red-text); }
.cpub-delete-btn-sm { font-size: 10px; padding: 2px 4px; }

/* ─── DIVIDERS ─── */
.cpub-divider { border: none; border-top: var(--border-width-default) solid var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
   PERSONA (session 255)
   Presentation for the member-facing persona editor: the collapsible section,
   the chip grid, the completeness meter and the removed-data block. Canonical
   here rather than scoped inside each component for the same reason
   .cpub-filter-chip lives in layouts.css: a fork theming its community's
   chips overrides tokens, not a component's scoped rule.

   Every value below is a var(). Sharp corners (--radius: 0px is the global
   default and nothing here re-rounds), 2px borders via --border-width-default,
   offset shadows with no blur via --shadow-block-sm.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* THE chip-grid track floor. `repeat(auto-fill, minmax(var(--cpub-chip-min), 1fr))`
     is the whole responsive story: one token moves every chip grid from four
     narrow columns to two wide ones. Not a media query, so a fork changing it
     does not have to restate the breakpoints. */
  /* Measured, because the comment above used to claim "at 390px it lands on
     two" and it does not: the grid is 276px wide inside the page and card
     padding on a 390px phone, so two 10rem tracks plus the gap (336px) cannot
     fit and it lands on ONE.
     That is left alone deliberately. Forcing two columns needs a ~7rem floor,
     which gives 130px tracks, and the real labels ("AI and machine learning",
     "Game development") wrap to three lines in that width. One clean column of
     full-width rows is the better phone layout for long labels, and the height
     it costs is inherent to having 17 options. */
  --cpub-chip-min: 10rem;
  --cpub-chip-gap: var(--space-2);

  --cpub-chip-bg: var(--surface);
  --cpub-chip-border: var(--border2);
  --cpub-chip-text: var(--text);
  --cpub-chip-hover-bg: var(--surface2);

  /* Selected is never colour-alone (WCAG 1.4.1). Three cues stack: this
     background, the stronger border below, AND the checkbox's own checked
     state, which is a real <input type="checkbox"> and is never hidden. */
  --cpub-chip-selected-bg: var(--accent-bg-strong);
  --cpub-chip-selected-border: var(--accent);
  --cpub-chip-selected-text: var(--text);
  --cpub-chip-selected-shadow: var(--shadow-block-sm);

  /* Disabled chips (the maxSelections cap). Opacity only, because the chip
     still carries its border and its unchecked box; the polite live region
     next to the grid is what actually explains the state. */
  --cpub-chip-disabled-opacity: 0.5;

  /* Minimum interactive target. 44px is the WCAG 2.1 AA floor this repo holds
     itself to, and a chip is the densest control on the page. */
  --cpub-chip-min-height: 44px;

  --cpub-persona-section-bg: var(--surface);
  --cpub-persona-section-border: var(--border);
  --cpub-persona-section-header-bg: var(--surface2);

  --cpub-persona-meter-track: var(--surface2);
  --cpub-persona-meter-fill: var(--accent);
  --cpub-persona-meter-height: 8px;

  --cpub-persona-retired-bg: var(--yellow-bg);
  --cpub-persona-retired-border: var(--yellow-border);
}

/* ─── Persona: collapsible section ─── */
.cpub-persona-section {
  background: var(--cpub-persona-section-bg);
  border: var(--border-width-default) solid var(--cpub-persona-section-border);
  margin-bottom: var(--space-4);
}

/* The heading is a real <button aria-expanded aria-controls>, never a div with
   role="button": a role=button container holding button children is a spec
   violation this codebase has shipped once already. */
.cpub-persona-section-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--cpub-persona-section-header-bg);
  border: none;
  border-bottom: var(--border-width-default) solid transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: left;
  cursor: pointer;
}

.cpub-persona-section-toggle:hover { background: var(--surface3); }

.cpub-persona-section-toggle:focus-visible {
  outline: var(--border-width-default) solid var(--accent);
  outline-offset: -2px;
}

.cpub-persona-section-toggle[aria-expanded="true"] {
  border-bottom-color: var(--cpub-persona-section-border);
}

.cpub-persona-section-title { flex: 1; min-width: 0; }

/* Sentence-case, normal weight: the section's own help line, not a label. */
.cpub-persona-section-count {
  font-size: var(--text-xs);
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  flex-shrink: 0;
}

.cpub-persona-section-body { padding: var(--space-4); }

.cpub-persona-section-help {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: var(--leading-snug);
}

/* The run-up to Save was `--space-4` of margin PLUS `--space-4` of padding on
   top of the last field's own `--space-4` bottom margin. On a spacious theme
   that is ~96px of empty column with a rule floating in the middle of it, which
   reads as an empty bordered box rather than as a divider before an action.
   The rule stays; the dead space around it does not. */
.cpub-persona-section-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width-default) solid var(--border2);
}

.cpub-persona-section-status {
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin: 0;
}

.cpub-persona-section-error {
  font-size: var(--text-xs);
  color: var(--red-text);
  margin: 0;
}

/* ─── Persona: chip grid ─── */
/* A real <fieldset>/<legend> with real checkboxes. Deliberately NOT
   role="listbox" + aria-selected: aria-selected needs an option/tab/row/gridcell
   role prerequisite that a checkbox will never have. */
.cpub-chip-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  min-width: 0;
}

.cpub-chip-legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
}

/* --text-dim, NOT --text-faint. Measured, not assumed: --text-faint on
   --surface is 2.53:1 on the light theme, which fails AA outright, and this is
   the text that explains what a question means. --text-dim clears AA in every
   shipped theme (4.86:1 at worst). A regression test scores the token named in
   this rule, not the one it was meant to say. */
.cpub-chip-help {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: var(--leading-snug);
}

.cpub-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cpub-chip-min), 1fr));
  gap: var(--cpub-chip-gap);
}

.cpub-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--cpub-chip-min-height);
  padding: var(--space-2) var(--space-3);
  background: var(--cpub-chip-bg);
  border: var(--border-width-default) solid var(--cpub-chip-border);
  color: var(--cpub-chip-text);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cpub-chip:hover { background: var(--cpub-chip-hover-bg); }

.cpub-chip--selected {
  background: var(--cpub-chip-selected-bg);
  border-color: var(--cpub-chip-selected-border);
  color: var(--cpub-chip-selected-text);
  box-shadow: var(--cpub-chip-selected-shadow);
}

.cpub-chip--disabled {
  opacity: var(--cpub-chip-disabled-opacity);
  cursor: not-allowed;
}

/* The ring reaches the whole chip from the input inside it. :has() is the only
   way to do that without a JS focus mirror; browsers without it still get the
   input's own outline from the rule below. */
.cpub-chip:has(.cpub-chip-input:focus-visible) {
  outline: var(--border-width-default) solid var(--accent);
  outline-offset: 2px;
}

.cpub-chip-input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: inherit;
}

.cpub-chip-input:focus-visible {
  outline: var(--border-width-default) solid var(--accent);
  outline-offset: 2px;
}

.cpub-chip-text { min-width: 0; overflow-wrap: anywhere; }

/* Always in the DOM so the polite announcement is not a live region that
   appears at the same moment as its text (which many screen readers drop). */
.cpub-chip-status {
  margin: var(--space-2) 0 0;
  min-height: 1.2em;
  font-size: var(--text-xs);
  color: var(--text-dim);
}

/* ─── Persona: single field ─── */
.cpub-persona-field { margin-bottom: var(--space-4); }

.cpub-persona-field-label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
}

/* --text-dim for the same measured reason as .cpub-chip-help above. */
.cpub-persona-field-help {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-dim);
  line-height: var(--leading-snug);
}

.cpub-persona-field-error {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--red-text);
}

.cpub-persona-field-input--invalid { border-color: var(--red-border); }

.cpub-persona-field-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cpub-persona-field-choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
}

.cpub-persona-field-choice input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }

/* A form-group divider, not a document heading: an <h*> here would inject an
   unpredictable level into the surrounding page outline. */
.cpub-persona-field-heading {
  margin-top: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-default) solid var(--border2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
}

/* ─── Persona: completeness meter ─── */
.cpub-persona-meter {
  border: var(--border-width-default) solid var(--border);
  background: var(--surface);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.cpub-persona-meter-track {
  height: var(--cpub-persona-meter-height);
  background: var(--cpub-persona-meter-track);
  border: var(--border-width-default) solid var(--border2);
}

.cpub-persona-meter-fill {
  height: 100%;
  background: var(--cpub-persona-meter-fill);
  transition: width var(--transition-fast);
}

.cpub-persona-meter-text {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
}

.cpub-persona-meter-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: var(--leading-snug);
}

.cpub-persona-meter-skeleton {
  height: var(--cpub-persona-meter-height);
  background: var(--cpub-persona-meter-track);
  border: var(--border-width-default) solid var(--border2);
}

/* ─── Persona: data from removed fields ─── */
.cpub-persona-retired {
  border: var(--border-width-default) solid var(--cpub-persona-retired-border);
  background: var(--cpub-persona-retired-bg);
  padding: var(--space-4);
  margin-top: var(--space-6);
}

.cpub-persona-retired-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text);
}

.cpub-persona-retired-intro {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: var(--leading-snug);
}

.cpub-persona-retired-list { list-style: none; margin: 0; padding: 0; }

.cpub-persona-retired-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-top: var(--border-width-default) solid var(--cpub-persona-retired-border);
}

.cpub-persona-retired-body { min-width: 0; flex: 1; }

/* The raw stored key, shown verbatim: a removed question has no label left to
   resolve, and printing nothing would make the data invisible to the person
   whose data it is. */
.cpub-persona-retired-key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.cpub-persona-retired-value {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text);
  overflow-wrap: anywhere;
}

.cpub-persona-retired-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-dim);
}

/* ─── Persona: invitation banner ─── */
.cpub-persona-invite {
  max-width: var(--content-max-width, 1200px);
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-bg);
  border: var(--border-width-default) solid var(--accent-border);
}

.cpub-persona-invite-text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text);
}

.cpub-persona-invite-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.cpub-persona-invite-dismiss { min-width: 44px; justify-content: center; }

@media (max-width: 640px) {
  .cpub-persona-invite { align-items: stretch; }
  .cpub-persona-invite-actions { width: 100%; }
  .cpub-persona-invite-actions .cpub-btn:not(.cpub-persona-invite-dismiss) {
    flex: 1;
    justify-content: center;
  }
}

/* No print stylesheet exists in the monorepo, so carry our own: an optional
   invitation has no business on paper. */
@media print {
  .cpub-persona-invite { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERSONA AUDIENCE DASHBOARD (session 255)
   Tokens for /admin/persona-metrics, the operator audience dashboard.

   Canonical here rather than scoped in the page for the same reason the chip
   tokens above are: a fork theming its admin surfaces overrides tokens, not a
   page's scoped rules. Layout stays in the page; only the palette and the one
   sizing value that a fork would plausibly want to move live here.

   Every value is a var(). Nothing re-rounds a corner (--radius is 0px globally),
   borders go through --border-width-default, and no colour is written literally.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The explainer panel that sits above every number, telling the operator that
     an empty dashboard is a working dashboard. Accent-tinted rather than
     warning-tinted: suppression is the design, not a fault. */
  --cpub-audience-note-bg: var(--accent-bg);
  --cpub-audience-note-border: var(--accent-border);

  --cpub-audience-card-bg: var(--surface);
  --cpub-audience-card-border: var(--border);

  /* The bar is DECORATION. Its width is a share of the largest published count,
     and the count itself is always printed as text beside it, so colour is
     never the only encoding and a screen reader loses nothing by ignoring it
     (it carries aria-hidden). The track needs to stay visible against the card
     without competing with the fill. */
  --cpub-audience-bar-track-bg: var(--surface2);
  --cpub-audience-bar-fill-bg: var(--accent);
  --cpub-audience-bar-height: 8px;
}
}