:root {
  /* Tokens follow design-system.md (light palette): warm neutrals, single
     Twenty-blue accent, the chip palette carries the color. */
  --page: #FBFBFB;          /* page background (warm off-white) */
  --bg: #FFFFFF;            /* surface: cards, table, topbar, inputs */
  --bg-soft: #F8F9FB;       /* hover / inset tint */
  --text: #1A1A20;          /* ink */
  --text-muted: #7C7C86;    /* muted */
  --faint: #A8A8B0;         /* faint (dashes, placeholders) */
  --border: #EAEAEC;        /* hairline */
  --border-soft: #F2F2F3;   /* inner cell line */
  --accent: #1961ED;        /* Twenty-blue */
  --accent-hover: #134FC9;  /* accent, ~15% darker, for button hover */
  --accent-soft: #E9F0FE;   /* accent background tint */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* topbar */
.topbar {
  display: flex; align-items: center;
  height: 56px; padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand {
  font-weight: 600; font-size: 15px; color: var(--text);
  letter-spacing: -0.01em; margin-right: 32px;
}
.topbar .brand:hover { text-decoration: none; }
.topnav { display: flex; align-items: center; gap: 4px; flex: 1; }
.navlink {
  display: inline-flex; align-items: center; gap: 6px;
  height: 56px; padding: 0 12px;
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.navlink:hover { color: var(--text); text-decoration: none; }
.navlink.active { color: var(--text); border-bottom-color: var(--accent); }
.navlink svg { width: 14px; height: 14px; opacity: 0.85; }

/* main wrapper */
main { padding: 24px 24px 64px; max-width: 1280px; margin: 0 auto; }

/* page header */
.page-header {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 20px;
  flex-wrap: wrap;
}
.page-header h1 {
  margin: 0; font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--text);
}
.page-subtitle {
  color: var(--text-muted); font-size: 13px;
  border-left: 1px solid var(--border); padding-left: 12px;
}
.page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* search input */
.search-input {
  position: relative; display: inline-flex; align-items: center;
}
.search-input svg {
  position: absolute; left: 10px; width: 14px; height: 14px;
  color: var(--text-muted); pointer-events: none;
}
.search-input input {
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px;
  background: var(--bg);
  color: var(--text);
  width: 240px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-input input::placeholder { color: var(--text-muted); }

/* buttons */
.button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.button svg { width: 14px; height: 14px; }
.button-primary {
  background: var(--accent); color: white;
  border-color: var(--accent);
}
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.button-secondary {
  background: var(--bg); color: var(--text); border-color: var(--border);
}
.button-secondary:hover { background: var(--bg-soft); }
/* destructive action recedes: neutral at rest (reads like secondary), the
   danger color appears only on hover/focus, right before the click. */
.button-danger {
  background: var(--bg); color: var(--text); border-color: var(--border);
}
.button-danger:hover, .button-danger:focus-visible {
  background: #FCF1F1; color: #D14343; border-color: #E7B7B7;
}
.button-disabled {
  background: var(--bg-soft); color: var(--text-muted);
  border-color: var(--border); cursor: not-allowed;
  pointer-events: none;
}

/* detail-page action buttons (Edit / Delete in the header) */
.detail-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.detail-actions form { display: inline; margin: 0; padding: 0; }

/* tables (dense, single-line) */
.data-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
.data-table thead th {
  background: var(--bg-soft);
  text-align: left;
  padding: 10px 12px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 320px;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--bg-soft); }
.data-table .cell-avatar { width: 32px; padding-right: 0; }
.data-table .cell-name a { color: var(--text); font-weight: 500; }
.data-table .cell-name a:hover { color: var(--accent); }
.data-table .cell-email { color: var(--text-muted); }
.data-table .cell-empty {
  text-align: center; color: var(--text-muted);
  padding: 32px 12px; font-style: italic;
}

/* avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 10px; font-weight: 600;
  flex-shrink: 0;
}
/* Avatar initials cycle the design-system chip palette (blue/green/orange/
   red/purple) plus three harmonizing soft tints. No indigo (it would collide
   with the Twenty-blue accent). */
.avatar-tint-1 { background: #DCE8FB; color: #1D5BC4; } /* blue */
.avatar-tint-2 { background: #DBF2E3; color: #1A7A47; } /* green */
.avatar-tint-3 { background: #FCEAD9; color: #9A5414; } /* orange */
.avatar-tint-4 { background: #FBE0E0; color: #B23B3B; } /* red */
.avatar-tint-5 { background: #ECE4F7; color: #6B3FA0; } /* purple */
.avatar-tint-6 { background: #D7EEF4; color: #1D6E86; } /* teal */
.avatar-tint-7 { background: #FBE8F1; color: #A83A6F; } /* pink */
.avatar-tint-8 { background: #E7E9EC; color: #4A4A52; } /* slate */

/* relation chip (design-system): a related entity (e.g. company) as a neutral
   rounded-rect with a small colored logo square (its initial) + the name.
   Twenty's signature chip identity. */
.relation-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; vertical-align: middle;
  padding: 2px 8px 2px 3px; border-radius: 6px;
  background: #F1F1F3; color: #3A3A42; border: 1px solid #E6E6E9;
  font-size: 12.5px; font-weight: 500; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.relation-chip:hover { text-decoration: none; background: #ECECEE; border-color: #D7D7DB; }
/* keep the chip's neutral text when it sits in a .detail-sub line, whose
   generic link-hover rule would otherwise repaint it accent-blue. */
.detail-title .detail-sub a.relation-chip:hover { color: #3A3A42; }
.relation-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;
  font-size: 9px; font-weight: 700; color: #fff;
}
.relation-logo.brand-1 { background: #1961ED; }
.relation-logo.brand-2 { background: #1A7A47; }
.relation-logo.brand-3 { background: #B5651D; }
.relation-logo.brand-4 { background: #B23B3B; }
.relation-logo.brand-5 { background: #6B3FA0; }
.relation-logo.brand-6 { background: #1D6E86; }

/* pills (source tags) */
.pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; line-height: 1.5;
}
.pill-source-referral { background: #DCE8FB; color: #1D5BC4; } /* blue */
.pill-source-customer { background: #DBF2E3; color: #1A7A47; } /* green */
.pill-source-inbound  { background: #FCEAD9; color: #9A5414; } /* orange */
.pill-source-manual   { background: #EEEEF0; color: #56565E; } /* neutral */

/* #145 login-access (auth_role) status pills. admin = elevated (purple),
   user = has access (blue), none = no access (neutral). Reuse the existing
   palette pairs so contrast matches the rest of the chip system. */
.pill-role-admin { background: #ECE4F7; color: #6B3FA0; } /* purple */
.pill-role-user  { background: #DCE8FB; color: #1D5BC4; } /* blue */
.pill-role-none  { background: #EEEEF0; color: #56565E; } /* neutral */

/* #103 merge-field reference chips on the compose screen. Soft neutral chips
   (Inter, NOT mono — a token is a field name, design-system §Chips); the token
   text reads as a labelled reference the author can copy. */
.merge-fields {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0 20px;
}
.merge-fields-label { color: var(--text-muted); font-size: 13px; }
/* #112: the "Event:" group sub-label before the event-tagged chip set. A hair
   stronger than the row label, with a little left breathing room from the
   compliance chip it follows. */
.merge-fields-sublabel { margin-left: 6px; font-weight: 600; }
/* #110: chips are now <button> (click-to-insert at the caret). Strip native
   button chrome but keep the PR1 soft Twenty-blue chip identity; .pill owns
   the sizing/shape so we only inherit the font family and add the cursor. */
.merge-field-chip {
  background: #E9F0FE; color: #1961ED;
  border: 0; font-family: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.merge-field-chip:hover { background: #DCE8FB; }
.merge-field-chip:focus-visible { outline: 2px solid #1961ED; outline-offset: 1px; }
.merge-fields-help {
  flex-basis: 100%; color: var(--text-muted); font-size: 12px; margin-top: 2px;
}

/* #110 compose/save-time merge-lint panel. Inter throughout — the {{field}}
   tokens are author field names, NOT IDs, so they are not mono (CLAUDE.md mono
   rule). Colors from design-system.md: warn #C8860A, error #D14343. */
.merge-lint { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.merge-lint-item {
  border: 1px solid; border-radius: 8px; padding: 10px 12px; font-size: 13px;
}
.merge-lint-warn  { background: #FDF6EA; border-color: #EAD6A6; color: #6B5212; }
.merge-lint-block { background: #FCF1F1; border-color: #E7B7B7; color: #8A2F2F; }
.merge-lint-head { display: block; font-weight: 600; margin-bottom: 4px; }
.merge-lint-warn  .merge-lint-head { color: #C8860A; }
.merge-lint-block .merge-lint-head { color: #D14343; }
.merge-lint-item p  { margin: 0 0 6px; }
.merge-lint-item ul { margin: 0; padding-left: 18px; }
.merge-lint-item li { margin: 2px 0; }
.merge-lint-token {
  font-weight: 600;                 /* Inter, NOT mono */
  background: rgba(0, 0, 0, 0.04); padding: 0 4px; border-radius: 4px;
}
/* slice 3: compact confirm-panel notice (informational, not a hard gate). */
.merge-lint-confirm {
  font-size: 13px; color: #6B5212; background: #FDF6EA;
  border: 1px solid #EAD6A6; border-radius: 6px; padding: 8px 10px; margin: 4px 0;
}
.merge-lint-confirm-block {
  color: #8A2F2F; background: #FCF1F1; border-color: #E7B7B7;
}

/* #43 event public-visibility pills */
.pill-draft     { background: #EEEEF0; color: #56565E; }
.pill-published { background: #DBF2E3; color: #1A7A47; }

/* send-status pills (collection -> email send) */
.pill-status-draft   { background: #EEEEF0; color: #56565E; }
.pill-status-sending { background: #FCEAD9; color: #9A5414; }
.pill-status-sent    { background: #DBF2E3; color: #1A7A47; }
.pill-status-failed  { background: #FBE0E0; color: #B23B3B; }

/* per-recipient delivery-outcome pills (derived from ses_events). Mirror
   the send-status palette: greens = good, reds = bounce/complaint/failed,
   amber = soft/in-flight/unknown, grey = pending/suppressed. */
.pill-outcome-delivered  { background: #DBF2E3; color: #1A7A47; } /* green */
.pill-outcome-sent       { background: #DBF2E3; color: #1A7A47; }
.pill-outcome-bounced    { background: #FBE0E0; color: #B23B3B; } /* red */
.pill-outcome-complaint  { background: #ECE4F7; color: #6B3FA0; } /* purple (distinct from bounce) */
.pill-outcome-failed     { background: #FBE0E0; color: #B23B3B; }
.pill-outcome-soft       { background: #FCEAD9; color: #9A5414; } /* orange */
.pill-outcome-unknown    { background: #FCEAD9; color: #9A5414; }
.pill-outcome-suppressed { background: #EEEEF0; color: #56565E; } /* neutral */
.pill-outcome-pending    { background: #EEEEF0; color: #56565E; }

/* event invitee-roster pills (#41). RSVP funnel: green=accepted,
   amber=tentative, red=declined, grey=no-response. Invited + attended are
   accent/green affirmatives; the not-yet states recede to a muted dash. */
.pill-rsvp-accepted   { background: #DBF2E3; color: #1A7A47; } /* green */
.pill-rsvp-tentative  { background: #FCEAD9; color: #9A5414; } /* orange */
.pill-rsvp-declined   { background: #FBE0E0; color: #B23B3B; } /* red */
.pill-rsvp-none       { background: #EEEEF0; color: #56565E; } /* neutral */
.pill-invited         { background: #E9F0FE; color: #1961ED; } /* accent family = "current" */
.pill-current         { background: #E9F0FE; color: #1961ED; } /* "current/now" = accent */
.pill-attended        { background: #DBF2E3; color: #1A7A47; }
.roster-none          { color: var(--faint, #A8A8B0); }

/* roster rollup summary line: small inline funnel counts under the heading */
.roster-rollup { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.roster-rollup .pill { font-weight: 500; }
/* compact per-row RSVP setter in the roster actions column */
.roster-rsvp-set { display: inline-flex; gap: 4px; align-items: center; }
/* Compact per-row RSVP editor: a narrow auto-submitting <select>. The funnel
   state itself is shown by the read-only RSVP column pill; this is just the
   (small) editor, so it doesn't repeat the three options inline. */
.roster-rsvp-set select {
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 12px; color: var(--text); background: var(--bg);
  cursor: pointer;
}
.roster-rsvp-set select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* right-aligned numeric column (counts) — Inter tabular-nums, not mono */
.cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-when { color: var(--text-muted); font-size: 13px; }
/* a count that should draw the eye when non-zero (bounces, complaints) */
.cell-alert { color: #B91C1C; font-weight: 600; }

/* ID-like cell (tracking numbers, slugs, ids) — Geist Mono per the
   design system's reserved mono role; never used for names/emails. */
.cell-mono {
  font-family: ui-monospace, 'Geist Mono', SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--text-muted);
}

/* inline monospace run (an ID/slug embedded in proportional prose) — the
   reserved mono role, without the table-cell color/size of .cell-mono. */
.mono { font-family: ui-monospace, 'Geist Mono', SFMono-Regular, Menlo, monospace; }

/* monospace text input — mirrors .cell-mono for editing ID-like attrs
   (tracking numbers, tokens) per the design system's mono allowance. */
.input-mono {
  font-family: ui-monospace, 'Geist Mono', SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* raw message-source preview (HTML/text body) — technical output, so
   monospace is in-bounds per the design system's mono allowance. */
.code-block {
  font-family: ui-monospace, 'Geist Mono', SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.5;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}

/* inline icon (e.g. building next to company name) */
.cell-with-icon { display: inline-flex; align-items: center; gap: 6px; }
.cell-with-icon svg { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }

/* row-action buttons (HTMX-driven): edit pencil + delete x */
.cell-row-actions { width: 56px; padding-right: 8px; text-align: right; white-space: nowrap; }
.cell-row-actions form { display: inline; margin: 0; padding: 0; }
.cell-row-actions .row-edit-pencil { margin-right: 2px; }
.row-delete-x, .row-edit-pencil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-muted); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.row-edit-pencil svg { width: 14px; height: 14px; stroke-width: 2; }
.row-delete-x:hover {
  background: #FEF2F2; color: #B91C1C; border-color: #FECACA;
}
.row-edit-pencil:hover {
  background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE;
}
.row-delete-x.button-disabled {
  cursor: not-allowed; pointer-events: none; opacity: 0.4;
}

/* utility */
.muted { color: var(--text-muted); font-size: 13px; }
.spacer { flex: 1; }
.empty-state { padding: 48px 24px; text-align: center; color: var(--text-muted); }

/* HTMX modal overlay (slice 7). The shell server writes its content
   into #modal-root via hx-target. Empty #modal-root means no modal.
   Cancel buttons clear #modal-root via plain JS; backdrop click does
   the same. Successful submit returns HX-Redirect so HTMX navigates
   to the new entity's detail page. */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
  z-index: 200;
}
.modal-dialog {
  background: var(--bg);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.06);
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.modal-dialog .form-card {
  border: none; border-radius: 0;
  max-width: none; padding: 24px;
}

/* HTMX in-flight indicator: thin progress bar under the topbar.
   HTMX adds the htmx-request class to body while a request is in
   flight; targeting #indicator off body.htmx-request lets a single
   layout-level element react to any request without per-trigger
   hx-indicator wiring. */
#indicator {
  position: fixed; top: 56px; left: 0; right: 0;
  height: 2px; background: var(--accent);
  opacity: 0;
  transform-origin: left;
  transform: scaleX(0);
  transition: opacity 0.2s ease, transform 0.4s ease;
  z-index: 100;
  pointer-events: none;
}
body.htmx-request #indicator {
  opacity: 1;
  transform: scaleX(0.7);
}

/* forms */
.form-card {
  max-width: 520px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.form-card h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.form-card .form-help { color: var(--text-muted); font-size: 13px; margin: 0 0 20px; }
.form-card label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 500; color: var(--text);
}
.form-card input, .form-card textarea {
  display: block; width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 14px;
  background: var(--bg); color: var(--text);
  margin-bottom: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-card textarea { resize: vertical; min-height: 80px; }
.form-card input:focus, .form-card textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-card .form-actions { display: flex; gap: 8px; margin-top: 8px; }
/* de-emphasized field (e.g. auto-generated URL slug) — secondary, not the focus */
.form-card label.label-muted { color: var(--text-muted); font-weight: normal; }
.form-card .field-hint {
  display: block; color: var(--text-muted); font-size: 11px;
  margin: -10px 0 14px;
}
/* inline checkbox + label (e.g. the "major change" RSVP-reset toggle) */
.form-card label.label-check {
  display: flex; align-items: center; gap: 8px;
  font-weight: normal; margin: 4px 0;
}
.form-card label.label-check input {
  display: inline-block; width: auto; margin: 0;
}

/* #101 compose: widen just this form-card so editor + live preview fit
   side by side. The rest of the form (subject/from/plain-text/save) stays
   single-column inside the wider card. */
.form-card.form-card-wide { max-width: 960px; }

.compose-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;                          /* design-system lg spacing */
  align-items: stretch;
  margin-bottom: 14px;                /* match the cadence of stacked fields */
}
.compose-split > * { min-width: 0; }  /* let columns shrink; no overflow */
.compose-split .compose-editor { display: flex; flex-direction: column; }
.compose-split .compose-editor textarea {
  flex: 1 1 auto; min-height: 320px;
  margin-bottom: 0;                   /* the grid gap owns spacing here */
}

.compose-preview { display: flex; flex-direction: column; }
/* the preview heading is a <span>, not a <label> (an iframe isn't a
   labelable control) — mirror the form's label rhythm so both columns read
   as labeled fields. */
.compose-preview .compose-preview-label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 500; color: var(--text);
}
.compose-preview .compose-preview-frame {
  flex: 1 1 auto; width: 100%; min-height: 320px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #FFFFFF;                /* recipient canvas is white regardless of app */
}
.compose-preview .compose-preview-caption {
  font-size: 11px; color: var(--text-muted); margin: 6px 0 0;
}

/* Narrow: stack preview beneath the editor (design-system: collapse the
   secondary column before the phone breakpoint). */
@media (max-width: 900px) {
  .compose-split { grid-template-columns: 1fr; }
  .form-card.form-card-wide { max-width: 520px; }
}

/* flash */
.flash {
  padding: 10px 14px; margin: 0 0 16px;
  border-radius: 6px; font-size: 13px;
  border: 1px solid transparent;
}
.flash.error { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.flash.ok    { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }

/* T9: floating flash-toast (success confirmation after modal save).
   #flash sits in with-layout (fixed top-right); each modal save
   OOB-swaps a fresh .flash-toast into it. The CSS animation drives
   the show + fade-out lifecycle in ~4s with no JS timer. */
#flash {
  position: fixed; top: 16px; right: 16px;
  z-index: 1000;
  pointer-events: none;
}
.flash-toast {
  background: #15803D; color: white;
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: flash-toast-show-fade 4s ease-in-out forwards;
  pointer-events: auto;
}
@keyframes flash-toast-show-fade {
  0%   { opacity: 0; transform: translateY(-12px); }
  10%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* detail page sections */
.detail-header {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 8px 0 24px;
}
.detail-header .avatar { width: 40px; height: 40px; font-size: 14px; }
.detail-title { display: flex; flex-direction: column; }
.detail-title h1 {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
}
.detail-title .detail-sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.detail-title .detail-sub a { color: var(--text-muted); }
.detail-title .detail-sub a:hover { color: var(--accent); }

.section { margin: 24px 0; }
.section h2 {
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 12px;
}

/* person address block (SF import #8) — proportional plain text, not the
   browser-default italic <address> rendering, and not mono (per design-system). */
.person-address {
  font-style: normal; color: var(--text); font-size: 14px; line-height: 1.5;
}
.person-address div { margin: 0; }

/* notes */
.notes-list { list-style: none; padding: 0; margin: 0; }
.notes-list li {
  padding: 12px 14px; border: 1px solid var(--border-soft);
  border-radius: 6px; margin-bottom: 8px; background: var(--bg-soft);
}
.notes-list .note-text { margin: 0 0 4px; color: var(--text); font-size: 14px; }
.notes-list .note-time { color: var(--text-muted); font-size: 12px; }

/* inline add-note + add-attendee forms (shared visual treatment) */
.add-note,
.add-attendee {
  margin-top: 12px;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; background: var(--bg);
}
.add-note textarea {
  width: 100%; border: none; resize: vertical; min-height: 48px;
  font: inherit; font-size: 14px; outline: none;
  padding: 0; background: transparent;
}
.add-note .add-note-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* attendance / attendees mini-table */
.mini-table { font-size: 13px; }
.mini-table .cell-name a { color: var(--text); font-weight: 500; }

/* pagination */
.pagination {
  display: flex; gap: 8px; align-items: center;
  margin-top: 16px; font-size: 13px; color: var(--text-muted);
}

/* #11 — event images
   object-fit: contain so the user's uploaded image is never silently
   cropped. Box is still capped at 600x300 so tall portraits don't
   push the page around; off-aspect images get letterboxed instead. */
.event-image-banner {
  width: 100%; max-width: 600px; max-height: 300px;
  object-fit: contain; border-radius: 8px; margin-bottom: 16px;
}
.event-list-thumb {
  width: 32px; height: 32px; object-fit: cover;
  border-radius: 4px; vertical-align: middle; margin-right: 8px;
}
.image-upload-form {
  margin-top: 16px; padding: 12px;
  border: 1px solid var(--border); border-radius: 6px;
}
.image-upload-form h3 { font-size: 14px; font-weight: 600; }

/* #12 — column visibility dropdown */
.table-controls {
  position: relative;
  display: flex; justify-content: flex-end;
  padding: 4px 0;
}
.gear-button {
  background: transparent; border: none; padding: 4px;
  cursor: pointer; color: var(--text-muted);
}
.gear-button:hover { color: var(--text); }
.cols-dropdown {
  position: absolute; right: 0; top: 32px; z-index: 50;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  min-width: 160px;
}
.cols-dropdown h4 {
  font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
  margin: 0 0 8px 0;
}
.cols-dropdown label {
  display: block; margin-bottom: 6px; cursor: pointer; font-size: 14px;
}
.cols-dropdown input[disabled] + * { color: var(--text-muted); cursor: not-allowed; }

/* #13 — sortable column headers */
.data-table thead th a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.data-table thead th a:hover { color: var(--accent); }
.sort-indicator { font-size: 10px; color: var(--text-muted); }
.sort-indicator.active { color: var(--accent); }

/* #14 — column headers. The browser-native `resize: horizontal` was removed:
   it paints a permanent diagonal resize glyph in every header cell (visual
   noise that fights the clean Twenty look), and there is no CSS-only way to
   show the handle only on the column border / on hover. Natural sizing reads
   cleaner; a hover-border drag handle would be a small JS follow-up. */
.data-table thead th { min-width: 60px; }

/* #15 — datetime-local pickers */
.tz-hint {
  color: var(--text-muted); font-size: 11px; margin-left: 4px;
  font-weight: normal;
}
input[type="datetime-local"] { font: inherit; }

/* small inline link next to a field label, e.g. "set to start + 1 hr" */
.field-action {
  color: var(--text-muted); font-size: 11px;
  text-decoration: none; font-weight: normal;
  margin-left: 4px;
}
.field-action:hover { color: var(--accent); text-decoration: underline; }

/* #23 — signed-in chrome on the topbar right */
.topbar-user {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--text-muted);
}
.topbar-name { font-weight: 500; color: var(--text); }
.button-small { padding: 4px 8px; font-size: 12px; }


/* -------- subset-send compose filter (issue #30) -------- */
.send-filter {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; margin: 0 0 16px;
  background: var(--bg-soft);
}
.send-filter > legend {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 0 6px;
}
.send-filter .filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.send-filter .filter-row > label {
  margin: 0; min-width: 132px; font-size: 12px; font-weight: 500;
}
.send-filter select, .send-filter input {
  display: inline-block; width: auto; margin: 0;
  padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
}
.send-filter .filter-count {
  margin: 12px 0 4px; font-size: 13px; color: var(--text);
}
.send-filter .filter-count .muted, .filter-count .muted { color: var(--text-muted); }
.send-filter .send-mode {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.send-filter .send-mode-opt {
  display: flex; align-items: center; gap: 6px;
  margin: 0; font-size: 13px; font-weight: 500; color: var(--text);
}
.send-filter .send-mode-opt input { width: auto; }

/* -------- Option C draft refinement (issue #67) -------- */
/* Collapsed inline recipients panel: a <details> whose summary is the
   "To N recipients" line. Inline expand, no drawer/JS. */
.recipients-panel {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-soft); padding: 0; margin: 0 0 12px;
}
.recipients-panel > summary {
  cursor: pointer; list-style: none;
  padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px;
}
.recipients-panel > summary::-webkit-details-marker { display: none; }
.recipients-panel > summary::before {
  content: "▸"; color: var(--text-muted); font-size: 11px; font-weight: 400;
}
.recipients-panel[open] > summary::before { content: "▾"; }
.recipients-panel > summary .muted { font-weight: 400; font-size: 12.5px; }
.recipients-panel > summary:hover { color: var(--accent); }
/* the panel body sits below the summary with a hairline divider */
.recipients-panel[open] > summary { border-bottom: 1px solid var(--border); }
.recipients-panel .recipient-search { padding: 12px 14px 0; }
.recipients-panel .recipient-search input {
  display: block; width: 100%; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
}
.recipients-panel .data-table { margin: 12px 0 0; }
.recipient-pager {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.recipient-pager .muted { margin-right: auto; }

/* The three explicit, separately-labelled audience-population modes
   (whole collection / specific people / matching a filter). Stacked, each
   its own card — never side-by-side radios. */
.add-recipients {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; padding: 14px;
}
.add-recipients .add-mode {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); padding: 12px;
}
.add-recipients .add-mode h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.add-recipients .add-mode select,
.add-recipients .add-mode input[type="text"],
.add-recipients .add-mode input[type="search"] {
  display: block; width: 100%; padding: 6px 9px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); margin-bottom: 8px;
}
/* same accent focus affordance as the other pickers/fields */
.add-recipients .add-mode select:focus,
.add-recipients .add-mode input[type="text"]:focus,
.add-recipients .add-mode input[type="search"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.add-recipients .add-mode .filter-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.add-recipients .add-mode .filter-row > * { flex: 1; min-width: 80px; margin-bottom: 8px; }

/* Always-confirm fire control (#67, decision 3). */
#send-control { margin-top: 16px; }
.send-confirm {
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent-soft); padding: 14px 16px;
}
.send-confirm p { margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.send-confirm .form-help { margin-bottom: 12px; }

/* ===================================================================
   #43 — Public events surface (/e/*). Chrome-free, Twenty-clean, Inter,
   reuses the app design tokens (light). No master-detail shell here —
   this is the outward-facing marketing-ish read surface.
   =================================================================== */
.public-page { background: var(--bg-soft); min-height: 100vh; }
.public-header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 880px; margin: 0 auto; padding: 16px 24px;
}
.public-brand { font-weight: 700; font-size: 18px; color: var(--text); letter-spacing: -0.02em; }
.public-brand:hover { text-decoration: none; }
.public-nav { display: flex; gap: 16px; }
.public-nav a { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.public-nav a:hover { color: var(--accent); text-decoration: none; }
.public-main { max-width: 880px; margin: 0 auto; padding: 8px 24px 48px; }
.public-page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 12px 0 20px; }
.public-page-foot { margin-top: 28px; font-size: 13px; }

/* card list — #143 image-forward landing (webex-frappe parity): a scrollable
   column of LARGE hero images, each over its title, summary, and a prominent
   request-invite CTA. */
.public-card-list { display: flex; flex-direction: column; gap: 24px; }
.public-card {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.public-card-image { display: block; }
.public-card-image:hover { text-decoration: none; }
/* Large hero. object-fit: contain (matching the #104 detail-banner rule) shows
   the FULL uploaded graphic — never cropped — letterboxed on a soft field, so
   posters/flyers with text stay readable while every card reads big + uniform. */
.public-card-banner {
  width: 100%; max-height: 360px; object-fit: contain; display: block;
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.public-card-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-width: 0; }
.public-card-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.public-card-title a { color: var(--text); }
.public-card-title a:hover { color: var(--accent); text-decoration: none; }
.public-card-desc { font-size: 14px; line-height: 1.6; color: var(--text); margin: 6px 0 0; }
.public-card-more { font-weight: 600; white-space: nowrap; }
.public-card-actions { margin-top: 14px; }
.public-when { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* #112: the viewer-local time block on the detail page. The wrapper stacks the
   viewer-zone line and the Central anchor; the anchor is a quieter, smaller
   second line giving the canonical "= H:MM America/Chicago". */
.public-when-wrap { display: flex; flex-direction: column; gap: 2px; }
.public-when-anchor { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.public-where, .public-speaker { font-size: 12.5px; color: var(--text-muted); }
/* #48 social-proof "N people attending" (shown only when N >= 10) */
.public-attending {
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  margin: 2px 0 0; font-variant-numeric: tabular-nums;
}
.public-empty { color: var(--text-muted); font-size: 14px; padding: 24px 0; }

/* pager */
.public-pager { display: flex; justify-content: space-between; margin-top: 28px; }
.public-pager a { font-size: 13px; font-weight: 500; }
.public-pager-next { margin-left: auto; }

/* detail */
/* object-fit: contain so the uploaded graphic is shown in full, never
   cropped (matches the #11 edit-page banner rule). max-height caps tall
   portraits while still letting a standard 16:9 banner fill the column
   width (≈468px at the 832px content width) edge-to-edge. */
.public-detail-banner { width: 100%; max-height: 480px; object-fit: contain; border-radius: 10px; margin: 8px 0 20px; }
.public-detail { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 24px; box-shadow: var(--shadow-card); }
.public-detail-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0 0 8px; }
.public-detail .public-when { font-size: 14px; }
.public-detail .public-where { font-size: 14px; color: var(--text-muted); margin: 8px 0 0; }
.public-detail .public-speaker { font-size: 14px; color: var(--text-muted); margin: 4px 0 0; }
.public-detail .public-attending { font-size: 14px; margin: 12px 0 0; }
.public-description { margin-top: 18px; }
.public-description p { font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }

/* actions + CTAs */
.public-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.public-cta {
  display: inline-block; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 6px;
}
.public-cta:hover { background: var(--accent-hover); text-decoration: none; }
.public-cta-secondary {
  display: inline-block; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 6px;
}
.public-cta-secondary:hover { background: var(--bg-soft); text-decoration: none; }

/* #141 gated add-to-calendar (shown ONLY on the request-invite confirmation,
   never to anonymous visitors). The note is deliberately honest about per-
   provider de-dupe: Google merges by UID, Apple/Outlook may not. */
.public-add-to-calendar { margin: 20px 0 4px; }
.public-add-to-calendar-note {
  font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 10px 0 0; max-width: 480px;
}

/* #47 public request-invite form. Inside .public-detail; matches the public
   card aesthetic (Inter, accent blue, 6px radius, soft borders). Single column,
   comfortable touch targets — this is the one public WRITE affordance. */
.public-request-invite {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-soft);
}
.public-request-invite-title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
  margin: 0 0 4px;
}
.public-request-invite-help {
  font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0 0 14px;
}
.public-request-invite-form { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.public-request-invite-form label {
  font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 8px;
}
.public-request-invite-form input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 14px; background: var(--bg); color: var(--text);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.public-request-invite-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(37, 99, 235, 0.15));
}
.public-request-invite-form .public-cta {
  margin-top: 16px; align-self: flex-start; border: none; cursor: pointer;
}
.public-form-error {
  font-size: 13px; font-weight: 500; color: var(--danger, #dc2626);
  background: var(--danger-soft, #fef2f2); border: 1px solid var(--danger-border, #fecaca);
  border-radius: 6px; padding: 10px 12px; margin: 0 0 16px;
}

/* share */
.public-share { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.public-share-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.public-share-link { font-size: 12.5px; font-weight: 500; }

/* footer */
.public-footer { max-width: 880px; margin: 0 auto; padding: 24px; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .public-card-banner { max-height: 240px; }
  .public-card-body { padding: 14px 16px; }
  .public-card-title { font-size: 18px; }
}

/* company combobox (pure-HTMX picker; lane b). Floating results popup, no
   reserved space; chip for the committed selection. Shared classes so the
   other pickers can reuse them later. */
.combobox { position: relative; }
/* The search input is field-styled here so the picker looks right even outside
   a .form-card (e.g. the company-people / event-roster "add" blocks). */
.combobox > input[type="search"] {
  width: 100%; margin-bottom: 0;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px; background: var(--bg); color: var(--text);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.combobox > input[type="search"]:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.combobox > input[type="search"]::placeholder { color: var(--text-muted); }
.combobox-popup {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  margin: 0; padding: 4px; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
}
.combobox-popup:empty { display: none; }
.combobox-option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: none; border-radius: 6px; background: none;
  font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer;
}
.combobox-option:hover, .combobox-option:focus {
  background: var(--accent-soft); outline: none;
}
.combobox-option:focus { box-shadow: inset 0 0 0 1px var(--accent); }
/* #107 roving keyboard nav: the .is-active class lands on the
   <li role="option">; mirror :hover/:focus on its inner button so arrow-key
   navigation reads identically to pointer hover (focus stays on the input,
   which carries aria-activedescendant). */
li[role="option"].is-active > .combobox-option {
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent);
}
.combobox-option.is-create {
  color: var(--accent); font-weight: 500; border-top: 1px solid var(--border-soft);
}
.combobox-option.is-create .plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; line-height: 1;
}
/* Selected state reads as a FILLED FIELD matching the sibling .form-card
   inputs (white bg, same height/padding/border/radius, full width, 14px
   bottom rhythm). The label is the only flexible/ellipsizing region; the ×
   is a fixed, non-shrinking end slot so long names never crowd it. */
.combobox-chip {
  display: flex; align-items: center; width: 100%; box-sizing: border-box;
  min-height: 36px; padding: 8px 12px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.4;
}
.combobox-chip .chip-label {
  flex: 1 1 auto; min-width: 0;             /* min-width:0 = the ellipsis fix */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combobox-chip .chip-x {
  flex: 0 0 auto; margin-left: 8px;
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 4px; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.combobox-chip .chip-x:hover { background: var(--bg-soft); color: var(--text); }
.combobox-chip .chip-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "create new company" variant: an accent border + a leading "+ New" badge,
   plus an explicit hint below so it's clear a NEW company is created on save.
   The badge is fixed-width (flex:0 0 auto) and BEFORE the label, so a long
   typed name still ellipsizes and never pushes the badge off. */
.combobox-chip.is-new { border-color: var(--accent); }
.combobox-chip .chip-new {
  flex: 0 0 auto; margin-right: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 4px; padding: 1px 7px; white-space: nowrap;
}
.combobox-hint {
  display: block; margin: -10px 0 14px;
  font-size: 11px; color: var(--accent);
}

/* Collection picker rows (#102): name on the left, "N members · kind" as a
   muted meta line on the right. The whole option stays one flex row; the name
   ellipsizes so a long campaign name never pushes the count off. */
.combobox-option-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combobox-option-meta {
  flex: 0 0 auto; margin-left: 8px;
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.combobox-option-meta .tnum { font-variant-numeric: tabular-nums; }
.combobox-option-kind { color: var(--text-muted); }
/* Non-selectable rows: no-match, truncation footer, empty state. Muted, not a
   button, no hover affordance — Tab/Enter land only on real options. */
.combobox-empty {
  padding: 8px 10px; font-size: 13px; color: var(--text-muted); cursor: default;
}
.compose-blank-hint { margin-top: -8px; }

/* #100 quick-add-person form — the inline "Add new person" form revealed
   under the collection member picker. Lives outside a .form-card, so it
   restates the standard field styling (Inter, 6px-radius inputs, 8px rhythm)
   to match the rest of the surface per design-system.md. */
.quick-add-form {
  margin-top: 8px; padding: 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-soft);
}
.quick-add-form label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 500; color: var(--text);
}
.quick-add-form input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 14px;
  background: var(--bg); color: var(--text);
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.quick-add-form input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.quick-add-form input::placeholder { color: var(--text-muted); }
.quick-add-actions { display: flex; gap: 8px; }