/* CRM engine. From scratch, so it uses the host's --shy-* tokens directly
   (no :root alias block). Every stylesheet loads on every page: classes are
   prefixed crm-, and anything generic is scoped .engine-crm. */

.crm-muted { color: var(--shy-text-muted); }

.crm-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.crm-search input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--shy-border-strong);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  color: var(--shy-text);
  font: inherit;
}

.crm-table { width: 100%; }

.crm-pill {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--shy-surface-sunken);
  color: var(--shy-text-muted);
}

.crm-pill--subscribed { background: var(--shy-success-tint); color: var(--shy-success); }
.crm-pill--bounced,
.crm-pill--complained { background: var(--shy-danger-tint); color: var(--shy-danger); }

.crm-contact {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-items: start;
}

.crm-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

.crm-facts dt { color: var(--shy-text-muted); }
.crm-facts dd { margin: 0; overflow-wrap: anywhere; }

.crm-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crm-timeline li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--shy-border);
}

.crm-timeline li:last-child { border-bottom: 0; }

/* Campaigns and audiences (CRM 07) */
.crm-pill--sent,
.crm-pill--accepted { background: var(--shy-success-tint); color: var(--shy-success); }
.crm-pill--failed,
.crm-pill--unknown { background: var(--shy-danger-tint); color: var(--shy-danger); }
.crm-pill--sending,
.crm-pill--pending { background: var(--shy-warning-tint); color: var(--shy-warning); }

.crm-banner {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--shy-radius);
  background: var(--shy-surface-sunken);
}
.crm-banner p, .crm-banner ul { margin: 0; }
.crm-banner--error { background: var(--shy-danger-tint); color: var(--shy-danger); }

.crm-form .field input[type="text"],
.crm-form .field input[type="password"],
.crm-form .field textarea,
.crm-form .field select { max-width: 46rem; }

.crm-audience-groups {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0 0 0.5rem;
}

.crm-checks {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
}
.crm-checks legend { padding: 0 0.3rem; font-weight: 500; font-size: 0.85rem; }
.crm-checks label { display: flex; gap: 0.4rem; align-items: center; padding: 0.15rem 0; }

.shy-admin .crm-check input[type="checkbox"] { width: auto; }
.shy-admin .crm-check label { display: inline; margin-left: 0.3rem; }

.crm-campaign {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-items: start;
}
.crm-campaign__side { display: grid; gap: 1rem; min-width: 0; }

.crm-count { margin: 0.25rem 0; font-size: 1.4rem; font-weight: 600; }

.crm-inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.crm-tag-add { margin-top: 0.75rem; }
.crm-tag-remove { margin-left: 0.5rem; color: var(--shy-text-muted); font-size: 0.85em; }
.crm-tag-remove:hover { color: var(--shy-danger); }
.crm-inline-form input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--shy-border-strong);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  color: var(--shy-text);
  font: inherit;
}

.crm-preview {
  display: block;
  width: 100%;
  height: 36rem;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  background: #fff;
}

