:root {
  --ink: #2A1A45;
  --ink-2: #1B1130;
  --paper: #fbf5f1;
  --paper-raised: #FCF9F7;
  --page-bg: #f8f6f6;
  --header-bg: #ffffff;
  --evergreen: #2A1A45;
  --evergreen-light: #6B5F86;
  --mint: #D0E9D9;
  --mint-ink: #1E4430;
  --coral: #F77055;
  --coral-deep: #B8452F;
  --gold: #FDD36A;
  --gold-ink: #6B4F06;
  --gold-soft: #FADDA3;
  --line: rgba(42,26,69,0.12);
  --danger: #B8452F;
  --font-display: "Besley", serif;
  --font-body: "Inter", sans-serif;
  --font-rounded: "Baloo 2", sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; }
button { font-family: inherit; }

/* ---- Top bars & account chip (shared) ---- */
.mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 80px;
  padding: 8px 18px;
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.mobile-topbar-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 70px;
}

.hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s var(--ease);
}
.hamburger-btn svg { width: 22px; height: 22px; }
.hamburger-btn:hover { background: rgba(42,26,69,.06); }

.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(24px,4vw,56px);
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.topbar .nav-left { display: flex; align-items: center; gap: 44px; }
.topbar img { height: 32px; }
.nav-logo-link { display: inline-flex; line-height: 0; }
.topbar .nav-links { display: flex; gap: 8px; }
.topbar .nav-links a {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  padding: 9px 4px;
  margin: 0 8px;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  opacity: .55;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.topbar .nav-links a.active { opacity: 1; border-color: var(--coral); }
.topbar .nav-links a:hover { opacity: 1; }

/* ---- Sub-tabs within a top-level section (e.g. Flows: Your flows / Actions) ---- */
.subtab-links { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.subtab-links a {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 4px;
  margin-bottom: -1px;
  color: var(--ink);
  opacity: .55;
  border-bottom: 2px solid transparent;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.subtab-links a + a { margin-left: 14px; }
.subtab-links a.active { opacity: 1; border-color: var(--coral); }
.subtab-links a:hover { opacity: 1; }


.account-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-rounded);
}
.topbar .account-chip { padding: 6px 16px 6px 6px; }
.user-chip-label { font-family: var(--font-rounded); font-weight: 700; font-size: 11px; color: var(--ink); opacity: .75; white-space: nowrap; }
.account-chip .avatar, .account-chip .avatar-placeholder { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }

.account-menu {
  position: fixed;
  z-index: 200;
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 32px -16px rgba(42,26,69,.35);
  padding: 8px;
  min-width: 190px;
}
.account-menu-name {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 12px 6px;
  color: var(--ink);
}
.account-menu-plan {
  display: block;
  font-family: var(--font-rounded);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink);
  opacity: .5;
  margin-top: 2px;
}
.account-menu a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 10px;
}
.account-menu a:hover { background: var(--paper); }
.account-menu-signout { color: var(--coral-deep) !important; }

/* ---- Bottom tab bar (mobile) ---- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  opacity: .55;
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 10.5px;
  transition: opacity .2s, transform .2s var(--ease);
}
.bottom-nav a svg { width: 21px; height: 21px; }
.bottom-nav a.active { opacity: 1; }
.bottom-nav a.active .icon-wrap { background: var(--mint); }
.bottom-nav a:active { transform: scale(.92); }
.icon-wrap {
  width: 38px; height: 26px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease);
}

@media (min-width: 880px) {
  .mobile-topbar, .bottom-nav { display: none; }
  .topbar { display: flex; }
}

.content {
  padding: 24px 18px 120px;
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 880px) {
  .content { padding: 40px 48px 60px; }
}
@media (max-width: 879px) {
  .content { padding: 16px 14px 100px; }
  .contact-card { padding: 18px 16px; border-radius: 16px; }
  .contact-card-section { padding-top: 16px; margin-top: 16px; }
}

/* ---- Typography ---- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 6px; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--evergreen-light);
  font-weight: 600;
  margin-bottom: 6px;
}
.subdued { color: #6B6459; font-size: 14px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Onboarding wizard progress dots -- see
   templates/onboarding/_step_dots.html. Filled dot = this step is done
   or current; empty = still ahead. */
.onboarding-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  margin: 0 4px;
}
.onboarding-dot--active { background: var(--coral); }

/* A <button> styled to read as a plain text link -- used where the
   action needs to be a real form submit (skip-for-now, etc.) but
   should look and feel like a link, not a secondary button. */
.link-button {
  background: none; border: none; padding: 0;
  color: var(--ink); text-decoration: underline;
  font-size: 14px; cursor: pointer;
}
.link-button:hover { opacity: 0.7; }

/* Persistent Solo-trial banner -- see base.html and Org.is_on_trial /
   trial_recently_ended. Sits at the top of .content, above flash
   messages, on every authenticated page. */
