/* Warmly Invited design system — B05 */
:root {
  /* Alpha palette: the beta is born green, not blue. */
  --accent: #2d6a4f;
  --accent-dark: #1f4d38;
  --accent-soft: #e8f1ea;
  --bg: #faf9f7;
  --surface: #ffffff;
  --ink: #26221e;
  --muted: #716a62;
  --faint: #a89f96;
  --line: #eae5df;

  /* Semantic state colors and their named surfaces. */
  --yes: #2b7349;
  --no: #b3423a;
  --no-dark: #8f2f2a;
  --maybe: #8f6323;
  --yes-tint: #e3f2e9;
  --no-tint: #f7e5e3;
  --maybe-tint: #f7eeda;
  --neutral-tint: #efece8;
  --warning: #8f6323;
  --warning-tint: #fff8e8;

  /* Contact channels are semantic too; no screen owns another blue/gold. */
  --channel-email: #3e6d93;
  --channel-email-tint: #edf5fb;
  --channel-email-line: #d8e4f0;
  --channel-text: #866226;
  --channel-text-tint: #fbf5e8;
  --channel-text-line: #e7d8ba;

  --radius: 10px;
  --radius-control: 8px;
  --shadow: 0 2px 10px rgba(40, 30, 20, 0.07);
  --shadow-lift: 0 8px 28px rgba(40, 30, 20, 0.14); /* toast and outbox surfaces */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif; /* invitation notes; donation footer/dialog brand+title are the mock-mandated host-chrome exception */
  --body-size: 16px;
  --body-leading: 1.45;
  --caption-size: 13px;

  /* The only three shared heading sizes. */
  --heading-1-size: 26px;
  --heading-2-size: 19px;
  --heading-3-size: 16px;
  --heading-leading: 1.2;

  /* Never-jump dimensions. Keep these stable while copy or state changes. */
  --slot-error-height: 20px;
  --slot-hint-height: 34px;
  --control-width-sm: 96px;
  --control-width-md: 148px;
  --control-width-lg: 190px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: var(--body-leading);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

/* Three heading sizes; use these classes or the matching semantic element. */
h1, .heading-1 {
  margin: 0;
  font-size: var(--heading-1-size);
  line-height: var(--heading-leading);
  letter-spacing: -0.02em;
}
h2, .heading-2 {
  margin: 0;
  font-size: var(--heading-2-size);
  line-height: var(--heading-leading);
  letter-spacing: -0.01em;
}
h3, .heading-3 {
  margin: 0;
  font-size: var(--heading-3-size);
  line-height: var(--heading-leading);
}
/* Inline invitation-card SVGs share this stylesheet's layout primitives. */
.invite-card-svg { display: block; }
.page-title { margin-bottom: 4px; }
.page-subtitle { margin: 0 0 26px; color: var(--muted); }

/* App chrome and controls carried forward from the alpha. */
.page-shell {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 30px 28px 60px;
}
.card-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-primary { background: var(--accent); color: var(--surface); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--surface); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--faint); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--ink); }
.btn:disabled { cursor: default; opacity: 0.45; }
.btn-sm { min-height: 44px; padding: 0 12px; font-size: 13px; }

.field, label.field { display: block; margin-bottom: 16px; }
.field-label, label.field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
}
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
textarea { min-height: 72px; resize: vertical; }
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

/* One chip primitive. Variants change semantics; modifiers change size only. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip-sm { min-width: 52px; height: 22px; padding: 0 8px; font-size: 11px; }
.chip-md { min-width: 58px; height: 24px; padding: 0 10px; font-size: 12px; }
.chip-lg { min-width: 72px; height: 32px; padding: 0 12px; font-size: 13px; }
.chip-yes { background: var(--yes-tint); color: var(--yes); }
.chip-no { background: var(--no-tint); color: var(--no); }
.chip-maybe { background: var(--maybe-tint); color: var(--maybe); }
.chip-neutral { background: var(--neutral-tint); color: var(--muted); }
.chip-email { border-color: var(--channel-email-line); background: var(--channel-email-tint); color: var(--channel-email); }
.chip-text { border-color: var(--channel-text-line); background: var(--channel-text-tint); color: var(--channel-text); }

/* One empty-state primitive. The copy must name the empty thing. */
.empty {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px;
  color: var(--muted);
  text-align: center;
}
/* Size modifiers preserve the shared empty structure while reserving known footprints. */
.empty-lg { min-height: 300px; }
.empty-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 18px;
}
.empty-title { color: var(--ink); font-weight: 700; }
.empty-copy { font-size: 13px; }

/* One treatment per action class: primary, secondary, and destructive. */
a.link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  text-underline-offset: 2px;
}
a.link-action { color: var(--accent); }
a.link-action:hover { color: var(--accent-dark); }
a.link-secondary { color: var(--muted); text-decoration: none; }
a.link-secondary:hover { color: var(--ink); text-decoration: underline; }
a.link-danger { color: var(--no); }
a.link-danger:hover { color: var(--no-dark); }