.crm-recipients {
  columns: 2 14rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.crm-recipients a { color: var(--shy-brand); }

/* Review queues and contact edit (CRM 03) */
.crm-queues {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.crm-queues__count { font-size: 1.4rem; font-weight: 600; margin: 0 0 0.25rem; }

.crm-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.crm-subhead { margin: 2rem 0 0.5rem; font-size: 1.1rem; }

.crm-group { display: grid; gap: 0.75rem; justify-items: start; overflow-x: auto; }

.crm-hidden-form { display: none; }

.crm-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.crm-actions form { margin: 0; }

.crm-notes { margin: 0 0 1rem; padding-left: 1.2rem; }
.crm-notes li { margin: 0.25rem 0; }

.crm-edit-form { display: grid; gap: 0.75rem; max-width: 28rem; }
.crm-edit-form label { display: grid; gap: 0.25rem; color: var(--shy-text-muted); }
.crm-edit-form input[type="text"],
.crm-edit-form input[type="email"],
.crm-edit-form input[type="tel"] {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--shy-border-strong);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  color: var(--shy-text);
  font: inherit;
}

/* Orders (CRM 06) */
.crm-scroll { overflow-x: auto; }
.crm-nowrap { white-space: nowrap; }
.crm-pill--cancelled { background: var(--shy-danger-tint); color: var(--shy-danger); }
.crm-order-lines summary { cursor: pointer; white-space: nowrap; }
.crm-order-lines ul { margin: 0.25rem 0 0; padding-left: 1.1rem; min-width: 14rem; }
/* A card that takes the contact page's whole width (the orders table). */
.crm-contact__wide { grid-column: 1 / -1; min-width: 0; }

/* The campaign report (CRM 09). Links are long tracked URLs: let them wrap
   rather than widen the side column. */
.crm-report { margin-bottom: 0.75rem; }
.crm-report-links { margin-bottom: 0.75rem; }
.crm-report-links__url { overflow-wrap: anywhere; word-break: break-word; }
.crm-report-links td:not(:first-child), .crm-report-links th:not(:first-child) { text-align: right; white-space: nowrap; }

/* The list-growth report (CRM 19). */
/* .shy-admin th/td set text-align: left, so these need the same weight. */
.shy-admin .crm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-growth-weeks td:first-child { white-space: nowrap; }
@media (max-width: 600px) {
  .shy-admin .crm-growth-table th,
  .shy-admin .crm-growth-table td { padding: 0.5rem 0.4rem; }
}
.crm-growth {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  margin-bottom: 1rem;
}
.crm-growth .shy-card { margin-bottom: 0; }
.crm-growth-weeks__current td { font-weight: 600; }

/* The Inbox card on a contact page (CRM 16). */
.crm-inbox { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.crm-inbox li { margin: 0.2rem 0; overflow-wrap: anywhere; }
.crm-facts dd p { margin: 0 0 0.35rem; }

/* The email builder (CRM 10). */
.crm-label { display: block; margin: 0 0 0.35rem; font-weight: 500; }
.crm-builder { display: grid; gap: 0.75rem; max-width: 46rem; }
.crm-builder__list { display: grid; gap: 0.75rem; }
.crm-builder__empty { display: none; margin: 0; }
.crm-builder--empty .crm-builder__empty { display: block; }
.crm-builder__add { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.crm-block {
  display: grid;
  /* minmax(0, 1fr), not the implicit auto column: the Trix toolbar's
     min-content width would otherwise push the block off a phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0.6rem 0.75rem 0.75rem;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
}
.crm-block__bar { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.crm-block__tools { display: inline-flex; gap: 0.25rem; flex: none; }
.crm-block__tool {
  min-width: 2rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  background: var(--shy-surface-sunken);
  color: var(--shy-text);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}
.crm-block__tool:disabled { opacity: 0.35; cursor: default; }
.crm-block__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.crm-block__row > * { min-width: 0; }
.crm-block__grow { flex: 1 1 14rem; }
.crm-block__status:empty, .crm-block__note:empty { display: none; }
.crm-block__status, .crm-block__note { margin: 0; font-size: 0.85rem; }
.crm-block .crm-trix { min-height: 6rem; background: var(--shy-surface); }
.crm-block trix-toolbar .trix-button-group--file-tools { display: none; }
.crm-block trix-toolbar .trix-button-row { flex-wrap: wrap; gap: 0.25rem; }
.crm-images { display: grid; gap: 0.5rem; }
.crm-images:empty { display: none; }
.crm-image {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.crm-image__thumb {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: var(--shy-radius);
  background: var(--shy-surface-sunken);
}
.crm-upload { cursor: pointer; }
@media (max-width: 30rem) {
  .crm-image { grid-template-columns: 3rem 1fr; }
  .crm-image__thumb { width: 3rem; height: 3rem; }
  .crm-image .crm-block__tools { grid-column: 1 / -1; justify-self: end; }
}

.crm-schedule-form { align-items: center; }
.crm-schedule-form input[type="datetime-local"] {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--shy-border-strong);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  color: var(--shy-text);
  font: inherit;
}

.crm-assets { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; overflow-wrap: anywhere; }

.crm-saved-blocks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.crm-saved-block { border: 1px solid var(--shy-border); border-radius: var(--shy-radius); overflow: hidden; }
.crm-saved-block__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--shy-surface-sunken);
}
.crm-saved-block__bar > span { display: inline-flex; gap: 0.75rem; align-items: center; }
/* The block as the email shows it: the email's own light palette. */
.crm-saved-block__preview {
  padding: 0.25rem 1rem 0.5rem;
  background: #ffffff;
  color: #222222;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
/* The email's own tables, not the admin's (.shy-admin table is full width). */
.crm-saved-block__preview table { width: auto; margin-left: auto; margin-right: auto; border: 0; }
.crm-saved-block__preview td { padding: 0; border: 0; }
.crm-linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--shy-danger);
  font: inherit;
  cursor: pointer;
}

/* New drop email (CRM 11): a batch's colorways, each with its photo choices. */
.crm-drop-batch { margin-bottom: 1rem; align-items: center; }
.crm-drop-rows { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.crm-drop-row {
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  padding: 0.6rem 0.9rem 0.8rem;
  margin: 0;
  min-width: 0;
}
.crm-drop-row legend { display: flex; gap: 0.6rem; align-items: center; padding: 0 0.3rem; }
.crm-drop-row__feature { display: inline-flex; gap: 0.4rem; align-items: center; cursor: pointer; }
.crm-drop-row__facts { margin: 0.2rem 0 0.6rem; overflow-wrap: anywhere; }
.crm-drop-photos { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.crm-drop-photo {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  width: 6.5rem;
  padding: 0.35rem;
  border: 2px solid transparent;
  border-radius: var(--shy-radius);
  cursor: pointer;
  font-size: 0.8rem;
  text-align: center;
}
.crm-drop-photo:has(input:checked) { border-color: var(--shy-brand); background: var(--shy-surface-sunken); }
.crm-drop-photo img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--shy-radius); background: var(--shy-surface-sunken); }
.crm-drop-photo--none { align-content: center; min-height: 5.5rem; }
.crm-drop-note { overflow-wrap: anywhere; }

/* Join-this-list forms (CRM 18) */
.crm-join-address { overflow-wrap: anywhere; }
.crm-join-slug { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.crm-join-slug input[type="text"] { flex: 1 1 10rem; min-width: 0; }

/* Drop texts (#73) */
.crm-sms {
  max-width: 24rem;
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: var(--shy-surface-sunken);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.crm-inline-form input[type="tel"] {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--shy-border-strong);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  color: var(--shy-text);
  font: inherit;
}
.crm-send-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.crm-facts--spaced { margin-bottom: 1rem; }
.crm-thread { display: grid; gap: 0.5rem; }
.crm-thread__item { display: grid; justify-items: start; }
.crm-thread__item--out { justify-items: end; }
.crm-thread__item .crm-sms { margin: 0; }
.crm-sms--out { border-radius: 1rem 1rem 0.25rem 1rem; background: var(--shy-brand); color: var(--shy-brand-contrast); }
.crm-sms--out a { color: inherit; }
.crm-thread__meta { margin: 0.15rem 0 0; font-size: 0.75rem; }
.crm-schedule-mode { margin-bottom: 0.75rem; }

/* Contact page: the store journey before a signup (Journeys #116) */
.crm-journey + .crm-journey { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--shy-border); }
.crm-journey__title { margin: 0 0 0.5rem; font-size: 1rem; }
.crm-journey .crm-timeline__what { min-width: 0; overflow-wrap: anywhere; }
.crm-journey__note { margin: 0.75rem 0 0; font-size: 0.85rem; }

/* The week's drop drafts (/crm/drop_week, Crm::WeeklyDrafts) */
.crm-weekly td { vertical-align: top; }
.crm-weekly__label { display: block; color: var(--shy-text-muted); font-size: 0.85rem; }
.crm-weekly__note { display: block; margin-top: 0.2rem; color: var(--shy-text-muted); font-size: 0.85rem; }
.crm-pill--waiting { background: var(--shy-warning-tint); color: var(--shy-warning); }
.crm-pill--drafted { background: var(--shy-success-tint); color: var(--shy-success); }
.crm-pill--missing { background: var(--shy-danger-tint); color: var(--shy-danger); }
.crm-weekly-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0 0 1rem; }
@media (max-width: 40rem) {
  .crm-weekly thead { display: none; }
  .crm-weekly tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--shy-border); }
  .crm-weekly td { display: block; padding: 0; border: 0; }
  .crm-weekly td:first-child, .crm-weekly td:last-child { grid-column: 1 / -1; }
}