.trial-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--gold-soft); color: var(--gold-ink);
  border-radius: 10px; padding: 12px 18px; margin-bottom: 16px;
  font-size: 14px; font-weight: 600;
}
.trial-banner--ended { background: var(--line); color: var(--ink); }
.trial-banner__cta {
  background: var(--ink); color: #fff; border: none; border-radius: 8px;
  padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.trial-banner__cta:hover { opacity: 0.85; }

/* Version-mismatch toast -- see static/js/version-check.js. Fixed
   (not part of page flow) so it's visible regardless of scroll
   position, and sits above .bottom-nav on mobile rather than under
   it. Inserted/removed by JS, not server-rendered. */
.version-banner {
  position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--ink); color: #fff;
  border-radius: 12px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 24px -8px rgba(42,26,69,.4);
}
.version-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }
.version-banner__cta {
  background: #fff; color: var(--ink); border: none; border-radius: 8px;
  padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.version-banner__cta:hover { opacity: 0.85; }
.version-banner__dismiss {
  background: transparent; color: rgba(255,255,255,.7); border: none;
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 4px;
  white-space: nowrap;
}
.version-banner__dismiss:hover { color: #fff; }
@media (min-width: 880px) {
  .version-banner { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}

/* ---- Buttons & forms ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-primary { background: var(--coral); color: var(--paper-raised); box-shadow: 0 3px 0 var(--coral-deep); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--coral-deep); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--coral-deep); }
.btn-ghost { background: var(--paper-raised); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--paper); border-color: var(--evergreen-light); }
.btn-skip { background: transparent; color: var(--ink); opacity: .6; border: 1.5px solid var(--line); }
.btn-skip:hover { opacity: 1; background: var(--paper-raised); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--evergreen); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--paper-raised);
}
/* Checkboxes/radios inside a .field (e.g. "Repeats annually" nested in a checkbox-chip
   label) were inheriting width:100% from the rule above, stretching the input's own box
   across the row and shoving its label text far to the right. Keep them their natural size. */
.field input[type="checkbox"], .field input[type="radio"] {
  width: auto;
}
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
/* Currency inputs (custom fields, timeline event amount) -- a fixed "$"
   sitting inside the same bordered box as the number input. */
.input-prefix-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-raised);
  overflow: hidden;
}
.input-prefix-group .input-prefix {
  padding: 9px 0 9px 11px;
  font-size: 14px;
  color: var(--subdued, #6b7280);
}
.input-prefix-group input {
  border: none !important;
  background: transparent !important;
  padding-left: 4px !important;
}
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 20px; }
legend { font-family: var(--font-display); font-weight: 700; padding: 0 8px; color: var(--evergreen); }
.checkbox-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-chip { display: flex; align-items: center; gap: 6px; font-size: 13px; }
/* .field label sets display:block (for normal field labels) and, by descendant-selector
   specificity, was silently beating .checkbox-chip's own display:flex whenever a
   checkbox-chip label was nested inside a .field -- this restores the intended
   flex row (checkbox, then its text) in that case. */
.field .checkbox-chip { display: flex; align-items: center; gap: 6px; }

/* ---- Flash messages ---- */
.flash-stack { margin-bottom: 20px; }
.flash-stack-centered { max-width: 400px; margin: 40px auto 0; }
.flash { padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 8px; }
.flash-success { background: #E7F0E5; color: var(--evergreen); }
.flash-error { background: #F7E7E3; color: var(--danger); }
.flash-warning { background: #FBF0DC; color: #8A5A00; }

/* ---- Contact list ---- */
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--ink);
}
.contact-row:hover { border-color: var(--gold); }
.status-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
}
.status-new { background: #E4EEF7; color: #2A5D8A; }
.status-active { background: var(--gold-soft); color: #8A6A1F; }
.status-past { background: #EDEAE3; color: #7A7466; }
.status-pending { background: #E4EEF7; color: #2A5D8A; }
.pill-do-not-contact { background: #FBCDC6; color: var(--danger); }
.pill-marketing-opt-out { background: #EDEAE3; color: #7A7466; }
.status-disabled { background: #F7E7E3; color: var(--danger); }

.badge-pill {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
  background: var(--gold-soft);
  color: var(--ink);
  margin-right: 6px;
  margin-bottom: 4px;
}
.badge-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.badge-color-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line);
  cursor: pointer; position: relative; display: block;
}
.badge-color-swatch input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.badge-color-swatch:has(input:checked) {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}
.badge-toggle-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badge-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  color: var(--ink);
  background: var(--gold-soft);
  border: 1.5px solid transparent;
  opacity: 0.4;
  filter: grayscale(0.4);
  transition: opacity .15s var(--ease), filter .15s var(--ease), border-color .15s var(--ease);
}
.badge-toggle:hover { opacity: 0.7; filter: grayscale(0.15); }
.badge-toggle:has(input:checked) { opacity: 1; filter: none; border-color: var(--ink); }
.badge-toggle input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}

/* ---- Team list ---- */
.team-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--ink);
}
.team-row:hover { border-color: var(--gold); }
.static-row { cursor: default; }
.static-row:hover { border-color: var(--line); }
.role-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
}
.role-admin { background: var(--evergreen); color: #fff; }
.role-agent { background: #EDEAE3; color: #7A7466; }
.btn-small { padding: 5px 12px; font-size: 12px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #8A3325; }

.avatar { border-radius: 50%; object-fit: cover; display: block; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 76px; height: 76px; }
.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: linear-gradient(135deg, var(--coral), var(--gold));*/
  background: #fdd36a;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 600;
}
.avatar-sm.avatar-placeholder { font-size: 13px; }
.avatar-lg.avatar-placeholder { font-size: 26px; }

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-input-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.file-input-name { color: #6B6459; font-size: 13px; }

.danger-zone {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.danger-zone h2 { color: var(--danger); }

/* ---- Segmented access-method choice (Add agent form) ---- */
.access-method { display: flex; flex-direction: column; gap: 10px; }
.access-option {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.access-option:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.access-option input[type="radio"] { margin-top: 3px; }
.access-option .option-title { font-weight: 600; }
.access-option .subdued small { display: block; margin-top: 2px; }
.access-option-edit-btn { display: none; flex-shrink: 0; align-self: center; }
.access-option:has(input:checked) .access-option-edit-btn { display: inline-block; }
.access-option-compact { padding: 10px 12px; }
.access-option-compact .option-title { font-size: 14px; }

.wizard-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.wizard-step {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--paper-raised); border: 1.5px solid var(--line); color: rgba(42,26,69,.55);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-rounded);
  font-weight: 700; font-size: 12.5px;
}
.wizard-step.active { background: var(--coral); border-color: var(--coral); color: #fff; }
.wizard-step.done { background: var(--evergreen); border-color: var(--evergreen); color: #fff; }
.wizard-step-label { font-size: 13px; color: rgba(42,26,69,.55); }
.wizard-step-label.active { color: var(--ink); font-weight: 700; }
.wizard-step-line { flex: 1; height: 1px; background: var(--line); }
.wizard-pane { display: none; }
.wizard-pane.active { display: block; }

/* ---- Timeline ---- */
.timeline { border-left: 2px solid var(--line); padding-left: 20px; margin-left: 6px; }
.timeline-item { position: relative; margin-bottom: 18px; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
.timeline-date { font-size: 12px; color: #8A8375; }
.timeline-summary {
  cursor: pointer;
  list-style: none;
}
.timeline-summary::-webkit-details-marker { display: none; }
.timeline-summary::marker { content: ""; }
/* Button version of .timeline-summary -- used once Timeline items
   became modal triggers instead of <details>/<summary> (see
   Important Dates for the same pattern). Resets default button
   chrome so it reads the same as the old <summary> did. */
.timeline-item-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
.badge-success { background: var(--mint); color: var(--mint-ink); }

.catalog-caret { display:inline-block; transition: transform 0.15s ease; color: #9A9686; }
details[open] > summary .catalog-caret { transform: rotate(90deg); }
.tag-chip {
  display: inline-block;
  background: #EDEAE3;
  color: #6B6459;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  margin: 2px 4px 2px 0;
}

/* ---- Page head (Today, Contacts, etc.) ---- */
.page-head { margin-bottom: 20px; }
.page-head.with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- Today: admin agent-filter picker + owning-agent badge ---- */
.agent-filter-form { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.agent-filter-label {
  font-family: var(--font-rounded); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em; color: rgba(42,26,69,.5);
}
.agent-filter-select {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink);
  padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--paper-raised); cursor: pointer;
}
.s-agent-badge {
  font-family: var(--font-rounded); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .02em; color: var(--evergreen-light);
  background: #EDE8F5; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  margin-left: auto;
}

/* ---- Today: progress + card stack ---- */
.progress-label { font-family: var(--font-rounded); font-weight: 700; font-size: 12.5px; color: rgba(42,26,69,.55); margin-bottom: 6px; }
.progress { display: flex; gap: 6px; margin: 0 0 22px; }
.progress span { flex: 1; height: 5px; border-radius: 4px; background: rgba(42,26,69,.12); overflow: hidden; position: relative; }
.progress span::after {
  content: ""; position: absolute; inset: 0; background: var(--mint);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.progress span.done::after { transform: scaleX(1); }

/* Always-visible swipe affordance above the card stack -- deliberately its
   own row rather than overlaid on the top card, so variable card heights
   (recommendation cards, gift cards with the catalog select, etc.) can
   never grow up under it and hide it like the old overlay hint did. */
.swipe-hint {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 640px; margin: 0 auto 14px; padding: 0 4px;
  font-family: var(--font-rounded); font-weight: 700; font-size: 12.5px;
  color: rgba(42,26,69,.45);
}
.swipe-hint.hide { display: none; }
.swipe-hint-side { display: flex; align-items: center; gap: 5px; }
.swipe-hint-side svg { width: 14px; height: 14px; flex-shrink: 0; }
.swipe-hint-approve { color: var(--mint-ink); }
@media (max-width: 480px) {
  .swipe-hint { font-size: 11px; }
  .stamp { font-size: 16px; gap: 8px; }
  .stamp svg { width: 24px; height: 24px; }
}

#cardsView { max-width: 640px; margin: 0 auto; }
.stack-wrap { position: relative; max-width: 640px; margin: 0 auto; }
.stack { position: relative; min-height: 300px; touch-action: pan-y; }

/* Shown while an approved action's fetch is in flight (see today.js
   submitApprove) -- the card has already flown off-screen at that
   point, so without this the stack just sits there until the request
   resolves, which reads as frozen rather than "still working" on a
   slow connection or a slow gift/charge lookup server-side. */
.s-approve-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255,255,255,.82);
  border-radius: 24px;
  font-family: var(--font-rounded); font-weight: 600; font-size: 14px; color: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}
.s-approve-overlay.show { opacity: 1; pointer-events: auto; }
.s-approve-overlay-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(42,26,69,.15);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}

.s-card {
  position: absolute; inset: 0 0 auto 0; background: var(--paper-raised);
  border-radius: 24px; border: 1.5px solid var(--line);
  /* Extra bottom padding (20px -> 50px) so a tall card has clearance
     below its last element -- otherwise the fixed .bottom-nav on
     mobile can sit right against (or over) the footer buttons before
     they're fully scrolled into view. */
  padding: 18px 20px 50px; display: flex; flex-direction: column;
  box-shadow: 0 14px 30px -18px rgba(42,26,69,.35);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
  will-change: transform; user-select: none;
}
.s-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }

.s-category-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--evergreen-light);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px;
  margin-bottom: 8px;
}
.s-category-label svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Inline usage next to an existing status pill (list view's default
   suggestion row) rather than stacked above -- no bottom margin there. */
.list-row .s-category-label { margin-bottom: 0; }
.s-card-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.s-card-icon svg { width: 18px; height: 18px; }
.s-type-pill { display: inline-flex; align-items: center; gap: 5px; }
.s-type-pill svg { width: 12px; height: 12px; }

.action-type-icon { display: inline-flex; vertical-align: -3px; margin-right: 4px; }
.action-type-icon svg { width: 15px; height: 15px; }
.s-card-who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.s-card-who h3 { font-family: var(--font-rounded); font-weight: 700; font-size: 16px; margin: 0; line-height: 1.3; }
.s-card-who-link { display: contents; color: inherit; text-decoration: none; }
.s-card-who-link:hover h3 { text-decoration: underline; }
.s-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-rounded); font-weight: 700; font-size: 10.5px; letter-spacing: .03em;
  background: rgba(42,26,69,.06); color: var(--ink); padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.s-badge svg { width: 12px; height: 12px; }
.s-card-reason { font-size: 14px; line-height: 1.45; color: rgba(42,26,69,.7); margin: 0 0 14px; }
.s-card-expires {
  font-size: 11.5px; color: #8A8375; margin: 4px 0 0;
}

/* Shown on a suggestion card in place of Approve when
   SuggestedAction.readiness_blocked_reason is set (missing email or
   shipping address) -- see app/models/actions.py. Deliberately louder
   than .s-card-expires (this blocks approval outright, not just a
   deadline) but not as alarming as .flash-error, since it's a normal
   everyday gap to fill in, not something that went wrong. The whole
   banner is a single <a> (not a div with a small nested link) so the
   tap target on mobile is the full block, not just a few underlined
   words -- text-decoration/color reset here since it's a real anchor. */
.s-readiness-warning {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--gold-soft); color: #8A5A00; border-radius: 10px;
  padding: 10px 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.45;
  text-decoration: none; cursor: pointer;
  transition: background .15s var(--ease);
}
.s-readiness-warning:hover, .s-readiness-warning:active { background: #F3DFAE; }
.s-readiness-warning svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.s-readiness-warning strong { text-decoration: underline; }

.s-gift-box {
  background: var(--paper); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 10px;
  /* Bordered so the suggested gift reads as its own distinct module
     rather than blending into the rest of the card's content. */
  border: 1.5px solid var(--coral);
}
/* Larger lead image on the swipeable card view -- gives the gift itself
   some visual appeal instead of leading with a name and a price. List
   view keeps the small inline thumb (.s-gift-thumb below) since it's a
   denser, scan-oriented layout. Placeholder gets the same treatment
   (not just a small icon) so a gift without a photo yet still carries
   the same visual weight as one that has one. */
.s-gift-hero { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; display: block; }
.s-gift-hero-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft); color: var(--gold-ink);
}
.s-gift-hero-placeholder svg { width: 32px; height: 32px; }
.s-gift-eyebrow {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-family: var(--font-rounded); font-weight: 700; font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--coral-deep);
}
.s-gift-eyebrow svg { width: 12px; height: 12px; }
.s-gift-info { display: flex; align-items: center; gap: 12px; }
.s-gift-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.s-gift-thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft); color: var(--gold-ink);
}
.s-gift-thumb-placeholder svg { width: 26px; height: 26px; }
.s-gift-name { font-family: var(--font-rounded); font-weight: 700; font-size: 14px; }
.s-gift-description { font-size: 12.5px; color: rgba(42,26,69,.65); line-height: 1.4; margin-top: 2px; }
.s-gift-price { font-size: 12.5px; color: rgba(42,26,69,.55); margin-top: 2px; }
.s-gift-select-label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-rounded); font-weight: 700; font-size: 11px; letter-spacing: .03em;
  color: rgba(42,26,69,.5); text-transform: uppercase;
}
.s-gift-timing {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-family: var(--font-rounded); font-weight: 700; font-size: 11px; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
}
.s-gift-timing-ok { background: var(--mint); color: var(--mint-ink); }
.s-gift-timing-soon { background: var(--gold-soft); color: var(--gold-ink); }
.s-gift-timing-urgent { background: var(--coral); color: #fff; }
.s-gift-timing-late { background: var(--danger); color: #fff; }
.s-gift-select {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 400; text-transform: none;
  letter-spacing: normal; color: var(--ink); padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper-raised);
}
.s-gift-change-disclosure { margin: 0; }
.s-gift-change-disclosure .s-gift-select { width: 100%; margin-top: 10px; box-sizing: border-box; }
.s-quote {
  background: var(--paper); border-radius: 14px; padding: 14px 16px;
  font-style: italic; font-size: 14px; line-height: 1.55; color: rgba(42,26,69,.85);
  margin: 0 0 14px;
}

/* Suggested-text / note box on the redesigned Today card: one place for
   the reason-generated copy, with a small pencil toggle in the corner
   instead of a separate labeled "Edit" pill floating below. The label
   and a one-line preview of the note are always visible (plus the
   pencil) -- fully hiding the note behind a click made it too easy to
   miss that one existed at all. Tap the pencil to read/edit the full
   text. */
.s-message-box {
  position: relative; background: var(--paper); border-radius: 14px;
  padding: 12px 40px 12px 14px; margin: 0 0 10px;
}
.s-message-label {
  font-family: var(--font-rounded); font-weight: 700; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(42,26,69,.45); margin-bottom: 4px;
}
.s-message-text {
  font-style: italic; font-size: 14px; line-height: 1.5; color: rgba(42,26,69,.85); margin: 0;
}
.s-message-text-clamped {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.s-message-box .s-edit-disclosure { margin: 0; }
.s-message-edit-toggle {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: rgba(42,26,69,.45); list-style: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.s-message-edit-toggle svg { width: 14px; height: 14px; }
.s-message-edit-toggle::-webkit-details-marker { display: none; }
.s-message-edit-toggle::marker { content: ""; }
.s-message-edit-toggle:hover { background: rgba(42,26,69,.08); color: var(--ink); }
.s-message-edit-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58,107,74,.25); }
.s-message-box .s-edit-textarea { margin-top: 10px; }
.s-message-box .s-form-edit { margin-top: 0; }

.s-form { margin-top: 14px; display: inline-block; }
.s-form + .s-form { margin-left: 8px; }

.btn-delete { background: transparent; color: var(--coral-deep); opacity: .7; border: 1.5px solid var(--line); }
.btn-delete:hover { opacity: 1; border-color: var(--coral-deep); background: var(--paper-raised); }
.btn-tertiary { background: var(--paper-raised); color: var(--evergreen); border: 1.5px solid var(--line); }
.btn-tertiary:hover { border-color: var(--evergreen); background: #fff; }
.btn-save-gift {
  background: var(--mint-ink); color: #fff; box-shadow: 0 3px 0 #142d1f;
  width: 100%; justify-content: center;
}
.btn-save-gift:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #142d1f; }
.btn-save-gift:active { transform: translateY(1px); box-shadow: 0 1px 0 #142d1f; }

/* Note/Edit disclosure -- a real chip-style toggle instead of the bare
   native <summary> (default triangle marker + browser focus outline box,
   which is what made this look like a raw form control rather than part
   of the card's design system). Still used by the List view. */
.s-edit-disclosure { margin: 12px 0 6px; }
.s-edit-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; font-family: var(--font-rounded); font-weight: 700; font-size: 11.5px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--evergreen-light);
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper); list-style: none;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.s-edit-toggle::-webkit-details-marker { display: none; }
.s-edit-toggle::marker { content: ""; }
.s-edit-toggle:hover { background: var(--paper-raised); border-color: var(--evergreen-light); }
.s-edit-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58,107,74,.25); }
.s-edit-toggle::before {
  content: ""; width: 6px; height: 6px; margin-top: -2px; flex-shrink: 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .16s var(--ease);
}
.s-edit-disclosure[open] > .s-edit-toggle::before { transform: rotate(-135deg); margin-top: 2px; }
.s-reason-disclosure { margin: 2px 0 10px; }
.s-reason-disclosure .s-card-reason { margin: 10px 0 0; }