/* Never-jump helpers. Empty slots stay in flow and retain their footprint. */
.reserved-slot { display: block; }
.error-slot {
  display: block;
  min-height: var(--slot-error-height);
  margin: 5px 0 0;
  color: var(--no);
  font-size: 12px;
  line-height: var(--slot-error-height);
}
.hint-slot {
  display: block;
  min-height: var(--slot-hint-height);
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 17px;
}
.error-slot[data-empty="true"],
.hint-slot[data-empty="true"],
.reserved-slot:empty { visibility: hidden; }
/* KWB-207: a hint that sits between a field's label and its control. "label.field > span"
   (0,0,1,2) beats ".hint-slot" (0,0,1,0), so an in-label hint inherits the uppercase label
   treatment unless a rule at least as specific says otherwise. It is content-sized rather
   than carrying .hint-slot's reserve: this copy is static server text the island never
   rewrites or empties, so there is nothing to reserve against and the reserve would only
   push the control away from its own hint. */
.field-hint, label.field > span.field-hint {
  min-height: 0;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 17px;
  text-transform: none;
}
/* A sub-field block that belongs to an off switch keeps its whole box: turning a
   setting off must not move anything below it (B48 fixed footprint). */
.cr-dependent-body[data-off="true"] { visibility: hidden; }
.control-sm, .control-md, .control-lg { flex: 0 0 auto; }
.control-sm { flex-basis: var(--control-width-sm); width: var(--control-width-sm); }
.control-md { flex-basis: var(--control-width-md); width: var(--control-width-md); }
.control-lg { flex-basis: var(--control-width-lg); width: var(--control-width-lg); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.touch-target { min-width: 44px; min-height: 44px; }
.status-region {
  display: block;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: 12px;
  line-height: 20px;
}
.status-region.is-success { border-color: var(--yes); background: var(--yes-tint); color: var(--accent-dark); }
.status-region.is-error { border-color: var(--no); background: var(--no-tint); color: var(--no-dark); }
.status-region:empty { visibility: hidden; }
.status-message.is-success { color: var(--accent-dark); }
.status-message.is-error { color: var(--no-dark); }
.caption { color: var(--muted); font-size: var(--caption-size); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Host-only donation footer and coming-soon dialog (B49; binding mock). */
footer.product-footer {
  margin: 0;
  max-width: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 28px 24px 32px;
  color: var(--muted);
  font-size: 14px;
}
.product-footer .footer-inner {
  display: flex;
  max-width: 640px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.product-footer .footer-word { color: var(--muted); }
.product-footer .host-account-line {
  display: flex;
  flex: 0 0 100%;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.product-footer .host-account-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.product-footer .host-account-link {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 600;
}
.host-signout-form { margin: 0; }
.host-signout-btn {
  display: inline-flex;
  flex: 0 0 112px;
  width: 112px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent-dark);
  font: 600 14px var(--font);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.host-signout-btn:hover { background: var(--accent); color: var(--surface); }
.host-signout-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.product-footer .brand {
  color: var(--ink);
  font-family: var(--font-serif);
}
.donate-btn {
  display: inline-flex;
  flex: 0 0 128px;
  width: 128px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 0;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font: 600 14px var(--font);
  text-align: center;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.donate-btn:hover { background: var(--accent); color: var(--surface); }
.donate-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
dialog.donate-dialog {
  width: calc(100vw - 48px);
  max-width: 380px;
  margin: auto;
  padding: 32px 32px 28px;
  border: none;
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
dialog.donate-dialog::backdrop { background: rgba(38, 34, 30, 0.35); }
@media (prefers-reduced-motion: no-preference) {
  dialog.donate-dialog[open] { animation: donate-rise 180ms ease-out; }
  @keyframes donate-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
.dialog-kicker {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dialog-title {
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
}
.dialog-body { margin-bottom: 22px; color: var(--muted); font-size: 15px; }
.dialog-actions { display: flex; justify-content: flex-end; }
.dialog-close {
  width: 128px;
  min-height: 44px;
  padding: 9px 0;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--surface);
  font: 600 14px var(--font);
  text-align: center;
}
.dialog-close:hover { background: var(--accent-dark); }
.dialog-close:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
@media (max-width: 560px) {
  footer.product-footer { padding-right: 18px; padding-left: 18px; }
  .product-footer .footer-inner { align-items: flex-start; }
  .product-footer .host-account-line { justify-content: space-between; }
}

/* Dev showcase layout; it composes the same primitives future screens use. */
.token-showcase {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.token-showcase-intro { max-width: 620px; margin-bottom: 28px; }
.token-showcase-section { margin-top: 22px; }
.token-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.token-showcase-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.token-showcase-probe {
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.token-showcase-code {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--neutral-tint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* B17 create/edit screen. It composes B05 tokens and keeps every validation
   message in a reserved slot so typing never moves the controls underneath. */
.create-screen { max-width: 1180px; }
.create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
  gap: 24px;
}
.create-main { min-width: 0; }
.create-section { margin-bottom: 18px; }
.create-step {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 22px;
}
.create-step-number {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.create-step-heading {
  display: block;
  color: var(--ink);
  font-size: var(--heading-2-size);
  font-weight: 800;
  line-height: var(--heading-leading);
}
.create-step-subtitle { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.cr-required { color: var(--no); }
.cr-optional { color: var(--faint); font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.cr-when-note { margin: 0 0 8px; }
.cr-fields-three { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 12px; }
.cr-fields-three .field { min-width: 0; }
#event-description { scroll-margin-top: 96px; }
.cr-warning {
  min-height: var(--slot-hint-height);
  margin: -8px 0 4px;
  padding: 6px 10px;
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--warning-tint);
  color: var(--warning);
  font-size: 12px;
  line-height: 18px;
}
.cr-warning span { display: block; }
.cr-field-error { color: var(--no); }
.cr-field-error[data-empty="false"] { min-height: var(--slot-error-height); }
input.is-invalid, textarea.is-invalid { border-color: var(--no); }
.cr-setting-block { margin-bottom: 22px; }
.cr-setting-label { color: var(--ink); font-size: 14px; font-weight: 800; }
.cr-setting-copy { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.cr-setting-explanation { margin-top: 11px; color: var(--muted); font-size: 12px; }
.cr-advanced-settings { border-top: 1px solid var(--line); }
.cr-advanced-summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.cr-advanced-summary::-webkit-details-marker { display: none; }
.cr-advanced-summary::before {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(-45deg);
  transition: transform .12s ease;
}
.cr-advanced-settings[open] .cr-advanced-summary::before { transform: rotate(45deg); }
.cr-advanced-content { padding-bottom: 2px; }
.cr-visibility-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 11px; }
.cr-visibility-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px 9px;
  min-height: 96px;
  padding: 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.cr-visibility-card:hover, .cr-visibility-card.is-selected { border-color: var(--accent); }
.cr-visibility-card.is-selected { background: var(--accent-soft); }
.cr-visibility-card:disabled { cursor: not-allowed; opacity: .72; }
.cr-radio { width: 15px; height: 15px; margin-top: 2px; border: 2px solid var(--faint); border-radius: 50%; }
.cr-visibility-card.is-selected .cr-radio { border: 4px solid var(--accent); }
.cr-visibility-title { font-size: 13px; font-weight: 800; line-height: 1.25; }
.cr-visibility-copy { grid-column: 2; color: var(--muted); font-size: 12px; line-height: 1.4; }
.cr-visibility-lock { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.cr-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.cr-first-row { border-top: 0; padding-top: 0; }
.cr-setting-row > div:first-child { min-width: 0; }
.cr-sub-setting { display: grid; grid-template-columns: 1fr minmax(160px, 220px); align-items: center; gap: 14px; margin: -3px 0 2px; padding: 0 0 0 16px; border-left: 2px solid var(--accent-soft); }
.cr-switch {
  position: relative;
  width: 64px;
  height: 44px;
  flex: 0 0 64px;
  padding: 9px 4px;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  transition: background .12s ease;
}
.cr-switch.is-on { background: var(--accent); }
.cr-switch-knob { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(40, 30, 20, .22); transition: transform .12s ease; }
.cr-switch.is-on .cr-switch-knob { transform: translateX(30px); }
.cr-design-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cr-design-tile {
  min-width: 0;
  padding: 7px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.cr-design-tile:hover, .cr-design-tile.is-selected { border-color: var(--accent); }
.cr-design-tile.is-selected { background: var(--accent-soft); }
.cr-design-thumb { display: block; overflow: hidden; border-radius: 5px; }
.cr-design-thumb svg { width: 100%; height: auto; }
.cr-photo-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cr-design-thumb .cr-photo-thumb { display: block; width: 100%; aspect-ratio: 250 / 340; object-fit: cover; }
.cr-design-name { display: block; margin-top: 7px; font-size: 12px; font-weight: 800; }
.cr-design-mood { display: block; min-height: 32px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.cr-preview-column { min-width: 0; }
.cr-preview-sticky { position: sticky; top: 18px; }
.cr-preview-label { margin: 0 0 9px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.cr-preview { display: flex; justify-content: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.cr-preview svg { width: 100%; max-width: 250px; height: auto; }
.cr-preview-status { min-height: 28px; margin-top: 9px; }
.cr-preview-note { color: var(--faint); font-size: 12px; line-height: 1.4; text-align: center; }
/* KWB-148: let feedback grow down while the action buttons stay top-anchored. */
.cr-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; margin-top: 6px; }
.cr-action-feedback { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; min-width: 0; }
.cr-action-feedback .cr-field-error { min-width: 0; margin-top: 0; overflow-wrap: anywhere; }
.cr-action-feedback .cr-field-error[data-empty="false"] { margin-bottom: 10px; }
.cr-action-buttons { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.cr-save-status { min-width: 0; min-height: 40px; margin: 0; }
.cr-save-status.is-error { color: var(--no); }
.cr-card-templates { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cr-potluck-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(70px, 88px) auto 44px; align-items: center; gap: 8px; margin-bottom: 9px; }
.cr-potluck-name, .cr-potluck-qty { min-width: 0; }
.cr-potluck-need, .cr-potluck-stored { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cr-potluck-stored { min-width: 65px; font-variant-numeric: tabular-nums; }
.cr-potluck-remove { width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; }
.cr-potluck-remove:hover { color: var(--no); }
.cr-potluck-empty { min-height: 44px; padding: 11px 0; color: var(--muted); font-size: 13px; }
.cr-conflict { max-width: 680px; margin: 20px auto; }
.cr-conflict-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 24px 0; }
.cr-conflict-list dt { color: var(--muted); font-size: 12px; font-weight: 800; }
.cr-conflict-list dd { margin: 0; }
.cr-conflict-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.host-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.host-event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.host-event-card { display: grid; gap: 3px; color: var(--ink); text-decoration: none; }
.host-event-card:hover { border-color: var(--accent); }
.host-event-card strong { font-size: var(--heading-2-size); }
.host-event-card > span:not(.host-event-status) { color: var(--muted); font-size: 13px; }
.host-event-status { width: fit-content; margin-bottom: 4px; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 800; text-transform: capitalize; }
.event-placeholder-card { display: grid; gap: 4px; max-width: 560px; margin: 10px 0 18px; }
.event-placeholder-card span { color: var(--muted); font-size: 13px; }
@media (max-width: 920px) {
  .create-layout { grid-template-columns: 1fr; }
  .cr-preview-column { order: -1; }
  .cr-preview-sticky { position: static; }
  .cr-preview { max-width: 320px; margin: 0 auto; }
  .cr-preview-status, .cr-preview-note { max-width: 320px; margin-right: auto; margin-left: auto; text-align: center; }
  .cr-design-grid { grid-template-columns: repeat(5, minmax(92px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 620px) {
  .create-screen { padding-top: 22px; }
  .host-page-heading { flex-direction: column; }
  .host-event-grid { grid-template-columns: 1fr; }
  .card-panel { padding: 17px; }
  .cr-fields-three { grid-template-columns: 1fr; gap: 0; }
  .cr-visibility-options { grid-template-columns: 1fr; }
  .cr-sub-setting { grid-template-columns: 1fr; gap: 4px; padding-bottom: 10px; }
  .cr-potluck-row { grid-template-columns: minmax(0, 1fr) 70px 44px; }
  .cr-potluck-need { display: none; }
  .cr-potluck-stored { grid-column: 1 / 3; grid-row: 2; }
  .cr-potluck-remove { grid-column: 3; grid-row: 1 / 3; }
  .cr-actions { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cr-action-feedback { grid-template-columns: minmax(0, 1fr); }
  .cr-action-buttons { order: -1; justify-content: flex-end; }
}
@media (max-width: 620px) {
  .page-shell, .token-showcase { padding-right: 18px; padding-left: 18px; }
  .token-showcase-grid { grid-template-columns: 1fr; }
}


.host-page {
  max-width: min(1080px, 100%);
}
.host-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 24px;
  margin-bottom: 28px;
}
.host-page-heading {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.host-page-heading .page-title {
  margin: 0 0 6px;
  line-height: var(--heading-leading);
}
.host-page-heading .page-subtitle {
  margin: 0;
  line-height: 1.45;
}
.host-page-header > .btn {
  flex: 0 0 auto;
  min-width: var(--control-width-md);
  white-space: nowrap;
}
.host-event-list { display: grid; gap: 18px; }
.host-event-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  min-width: 0;
}
.host-event-card { width: 120px; max-width: 100%; overflow: hidden; }
.host-event-card .invite-card-svg,
.host-manage-card .invite-card-svg { width: 100%; height: auto; }
.host-event-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}
.host-event-title {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  max-width: 100%;
  color: var(--ink);
  font-size: var(--heading-2-size);
  font-weight: 700;
  line-height: var(--heading-leading);
  overflow-wrap: anywhere;
  text-decoration: none;
}
.host-event-title:hover { color: var(--accent); }
.host-event-when {
  min-height: 24px;
  margin: 6px 0 4px;
  color: var(--muted);
  font-size: var(--caption-size);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.host-event-status {
  min-height: 22px;
  margin: 0 0 8px;
  font-size: var(--caption-size);
  font-weight: 700;
  line-height: 1.45;
}
.host-event-status[data-state="sent"] { color: var(--yes); }
.host-event-status[data-state="unsent"] { color: var(--maybe); }
.host-past {
  margin-left: 6px;
  vertical-align: middle;
}
/* KWB-220: same grid as the sibling when/status lines, so a row that gains the marker
   keeps its neighbours where they were. */
.host-event-pending {
  min-height: 24px;
  margin: 0 0 6px;
  color: var(--accent);
  font-size: var(--caption-size);
  font-weight: 600;
  line-height: 1.45;
}
.host-event-pending-count { font-variant-numeric: tabular-nums; }
.host-tally-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-height: 24px;
  margin-bottom: 14px;
}
.host-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  align-items: center;
}
.host-manage-layout {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  min-width: 0;
  margin-top: 14px;
}
.host-manage-card { width: 230px; max-width: 100%; min-width: 0; }
.host-card-links {
  min-height: 44px;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--caption-size);
  text-align: center;
}
.host-cancel-trigger {
  min-height: 44px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--no);
  font: inherit;
  font-weight: 700;
  line-height: 26px;
  text-decoration: underline;
  text-underline-offset: 2px;
  vertical-align: middle;
  cursor: pointer;
}
.host-cancel-trigger:hover { color: var(--no-dark); }
.host-cancel-trigger:focus-visible { outline: 2px solid var(--no-dark); outline-offset: 3px; }
.host-cancel-dialog {
  width: calc(100vw - 36px);
  max-width: 520px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
.host-cancel-dialog::backdrop { background: rgba(38, 34, 30, 0.35); }
.host-cancel-dialog .field { margin-bottom: 16px; }
.host-cancel-dialog textarea { min-height: 128px; resize: vertical; }
.host-cancel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 44px;
  margin-top: 18px;
}
.host-cancel-submit {
  border-color: var(--no);
  background: var(--no);
  color: var(--surface);
}
.host-cancel-submit:hover { border-color: var(--no-dark); background: var(--no-dark); }
.host-cancel-submit:disabled { border-color: var(--muted); background: var(--muted); }
.host-cancel-status { margin-top: 14px; }
.host-cancelled-status { margin: 10px 0 14px; }
.host-cancel-warning { display: block; margin-top: 6px; color: var(--no); }
.host-manage-main { min-width: 0; }
.host-panel { margin-bottom: 18px; min-width: 0; }
.host-panel-heading { margin-bottom: 12px; }
.host-manage-title { overflow-wrap: anywhere; }
.host-manage-subtitle {
  min-height: 24px;
  margin: 5px 0 4px;
  color: var(--muted);
  font-size: var(--caption-size);
  overflow-wrap: anywhere;
}
.host-manage-description {
  min-height: 24px;
  margin: 4px 0 8px;
  color: var(--ink);
  font-size: var(--caption-size);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.host-manage-description-copy { white-space: pre-wrap; }
/* A long note used to push Guests & Send off a short phone. Clamped to four lines until the
   host asks for the rest; the max-height repeats the clamp for engines without line-clamp. */
.host-manage-description-copy[data-expanded="false"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  max-height: calc(4 * 1.45em);
  overflow: hidden;
}
/* Fixed width: the label swaps between Show more and Show less, and neither the control nor
   anything beside it may move when it does. */
.host-manage-description-toggle {
  display: block;
  width: 92px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.host-manage-description-toggle[hidden] { display: none; }
.host-manage-description-link { white-space: nowrap; }
.host-manage-description[data-state="set"] .host-manage-description-link {
  display: block;
  margin: 4px 0 0;
}
.host-delivery-line {
  min-height: 24px;
  margin: 2px 0 10px;
  font-size: 13px;
  font-weight: 700;
}
.host-delivery-line[data-state="sent"] { color: var(--yes); }
.host-delivery-line[data-state="unsent"] { color: var(--maybe); }
/* KWB-220: a callout in the panel's own vocabulary — one accent, the status-region border
   and tint. The success and failure tints are state, not a second brand colour. */
.host-pending-invites {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.host-pending-invites[data-state="sent"] { border-color: var(--yes); background: var(--yes-tint); }
.host-pending-invites[data-state="error"] { border-color: var(--no); background: var(--no-tint); }
/* KWB-233: a reserved slot for the undeliverable count, present and empty when there is none,
   so the notice keeps one height in every state. The count is an a.link (44px touch target),
   so the slot reserves 44px — which also holds the sentence on two lines at a 360px phone. */
.host-pending-invites-undeliverable {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 4px;
  color: var(--no-dark);
  font-size: var(--caption-size);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.host-pending-invites-undeliverable[data-empty="true"] { visibility: hidden; }
/* Two reserved lines. Every sentence this slot can hold fits inside two lines at a 360px
   phone (measured at the panel's 252px content width), so pending, sent, and error are the
   same height and nothing below the notice moves when the state changes. */
.host-pending-invites-copy {
  min-height: 2.9em;
  margin: 0 0 4px;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* A count going 9 → 10 must not move the words after it. */
.host-pending-invites-count { font-variant-numeric: tabular-nums; font-weight: 700; }
/* The receipt gets its own reserved slot rather than growing the copy box: present and
   empty while nothing has been sent, filled after a send, identical height either way. */
.host-pending-invites-receipt {
  min-height: 2.9em;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--caption-size);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.host-pending-invites-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}
/* Measured in Chrome at 14px/700: "Send invitations" needs 150px of button, 2px more than
   control-md offers, so the slot is control-lg and every label is held on one line. */
.host-pending-invites .btn { white-space: nowrap; }
.host-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  min-width: 0;
  margin: 12px 0 14px;
}
.host-stat {
  flex: 1 1 82px;
  min-width: 0;
}
.host-stat-value {
  min-height: 32px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.host-stat-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.host-deadline,
.host-visibility {
  min-height: 20px;
  margin: 4px 0;
  color: var(--muted);
  font-size: var(--caption-size);
  overflow-wrap: anywhere;
}
.host-deadline { color: var(--maybe); font-weight: 600; }
.host-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 12px;
}
.host-filter {
  font-size: 12.5px;
  text-decoration: none;
}
.host-filter:hover,
.host-filter[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.host-guest-list { min-width: 0; }
.host-guest-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  align-items: start;
  gap: 12px;
  min-width: 0;
  min-height: 76px;
  padding: 11px 2px;
  border-top: 1px solid var(--line);
}
.host-guest-row:first-child { border-top: none; }
.host-guest-main { min-width: 0; }
.host-guest-name { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.host-guest-contact {
  min-height: 20px;
  margin-top: 1px;
  color: var(--faint);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.host-guest-note {
  min-height: 20px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  overflow-wrap: anywhere;
}
.host-guest-opened {
  display: flex;
  min-height: 20px;
  align-items: center;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
/* KWB-269: the guest has been to the invitation — said in the delivery line's own register,
   so the host reads it rather than skims past it. The word carries the meaning; the weight
   is emphasis on top of it. */
.host-guest-opened[data-state="opened"] { color: var(--ink); font-weight: 700; }
.host-guest-opened[data-empty="true"] { visibility: hidden; }
/* KWB-270: the guest asked for their link. Context under the opened line, in the same reserved
   box, and deliberately without its emphasis: it is a hint about delivery, not a milestone. */
.host-guest-asked {
  display: flex;
  min-height: 20px;
  align-items: center;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.host-guest-asked[data-empty="true"] { visibility: hidden; }
.host-guest-delivery {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 20px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.host-guest-delivery-label { color: var(--ink); font-weight: 800; }
.host-guest-delivery[data-state="suppressed"] .host-guest-delivery-label,
.host-guest-delivery[data-state="unsubscribed"] .host-guest-delivery-label { color: var(--muted); }
.host-guest-delivery[data-state="undeliverable"] .host-guest-delivery-label,
.host-guest-delivery[data-state="unreachable"] .host-guest-delivery-label { color: var(--no-dark); }
.host-guest-delivery-detail { overflow-wrap: anywhere; }
.host-guest-side {
  display: flex;
  min-width: 92px;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.host-guest-side .chip { max-width: 100%; }
.host-guest-empty { min-height: 150px; }
.host-potluck-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, auto);
  align-items: start;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 9px 2px;
  border-top: 1px solid var(--line);
}
.host-potluck-row:first-of-type { border-top: none; }
.host-potluck-label { font-weight: 600; overflow-wrap: anywhere; }
.host-potluck-names {
  min-height: 20px;
  margin-top: 3px;
  color: var(--faint);
  font-size: var(--caption-size);
  overflow-wrap: anywhere;
}
.host-potluck-count {
  min-width: 100px;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.host-setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.host-setting-row:first-of-type { border-top: none; }
.host-setting-copy { min-width: 0; }
.host-setting-label { font-weight: 700; }
.host-setting-detail {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.host-control-slot {
  display: inline-flex;
  width: var(--control-width-lg);
  min-width: var(--control-width-lg);
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}
.host-switch {
  display: inline-flex;
  width: 100%;
  min-width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.host-switch[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.host-switch:disabled { cursor: wait; opacity: .65; }
.host-switch-track {
  display: inline-flex;
  width: 34px;
  height: 20px;
  flex: 0 0 34px;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--faint);
}
.host-switch[aria-checked="true"] .host-switch-track { background: var(--accent); }
.host-switch-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); transform: translateX(0); transition: transform 160ms ease; }
.host-switch[aria-checked="true"] .host-switch-thumb { transform: translateX(14px); }
.host-switch-label { width: 32px; text-align: center; }
.host-switch-status { width: 100%; height: 20px; min-height: 20px; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.host-switch-status[data-empty="true"] { visibility: hidden; }
.host-switch-status[data-error="true"] { color: var(--no); }
/* KWB-223. The three-state RSVP-notification control stacks its copy above its segments:
   three 104px segments do not fit the 190px host-control-slot the two-state switches use. */
.host-setting-row-stacked { flex-direction: column; align-items: stretch; }
.host-rsvp-notify-segmented { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; }
.host-rsvp-notify-segment {
  flex: 0 0 104px;
  width: 104px;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
}
.host-rsvp-notify-segment[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.host-rsvp-notify-segment:disabled { cursor: wait; opacity: .65; }
.host-rsvp-notify-segment:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The explanatory sentence changes length with the state, and the longest of the six wraps to
   three lines on a ~320-360px column. Reserved at 3 × line-height so pressing a segment cannot
   shove the page — this min-height is the layout-stability guarantee, not decoration. */
.host-rsvp-notify-status { min-height: 60px; line-height: 20px; }
/* The account page is one panel wide; the switch sits in the same reserved slot as the
   event-settings switches so On and Off cannot move anything. */
.host-account-email { color: var(--muted); overflow-wrap: anywhere; }
.host-empty {
  min-height: 180px;
  margin-bottom: 18px;
}
.broadcast-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 14px;
}
.broadcast-form-grid .field { min-width: 0; }
/* KWB-249: a <fieldset> carries the group semantics the five checkboxes need, but arrives
   with browser chrome (border, padding, an intrinsic min-width that breaks grid columns).
   Reset it to nothing and dress the <legend> like any other field label. */
.broadcast-audience-field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.broadcast-audience-field legend {
  display: block;
  padding: 0;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.broadcast-audience-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
/* A fixed row height and a fixed count slot: ticking a box reflows nothing, and 9 -> 10
   never moves the label beside it. */
.broadcast-audience-option { min-height: 32px; }
.broadcast-audience-check { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.broadcast-audience-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; }
.broadcast-audience-count {
  flex: 0 0 auto;
  min-width: 3ch;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* The live recipient line exists at every state, including 0 recipients. */
.broadcast-audience-total {
  min-height: 22px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}
/* Both nouns are stacked in one grid cell so the slot is exactly as wide as "guests" and
   "guest" ↔ "guests" cannot move the text after it. Visibility, never display. */
.broadcast-audience-noun { display: inline-grid; }
.broadcast-audience-noun > span { grid-area: 1 / 1; }
.broadcast-audience-noun[data-one="true"] > .broadcast-audience-noun-many,
.broadcast-audience-noun[data-one="false"] > .broadcast-audience-noun-one { visibility: hidden; }
/* Space reserved when nothing is undeliverable — visibility, never display, so the line
   cannot change width when the aside appears. Same trick as .send-undeliverable. */
.broadcast-audience-undeliverable[data-empty="true"] { visibility: hidden; }
.broadcast-message-field textarea { height: 72px; min-height: 72px; border-radius: var(--radius-control); }
.broadcast-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 54px; }
.broadcast-actions .hint-slot { flex: 1 1 300px; margin: 0; }
.broadcast-status { min-height: 40px; margin-top: 4px; }
.broadcast-status.is-error { color: var(--no); }
.broadcast-preview { min-height: 220px; margin-top: 12px; padding: 14px; border-top: 1px solid var(--line); border-radius: var(--radius-control); background: var(--bg); }
/* KWB-136: operator's explicit empty-Blast collapse; preserve hidden/display:none so dead space is not reserved. */
.broadcast-preview[hidden], .broadcast-history[hidden] { display: none; }
.broadcast-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.broadcast-preview-heading h3 { margin: 0; }
.broadcast-preview-summary { min-height: 20px; margin: 6px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.broadcast-recipient-list { min-height: 72px; max-height: 180px; overflow: auto; margin: 8px 0; padding: 0; list-style: none; }
.broadcast-recipient-row { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 0; border-top: 1px solid var(--line); }
.broadcast-recipient-row:first-child { border-top: 0; }
.broadcast-recipient-name { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.broadcast-recipient-channel { flex: 0 1 auto; margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.broadcast-preview-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.broadcast-history { min-height: 44px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.45; }
/* KWB-253: the blast record. The list keeps one row's height at zero blasts so the panel
   below it does not move when the host's first blast lands. */
.broadcast-recent { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.broadcast-recent h3 { margin: 0 0 8px; }
.broadcast-recent-list { min-height: 64px; margin: 0; padding: 0; list-style: none; }
.broadcast-recent-row { min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); }
.broadcast-recent-row:first-child { border-top: 0; }
.broadcast-recent-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; min-height: 20px; }
.broadcast-recent-audience { font-weight: 700; }
.broadcast-recent-meta { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.broadcast-recent-excerpt { overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 20px; min-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.broadcast-recent-empty { display: flex; align-items: center; min-height: 56px; color: var(--muted); font-size: 13px; }
.broadcast-recent-more { min-height: 18px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 18px; }
.broadcast-recent-more[data-empty="true"] { visibility: hidden; }
@media (max-width: 760px) {
  .host-manage-layout { grid-template-columns: minmax(0, 1fr); }
  .host-manage-card { width: 230px; }
}
@media (max-width: 530px) {
  .host-page { padding-right: 18px; padding-left: 18px; }
  .host-event-row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .host-event-card { width: 96px; }
  .host-stat-grid { gap: 8px; }
  .host-stat { flex-basis: calc(50% - 8px); }
  .host-stat-value { font-size: 22px; }
  .host-guest-row { grid-template-columns: minmax(0, 1fr) minmax(84px, auto); gap: 8px; }
  .host-guest-side { min-width: 84px; }
  .host-potluck-row { grid-template-columns: minmax(0, 1fr) minmax(88px, auto); gap: 8px; }
  .host-potluck-count { min-width: 88px; }
  .host-control-slot { width: min(var(--control-width-lg), 100%); min-width: min(var(--control-width-lg), 100%); }
  /* KWB-253: narrow enough that the time would squeeze the audience label — let it wrap
     onto its own line instead; the row keeps its reserved height either way. */
  .broadcast-recent-meta { white-space: normal; }
}


.outbox-page { max-width: min(1080px, 100%); }
.outbox-nav { min-height: 44px; margin-bottom: 12px; }
.outbox-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.outbox-page-head > div { min-width: 0; }
.outbox-page-head .page-subtitle { margin-bottom: 0; }
.outbox-private-note { padding-top: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.outbox-tabs { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; margin-bottom: 12px; }
.outbox-tab {
  display: inline-flex;
  width: var(--control-width-md);
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.outbox-tab:hover, .outbox-tab[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.outbox-panel { min-width: 0; padding: 0; overflow: hidden; }
.outbox-email-layout, .outbox-email-list, .outbox-email-detail { min-height: 560px; }
.outbox-email-list { min-width: 0; }
.outbox-email-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.05fr) minmax(200px, 1.55fr) minmax(190px, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 94px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
.outbox-email-row:hover { background: #f8faf8; }
.outbox-email-sender, .outbox-email-subject, .outbox-recipient { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.outbox-email-sender strong, .outbox-email-subject strong, .outbox-recipient strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.outbox-email-to, .outbox-recipient-address { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; }
.outbox-email-subject strong { font-size: 14px; }
.outbox-email-badges, .outbox-detail-badges, .outbox-message-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.outbox-email-record { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.outbox-email-time, .outbox-detail-time, .outbox-message-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.outbox-email-status-copy, .outbox-status-copy { color: var(--muted); font-size: 12px; line-height: 1.35; }
.outbox-email-status-copy { flex-basis: 100%; text-align: right; }
.outbox-kind-chip { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.outbox-status-queued, .outbox-status-sending, .outbox-status-deferred { color: var(--maybe); }
.outbox-status-sent, .outbox-status-delivered { color: var(--yes); }
.outbox-status-bounced, .outbox-status-complained, .outbox-status-failed { color: var(--no-dark); }
.outbox-status-suppressed, .outbox-status-cancelled, .outbox-status-unknown { color: var(--muted); }
.outbox-email-detail { max-width: 760px; margin: 0 auto; padding: 22px 28px 28px; }
.outbox-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.outbox-detail-top .link { flex: 0 0 auto; }
.outbox-detail-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; color: var(--muted); font-size: 12px; text-align: right; }
.outbox-mail-head { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 3px 10px; margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.outbox-mail-head strong, .outbox-mail-head .outbox-recipient-name { color: var(--ink); }
.outbox-mail-label { color: var(--faint); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.outbox-mail-subject { margin-bottom: 12px; overflow-wrap: anywhere; }
.outbox-mail-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 15px; }
.outbox-mail-body { padding-bottom: 18px; color: var(--muted); font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.outbox-card-preview { width: 250px; max-width: 100%; margin: 2px auto 18px; }
.outbox-honest-footer { padding-top: 15px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11.5px; text-align: center; }

/* The phone frame deliberately keeps the alpha's preview silhouette. */
.outbox-text-frame { width: min(440px, 100%); min-height: 560px; margin: 26px auto; border: 8px solid #292725; border-radius: 35px; background: #f6f5f4; box-shadow: var(--shadow-lift); overflow: hidden; }
.outbox-text-notch { width: 112px; height: 22px; margin: 0 auto -22px; position: relative; z-index: 2; border-radius: 0 0 14px 14px; background: #292725; }
.outbox-text-bar { display: flex; height: 63px; align-items: center; justify-content: space-between; padding: 28px 18px 9px; border-bottom: 1px solid #dfddda; background: rgba(255, 255, 255, .75); color: #282624; font-size: 13px; }
.outbox-text-bar span { color: #4b83c7; font-size: 22px; line-height: 1; }
.outbox-text-thread { display: flex; min-height: 490px; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 22px 16px 28px; }
.outbox-text-message { align-self: flex-start; max-width: 96%; }
.outbox-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 5px 9px; color: #8b8884; font-size: 10px; }
.outbox-message-meta strong { color: #595754; }
.outbox-message-to { max-width: 100%; overflow-wrap: anywhere; color: #595754; }
.outbox-message-badges .chip { font-size: 10px; }
.outbox-message-status-copy { flex-basis: 100%; margin-left: 9px; color: #716a62; line-height: 1.35; }
.outbox-text-bubble { padding: 10px 13px; border-radius: 18px 18px 18px 5px; background: #e4e3e1; color: #2e2c29; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.outbox-text-empty { display: flex; min-height: 560px; align-items: center; }
@media (max-width: 760px) {
  .outbox-page-head { flex-direction: column; gap: 4px; }
  .outbox-private-note { padding-top: 0; }
  .outbox-email-row { grid-template-columns: minmax(0, 1fr) minmax(170px, .9fr); gap: 8px 12px; }
  .outbox-email-sender { grid-column: 1 / -1; }
  .outbox-email-record { justify-content: flex-start; }
}
@media (max-width: 530px) {
  .outbox-page { padding-right: 18px; padding-left: 18px; }
  .outbox-email-row { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 14px 16px; }
  .outbox-email-sender, .outbox-email-subject, .outbox-email-record { grid-column: auto; }
  .outbox-email-record { justify-content: flex-start; }
  .outbox-email-time { white-space: normal; }
  .outbox-email-detail { padding-right: 18px; padding-left: 18px; }
  .outbox-detail-top { flex-direction: column; }
  .outbox-detail-meta { align-items: flex-start; text-align: left; }
}