.s-edit-textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-raised);
  resize: vertical; margin: 10px 0 8px; outline: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.stamp {
  position: absolute; top: -18px; right: -20px; bottom: -20px; left: -20px;
  border-radius: 24px; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-rounded); font-weight: 800; font-size: 19px;
  letter-spacing: .04em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
}
.stamp svg { width: 28px; height: 28px; flex-shrink: 0; }
.stamp.approve { background: var(--mint); color: var(--mint-ink); }
.stamp.skip { background: var(--ink); color: #fff; }

/* Per-card footer: replaces the old global bottom Skip/Approve bar --
   each card now carries its own actions, so there's nothing left for a
   fixed row below the stack to do. */
.s-card-footer {
  display: flex; align-items: center; gap: 10px; margin-top: auto;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.s-card-footer .s-form { margin: 0; }
.s-card-footer .s-form + .s-form { margin-left: 0; }
.s-card-footer .s-form-approve:empty { display: none; }
.s-skip-link {
  background: none; border: none; cursor: pointer; padding: 10px 4px;
  font-family: var(--font-rounded); font-weight: 700; font-size: 13.5px;
  color: rgba(42,26,69,.55);
}
.s-skip-link:hover { color: var(--ink); text-decoration: underline; }
.s-approve-btn { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.s-approve-btn svg { width: 14px; height: 14px; }

.s-card-menu { position: relative; margin-left: 4px; }
.s-kebab-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line);
  background: transparent; color: var(--ink); cursor: pointer; font-size: 16px;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .16s var(--ease);
}
.s-kebab-btn:hover { background: var(--paper); }
.s-card-menu-dropdown {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 20;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 32px -16px rgba(42,26,69,.35); padding: 6px; min-width: 120px;
}
.s-menu-delete {
  display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; padding: 8px 10px; border-radius: 8px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--coral-deep);
}
.s-menu-delete:hover { background: var(--paper); }

.s-card-loop { align-items: center; justify-content: center; text-align: center; }
.s-card-loop .s-card-top { justify-content: center; padding-left: 0; }
.s-card-loop .s-loop-copy {
  font-family: var(--font-rounded); font-weight: 600; font-size: 13px;
  color: rgba(42,26,69,.6); margin: 0 0 20px; max-width: 380px;
}
.s-loop-btn { padding-left: 28px; padding-right: 28px; }

.empty-state-flip {
  position: absolute; inset: 0; background: var(--evergreen); border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--paper); opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease); overflow: hidden; padding: 20px;
}
.empty-state-flip.show { opacity: 1; pointer-events: auto; }
.empty-state-flip h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 10px 0 4px; color: var(--paper); }
.empty-state-flip p { font-family: var(--font-rounded); font-weight: 600; font-size: 13px; opacity: .7; margin: 0; }
.empty-badge {
  width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--gold-ink);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  animation: s-pop .5s var(--ease) both;
}
@keyframes s-pop { from { transform: scale(0); } 60% { transform: scale(1.15); } to { transform: scale(1); } }
.confetti-dot { position: absolute; border-radius: 3px; opacity: 0; }

/* Generic inline button spinner -- shown next to a button's label while
   a form submits, so a full-page POST/redirect (no other loading
   feedback) doesn't read as "did that actually do anything?" during
   the round trip. White border/top-color assumes it sits on a
   btn-primary (coral) background; swap if reused on a lighter button. */
.btn-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 60px 20px; color: rgba(42,26,69,.5); border:1px solid black; border-radius:10px;}
.empty-state h3 { color: var(--ink); margin-bottom: 8px; }

/* ---- Today: view toggle + list view ---- */
.view-toggle { display: flex; gap: 4px; background: rgba(42,26,69,.06); border-radius: 999px; padding: 3px; flex-shrink: 0; margin-left: auto; }
.view-toggle-btn {
  display: flex; align-items: center; gap: 5px; border: none; background: transparent;
  font-family: var(--font-rounded); font-weight: 700; font-size: 12px; color: rgba(42,26,69,.55);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease);
}
.view-toggle-btn svg { width: 13px; height: 13px; }
.view-toggle-btn:hover { color: var(--ink); }
.view-toggle-btn.active { background: var(--paper-raised); color: var(--ink); box-shadow: 0 2px 6px -2px rgba(42,26,69,.25); }

.list-rows { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.list-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px;
}
.list-row-info { flex: 1; min-width: 0; }
.list-row-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.list-row-info h4 { font-family: var(--font-rounded); font-weight: 700; font-size: 14.5px; margin: 2px 0 4px; line-height: 1.35; }
.list-row-info .sub { font-size: 12.5px; color: rgba(42,26,69,.55); }
.list-row-contact-link { color: inherit; font-weight: 600; text-decoration: none; }
.list-row-contact-link:hover { text-decoration: underline; }
.list-row-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.list-row-actions form { margin: 0; }
.list-row-actions .btn { width: 100px; justify-content: center; }

.pill-type-gift { background: var(--gold-soft); color: var(--gold-ink); }
.pill-type-email { background: #E4EEF7; color: #2A5D8A; }
.pill-type-text { background: var(--mint); color: var(--mint-ink); }
.pill-type-handwritten_note { background: #F3E4F7; color: #6A2D8A; }
/* Flow recommendation cards share the s-card/s-badge/pill shape used by
   suggestion cards (see dashboard/index.html + today.js, which treats
   both as one merged, sortable stack) but get their own accent -- a
   soft lavender tying back to --evergreen-light, distinct from every
   pill-type-* above so a recommendation never reads as a 4th action
   type by mistake. */
.s-card-icon-recommendation { background: #EDE8F5; color: var(--evergreen-light); }

/* Filler cards (account/contact/discovery nudges -- see
   app/services/filler_actions.py) reuse the same s-card shape and
   build/dismiss form convention as a flow recommendation, but get their
   own accent -- a warm sand tone distinct from both the pill-type-*
   colors and the recommendation's lavender, so a filler card never
   reads as a real suggestion or recommendation by mistake. */
.s-card-icon-filler { background: #FBEFD8; color: var(--gold-ink); }

/* ---- Contact detail header ---- */
.contact-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .contact-header-actions { width: 100%; }
  .contact-header-actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 640px) {
  /* Was flex-wrap:wrap on the row, which let the two badges (a short
     flex item) and .list-row-info (tall, once it has a gift box/note
     in it) end up as separate columns instead of stacking -- the
     badges' column would be short, leaving a large blank gap beside
     it up to .list-row-info's full height. Column stacking removes
     the ambiguity: badges, then info, then actions, always in that
     vertical order and always full width. */
  .list-row { flex-direction: column; align-items: stretch; }
  .list-row-badges, .list-row > .status-pill { align-self: flex-start; }
  .list-row-actions { flex-direction: row; width: 100%; }
  .list-row-actions .btn { flex: 1; width: auto; }
}

/* ---- Contacts: search, filter chips, cards ---- */
.search-wrap { position: relative; margin-bottom: 14px; max-width: 420px; }
.search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .4; pointer-events: none; }
.search-wrap input {
  width: 100%; font-family: var(--font-body); font-size: 15px; padding: 12px 42px 12px 44px;
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper-raised); color: var(--ink);
  outline: none; transition: border-color .2s;
}
.search-wrap input:focus { border-color: var(--coral); }
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
  align-items: center; justify-content: center; cursor: pointer; color: var(--evergreen-light);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.search-clear:hover { background: var(--paper); color: var(--ink); }
.search-clear svg { position: static; width: 15px; height: 15px; opacity: 1; pointer-events: auto; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 24px; }
.chip {
  font-family: var(--font-rounded); font-weight: 700; font-size: 13px; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper-raised);
  color: var(--ink); opacity: .65; text-decoration: none; transition: all .2s var(--ease); flex-shrink: 0;
  display: inline-block;
}
.chip.active { opacity: 1; background: var(--evergreen); color: var(--paper); border-color: var(--evergreen); }
.chip:hover { opacity: 1; }

.catalog-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.catalog-filter { display: flex; flex-direction: column; gap: 5px; }
.catalog-filter label {
  font-family: var(--font-rounded); font-weight: 700; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(42,26,69,.5);
}
.catalog-filter select {
  font-family: var(--font-body); font-size: 14px; padding: 9px 12px; min-width: 140px;
  border-radius: 10px; border: 1.5px solid var(--line); background: var(--paper-raised);
  color: var(--ink); outline: none; transition: border-color .2s;
}
.catalog-filter select:focus { border-color: var(--coral); }
.catalog-filter input[type="range"] { width: 160px; accent-color: var(--coral); }
.catalog-filters-clear {
  font-family: var(--font-body); font-size: 12.5px; color: var(--coral-deep); text-decoration: underline;
  background: none; border: none; cursor: pointer; padding: 0 0 9px;
}
@media (max-width: 640px) {
  .catalog-filters { gap: 12px 18px; }
  .catalog-filter input[type="range"] { width: 130px; }
}

.contact-card-row {
  display: flex; align-items: center; gap: 14px; background: var(--paper-raised); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 14px 16px; margin-bottom: 10px; text-decoration: none; color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.contact-card-row:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(42,26,69,.3); border-color: var(--coral); }
.contact-card-row .info { flex: 1; min-width: 0; }
.contact-card-row h4 { font-family: var(--font-rounded); font-weight: 700; font-size: 15px; margin: 0 0 3px; }
.contact-card-row .sub { font-size: 12.5px; color: rgba(42,26,69,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-card-row .tags { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.contact-card-row .chevron { opacity: .3; flex-shrink: 0; }
.empty-state h3 { color: var(--evergreen); margin-bottom: 8px; }

/* ---- Flow cards (Campaigns list + Flow Library) ---- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.toggle-row strong { font-family: var(--font-rounded); font-size: 15px; }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: var(--line); border-radius: 999px; cursor: pointer;
  transition: background .2s var(--ease);
}
.switch-track::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s var(--ease);
}
.switch input:checked + .switch-track { background: var(--coral); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--coral); outline-offset: 2px; }
.switch.switch-danger input:checked + .switch-track { background: var(--danger); }

.confirm-dialog {
  border: none; border-radius: 20px; padding: 24px 26px;
  background: var(--paper-raised); box-shadow: 0 20px 50px -20px rgba(42,26,69,.5);
  max-width: 420px; width: calc(100% - 40px);
}
.confirm-dialog::backdrop { background: rgba(42,26,69,.35); }
.confirm-dialog h2 { font-size: 20px; }
.action-dialog { max-width: 560px; }
.action-dialog h2 { margin-top: 0; margin-bottom: 16px; }
.llm-example-box {
  position: relative; background: var(--paper-raised); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 12px 14px 12px 18px; font-size: 13.5px; font-style: italic;
}
.llm-example-box::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px;
  border-radius: 4px; background: var(--gold);
}

.priority-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--evergreen); color: #fff;
  font-size: 12px; font-weight: 700;
}

.contact-card {
  background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 20px;
  padding: 24px 26px; margin-bottom: 20px;
}
.contact-card-section { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.contact-card-section:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.contact-card-section h2 { font-size: 18px; margin-bottom: 12px; }

/* ---- Order confirmation (receipt) ---- */
.order-success-badge {
  width: 64px; height: 64px; border-radius: 50%; background: var(--mint); color: var(--mint-ink);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  animation: s-pop .5s var(--ease) both;
}
.order-success-meta { text-align: center; color: rgba(42,26,69,.55); font-size: 13px; margin: -8px 0 24px; }
.order-receipt-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.order-receipt-table td { padding: 7px 0; }
.order-receipt-table td:last-child { text-align: right; }
.order-receipt-table tr.order-receipt-total td { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; font-weight: 700; font-size: 16px; }
.order-receipt-label { color: rgba(42,26,69,.55); }

.flow-card {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 16px 18px; margin-bottom: 10px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.flow-card:hover { border-color: var(--coral); box-shadow: 0 10px 22px -16px rgba(42,26,69,.3); }
.flow-card.is-inactive { opacity: .6; }
.flow-card .flow-info { flex: 1; min-width: 0; }
.flow-card h4 {
  font-family: var(--font-rounded); font-weight: 700; font-size: 15px; margin: 0 0 5px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.flow-card .flow-desc { margin: 0 0 6px; font-size: 13.5px; color: rgba(42,26,69,.75); }
.flow-card .flow-meta { font-size: 12.5px; color: rgba(42,26,69,.55); }
.flow-card .flow-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.info-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--paper-raised); border: 1.5px solid var(--line);
  font-family: var(--font-body); font-style: italic; font-weight: 700; font-size: 12px;
  color: rgba(42,26,69,.55); cursor: default; vertical-align: middle;
}
.info-icon:hover, .info-icon:focus { border-color: var(--coral); color: var(--coral-deep); outline: none; }
.info-icon-popover {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  width: 280px; padding: 12px 14px; border-radius: 12px;
  background: var(--ink); color: var(--paper); font-style: normal; font-weight: 400;
  font-size: 13px; line-height: 1.45; box-shadow: 0 12px 28px -12px rgba(42,26,69,.45);
}
.info-icon-popover a { color: var(--mint); }
.info-icon:hover .info-icon-popover, .info-icon:focus .info-icon-popover { display: block; }

/* ---- Gift catalog: product card grid ---- */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.catalog-card {
  background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 18px;
  overflow: hidden; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.catalog-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(42,26,69,.3); }
.catalog-card.is-excluded { opacity: .55; }
.catalog-card-media {
  aspect-ratio: 1 / 1; background: var(--paper); display: flex; align-items: center;
  justify-content: center; overflow: hidden;
}
.catalog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.catalog-card-media .avatar-placeholder { width: 100%; height: 100%; border-radius: 0; font-size: 34px; }
.catalog-card-body { padding: 12px 14px 14px; }
.catalog-card h4 { font-family: var(--font-rounded); font-weight: 700; font-size: 14.5px; margin: 0 0 2px; }
.catalog-card .price { font-size: 13px; color: rgba(42,26,69,.6); margin: 0 0 8px; }
.catalog-card details summary {
  cursor: pointer; list-style: none; font-family: var(--font-rounded); font-weight: 700;
  font-size: 12px; color: var(--coral-deep); display: flex; align-items: center; gap: 4px;
}
.catalog-card details summary::-webkit-details-marker { display: none; }
.catalog-card details summary::marker { content: ""; }
.catalog-card details[open] summary { margin-bottom: 8px; }
.catalog-card .catalog-card-desc { font-size: 12.5px; line-height: 1.5; color: rgba(42,26,69,.7); margin: 0 0 8px; padding-left: 18px; }
.catalog-card .catalog-card-desc li { margin-bottom: 2px; }
.catalog-card .catalog-card-actions { margin-top: 10px; }

@media (max-width: 879px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .catalog-card-body { padding: 8px 9px 10px; }
  .catalog-card h4 { font-size: 12.5px; }
  .catalog-card .price { font-size: 11.5px; margin-bottom: 5px; }
  .catalog-card details summary { font-size: 11px; }
  .catalog-card .catalog-card-desc { font-size: 11px; padding-left: 14px; }
  .catalog-card .catalog-card-actions .btn { padding: 7px 12px; font-size: 12px; }
}

/* ---- Form sections (replaces bare <fieldset>/<legend> look in flow builders) ---- */
.form-section {
  background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 18px 20px; margin-bottom: 16px;
}
.form-section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--evergreen);
  margin: 0 0 14px;
}
.form-section .field:last-child { margin-bottom: 0; }

.subsection-title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--evergreen);
  margin: 0 0 4px;
}


/* ---- Preview panel (dry-run results on flow builders) ---- */
.preview-panel {
  position: relative; background: var(--paper-raised); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 20px 20px 20px 24px; margin-top: 24px;
}
.preview-panel::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 5px;
  border-radius: 4px; background: var(--gold);
}
.preview-panel h2 { font-size: 17px; margin-bottom: 4px; }
.preview-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.preview-item:last-child { border-bottom: none; padding-bottom: 0; }
.preview-item .preview-name { font-family: var(--font-rounded); font-weight: 700; font-size: 14.5px; }
.preview-item .preview-detail { margin-top: 6px; font-size: 13px; }

/* ---- Flow sentence + review stats (wizard Review step) ---- */
.flow-sentence-card {
  background: var(--mint); border-radius: 16px; padding: 18px 20px; margin-bottom: 20px;
}
.flow-sentence {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.4;
  color: var(--mint-ink); margin: 0 0 14px;
}
.flow-stats-row { display: flex; gap: 24px; flex-wrap: wrap; }
.flow-stat-value { font-family: var(--font-rounded); font-weight: 700; font-size: 20px; color: var(--mint-ink); }
.flow-stat-label { font-size: 11.5px; color: rgba(30,68,48,.7); margin-top: 2px; }

/* ---- Timing sentence row (Trigger step: "5 days after First Contact") ---- */
.timing-sentence-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.timing-amount-row { display: flex; gap: 6px; align-items: center; }
.timing-sentence-amount {
  width: 56px; text-align: center; padding: 10px 6px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--paper-raised); font-family: var(--font-body); font-size: 14.5px;
}
.timing-sentence-select {
  padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--paper-raised); font-family: var(--font-body); font-size: 14.5px; cursor: pointer;
}
.timing-event-select { flex: 1; min-width: 180px; }
.timing-direction-row { display: flex; gap: 6px; margin: 0; }
.timing-direction-option {
  text-align: center; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--paper-raised); cursor: pointer; font-family: var(--font-rounded); font-weight: 700; font-size: 13.5px;
  white-space: nowrap;
}
.timing-direction-option:has(input:checked) { border-color: var(--mint-ink); background: var(--mint); }
.timing-direction-option input { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 560px) {
  .timing-sentence-row { flex-direction: column; align-items: stretch; }
  .timing-amount-row { align-self: flex-start; }
  .timing-direction-row { width: 100%; }
  .timing-direction-option { flex: 1; }
  .timing-event-select { width: 100%; }
}

/* ---- Safeguards card (Who step) ---- */
.flow-sentence-bar {
  background: var(--mint); color: var(--mint-ink); border-radius: 14px; padding: 14px 18px;
  margin-bottom: 20px; font-size: 16px; line-height: 1.5; font-style: italic;
}
.flow-sentence-bar-label {
  font-family: var(--font-rounded); font-weight: 700; font-size: 11px; letter-spacing: .03em;
  text-transform: uppercase; opacity: .7; font-style: normal; display: block; margin-bottom: 4px;
}
.safeguards-card {
  display: flex; gap: 12px; background: var(--paper); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
}
.safeguards-card-icon {
  width: 32px; height: 32px; border-radius: 50%; background: var(--mint); color: var(--mint-ink);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700;
}
.safeguards-card-title { font-family: var(--font-rounded); font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }

/* ---- Generic condition builder rows ---- */
.condition-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.condition-row { display: flex; gap: 8px; align-items: center; }
.condition-row select, .condition-row input { font-size: 13.5px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-raised); }
.condition-field-select { flex: 1.3; min-width: 0; }
.condition-operator-select { flex: 1; min-width: 0; }
.condition-value-input { flex: 1; min-width: 0; }
.condition-remove-btn {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--line);
  background: transparent; color: var(--coral-deep); cursor: pointer; font-size: 15px; line-height: 1;
}
.condition-remove-btn:hover { background: var(--paper); }

/* ---- Flow list: "When / Then" cards (campaigns/list.html) ---- */
.flow-card-v2-list { display: flex; flex-direction: column; gap: 12px; }
.flow-card-v2 {
  position: relative; background: var(--paper-raised); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 18px 20px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.flow-card-v2:hover { border-color: var(--coral); box-shadow: 0 10px 22px -16px rgba(42,26,69,.3); }
.flow-card-v2.is-inactive { opacity: .6; }
.flow-card-v2-link { display: block; text-decoration: none; color: inherit; padding-right: 40px; }
.flow-card-v2-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.flow-card-v2-header h4 { font-family: var(--font-rounded); font-weight: 700; font-size: 15.5px; margin: 0; }

.flow-when-then { display: flex; flex-direction: column; gap: 10px; }
.flow-when-then-row { display: flex; align-items: center; gap: 10px; }
.flow-when-then-label {
  font-family: var(--font-rounded); font-weight: 700; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(42,26,69,.4); width: 42px; flex-shrink: 0;
}
.flow-when-then-card {
  display: flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 12px;
  padding: 8px 12px; flex: 1; min-width: 0;
}
.flow-when-then-icon {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.flow-when-then-icon svg { width: 14px; height: 14px; }
.flow-when-then-icon-event { background: #E4EEF7; color: #2A5D8A; }
.flow-when-then-icon-time { background: var(--gold-soft); color: var(--gold-ink); }
.flow-when-then-icon-action { background: var(--mint); color: var(--mint-ink); }
.flow-when-then-title { font-family: var(--font-rounded); font-weight: 700; font-size: 13px; }
.flow-when-then-sub { font-size: 11.5px; color: rgba(42,26,69,.55); margin-top: 1px; }

.flow-card-menu { position: absolute; top: 16px; right: 16px; }

/* --- App modal (native <dialog>-based) ---
   First real modal in the app -- used for Add/Edit Important Date.
   Relies on <dialog>'s built-in top-layer rendering + backdrop, so no
   JS is needed beyond calling .showModal()/.close(). */
.app-modal {
  border: none;
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 440px;
  background: var(--paper-raised);
  box-shadow: 0 12px 40px rgba(42,26,69,0.25);
}
.app-modal::backdrop {
  background: rgba(42,26,69,0.45);
}
.app-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.app-modal-header h3 {
  font-family: var(--font-display);
  color: var(--evergreen);
  margin: 0;
}
.app-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--evergreen-light);
  cursor: pointer;
  padding: 0 4px;
}
.app-modal-close:hover { color: var(--evergreen); }
.important-date-chip {
  display: block;
  width: 100%;
  cursor: pointer;
  font-family: var(--font-body);
}