/* ==========================================================================
   campaigns.css — /review-campaigns only
   Written 2026-09-05 (late) for the simplify-and-port pass. Loads after
   feature-v2.css, feature-v3.css and home.css, all of which are shared and
   were not touched: this file exists so the page could be rebuilt without
   editing any of them.

   Five things worth knowing before editing:

   1. The device is a stepped strip, not a rail. Four dots: three across the
      top row on one hairline, and a fourth below starting a full-width step.
      The hairline is drawn per step as a ::before that bridges the grid gap,
      so it begins at the first dot and stops dead at the last one on each
      row rather than dangling past them. Do not replace it with one absolute
      line: the wrap at 992px and 700px would break it.
   2. Each step carries exactly one screen, and each screen is a port of real
      product code named in the page's header comment. Where a value here
      looks odd against the rest of the site it is almost always the
      product's: the 14px form labels (#1a1a1a for the provider half, the
      Cloutly blue #003dff for Cloutly's half), the 4px input radius, the 1px
      #d1d5db input border, the 30px provider mark with its 15px gutter, the
      25px #f1f0f5 contact avatar, the 20px SMS-preview radius over a
      #f1f0f5 bubble with a 36px tail, the campaign table's 4px row spacing
      and centred value cells.
   3. Two site rules override the product inside those ports and nothing else
      does. Nothing renders under 13px (the product runs .textHelp at 10px
      and the campaign badges at 10px), and muted text is #5b6076, which
      measures 6.21:1 on white and 5.80 on --v2-card. Do not lighten it.
   4. The screens are decoration for the sentence beside them, so every one
      carries aria-hidden="true" on the page and none of them is a table a
      screen reader has to walk. The Day 30 table is a real <table> because
      it is a table; it sits inside the aria-hidden wrapper.
   5. The calculator, the results cards and the matrix are feature-v3.css's
      and are untouched here. If something moves in those, it moved there.
   ========================================================================== */

/* ==========================================================================
   THE TOUR: a stepped strip
   ========================================================================== */
.cx-tour { padding-top: 0; }
.cx-tour .head { margin-bottom: clamp(30px, 3.4vw, 46px); }

.cx-strip {
  --cx-gap: clamp(20px, 2.4vw, 30px);
  --cx-dot: 13px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--cx-gap);
  row-gap: clamp(34px, 4vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx-step { position: relative; padding-top: 30px; }

/* the rail segment: starts at this dot's centre and runs across the gap into
   the next dot. The last step of each row gets a stub so the line stops. */
.cx-step::before {
  content: "";
  position: absolute;
  left: calc(var(--cx-dot) / 2);
  top: calc(var(--cx-dot) / 2 - 1px);
  width: calc(100% + var(--cx-gap) - var(--cx-dot) / 2);
  height: 2px;
  border-radius: 2px;
  background: var(--v2-line);
}
.cx-strip > .cx-step:nth-child(3)::before,
.cx-strip > .cx-step--wide::before { width: 0; }
/* the last marker is the outcome, so it is a solid disc rather than a ring:
   three hollow markers on a line, then the one the line was heading for */
.cx-strip > .cx-step--wide::after { background: var(--blue); box-shadow: none; }

.cx-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cx-dot);
  height: var(--cx-dot);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--blue);
}

.cx-day {
  display: block;
  font: 600 13px/1.3 var(--font-display);
  letter-spacing: .01em;
  color: var(--blue);
}
.cx-step h3 {
  margin-top: 7px;
  font: 700 17.5px/1.32 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.cx-step > p,
.cx-wide-copy > p {
  margin-top: 9px;
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--v2-body);
  text-wrap: pretty;
}
.cx-step a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.cx-step a:hover { text-decoration-thickness: 2px; }

/* the fourth step spans the strip: copy left, the wide screen right */
.cx-step--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  column-gap: clamp(26px, 3vw, 44px);
  align-items: start;
}
.cx-wide-copy { max-width: 40ch; }

/* ---------- the shared screen shell ---------- */
.cx-shot {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--v2-line), 0 18px 44px -30px rgba(15, 13, 25, .45);
  font-family: var(--font-body);
}
.cx-step--wide .cx-shot { margin-top: 0; }

/* the product's form labels: 14px, #1a1a1a for the provider, blue for Cloutly */
.cx-lbl { font: 400 14px/1.4 var(--font-body); color: #1a1a1a; }
.cx-lbl--cl { color: var(--blue); }
.cx-lbl--gap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--v2-line); }

/* ==========================================================================
   SCREEN 1 · Square's own automation tab
   NativeAutomations/Square/Tabs/SquareOrders.js + Square/index.module.scss
   ========================================================================== */
.cx-sq-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 15px; align-items: start; }
.cx-sq-row + .cx-sq-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--v2-line); }
.cx-pmark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); }
.cx-pmark .icon { width: 19px; height: 19px; }
.cx-pmark--cl { background: var(--ghost); box-shadow: none; }
.cx-pmark--cl .icon { width: 17px; height: 17px; }

.cx-chk { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cx-chk li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; font: 400 13.5px/1.35 var(--font-body); color: #5b6076; }
.cx-chk li.on { color: var(--ink); font-weight: 500; }
.cx-chk i { width: 16px; height: 16px; margin-top: 1px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #cbd0e0; }
.cx-chk li.on i {
  background: var(--blue) no-repeat center / 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.6 3.6L13.5 4.5'/%3E%3C/svg%3E");
  box-shadow: none;
}

/* the product's selects: 1px #d1d5db, 4px radius, 8px 12px padding */
.cx-sel { margin-top: 7px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px; font: 400 13.5px/1.35 var(--font-body); color: var(--ink); }
.cx-two { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
.cx-sel--n { text-align: center; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   SCREEN 2 · the SMS preview
   ReviewsCampaigns/ReviewCampaignSMSPreview/index.js + index.module.scss
   ========================================================================== */
.cx-sms { padding: 22px 22px 20px; border-radius: 20px; background: linear-gradient(180deg, #fafbfe, #fff); box-shadow: 0 0 0 1px var(--v2-line), 0 16px 48px -28px rgba(15, 13, 25, .45); }
.cx-thread { display: grid; gap: 8px; max-width: 360px; }
.cx-from { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; font: 600 14px/1.25 var(--font-display); color: var(--ink); }
.cx-from i { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-style: normal; }
.cx-from i .icon { width: 15px; height: 15px; }
.cx-from span { grid-column: 2; font: 400 13px/1.3 var(--font-body); color: #5b6076; }
/* the received bubble: soft grey, 18px corners, a real tail in the bottom-left corner drawn with a radial mask */
.cx-bub { position: relative; margin-left: 8px; padding: 12px 14px 13px; border-radius: 18px 18px 18px 6px; background: #eef0f6; font: 400 15px/1.5 var(--font-body); color: var(--ink); }
.cx-bub::before { content: ""; position: absolute; left: -7px; bottom: 0; width: 14px; height: 14px; background: #eef0f6; clip-path: path("M14 14 C 8 14, 2 10, 0 14 C 5 12, 9 8, 14 0 Z"); }
.cx-bub p + p { margin-top: 8px; }
.cx-link { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cx-stamp { margin: 0 0 0 8px; font: 400 13px/1.3 var(--font-body); color: #5b6076; }

/* ==========================================================================
   SCREEN 3 · the contact record and "Already invited"
   DashboardContacts/ContactsTable.js + ContactStartReviewCampaign.js
   ========================================================================== */
.cx-th { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 0 2px 9px; border-bottom: 1px solid var(--v2-line); font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.cx-cr { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 2px; }
.cx-av { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--field); font: 600 13px/1 var(--font-display); color: var(--ink); }
.cx-who { min-width: 0; }
.cx-who b { display: block; font: 600 13.5px/1.35 var(--font-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-who small { display: block; font: 400 13px/1.35 var(--font-body); color: #5b6076; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-st { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1.3 var(--font-display); color: var(--ink); white-space: nowrap; }
.cx-prov { width: 14px; height: 14px; opacity: .85; }

.cx-cr--dis { grid-template-columns: 16px minmax(0, 1fr); row-gap: 6px; padding-bottom: 2px; }
.cx-box { width: 16px; height: 16px; border-radius: 3px; background: #cbd0e0; }
.cx-box.on { background: #b7bdd0 no-repeat center / 10px 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.6 3.6L13.5 4.5'/%3E%3C/svg%3E"); }
.cx-cname { font: 500 13.5px/1.35 var(--font-body); color: var(--ink); }
.cx-cr--dis .cx-cname { color: #5b6076; }
.cx-ai { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.cx-ai::before {
  content: "";
  width: 15px; height: 15px; flex: none;
  background: no-repeat center / 15px 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6076' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.6 3.6L13.5 4.5'/%3E%3C/svg%3E");
}
.cx-ai a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   SCREEN 4 · the campaign row and its details table
   ReviewsCampaignsGrid/ReviewsCampaignsGridItem.js + ReviewsCampaignDetailsTable.js
   ========================================================================== */
.cx-tbl { padding: 14px 16px 16px; }
.cx-camp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-bottom: 13px; border-bottom: 1px solid var(--v2-line); }
.cx-camp .cx-cname { font: 600 14px/1.35 var(--font-display); color: var(--blue); }
.cx-created { font: 400 13px/1.35 var(--font-body); color: #5b6076; }
.cx-tot { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1.35 var(--font-body); color: #5b6076; white-space: nowrap; }
.cx-tot b { padding: 4px 9px; border-radius: 3px; background: var(--field); font: 600 13px/1.3 var(--font-display); color: var(--ink); }

.cx-tbl table { width: 100%; margin-top: 10px; border-collapse: separate; border-spacing: 0 4px; }
.cx-tbl th { padding: 4px 6px; text-align: left; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.cx-tbl td { padding: 9px 6px; background: #fafbfe; font: 400 13.5px/1.3 var(--font-body); color: var(--ink); white-space: nowrap; }
.cx-tbl td:first-child { border-radius: 7px 0 0 7px; padding-left: 12px; }
.cx-tbl td:last-child { border-radius: 0 7px 7px 0; }
.cx-tbl th:nth-child(n+4), .cx-tbl td:nth-child(n+4) { text-align: center; width: 11%; font-variant-numeric: tabular-nums; }
.cx-tbl tfoot td { background: transparent; padding-top: 6px; }
.cx-tbl tfoot strong { font: 700 13.5px/1.3 var(--font-display); color: var(--ink); }
.cx-badge { display: inline-block; padding: 4px 8px; border-radius: 3px; background: var(--v2-card); font: 500 13px/1.2 var(--font-display); color: #5b6076; }

/* ==========================================================================
   NARROWER
   ========================================================================== */
@media (max-width: 991px) {
  .cx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two per row now, so steps 2 and 3 are both last-in-row and neither draws
     a segment: a line that runs into empty space reads as a mistake */
  .cx-strip > .cx-step:nth-child(2)::before,
  .cx-strip > .cx-step:nth-child(3)::before { width: 0; }
  .cx-step--wide { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .cx-wide-copy { max-width: 62ch; }
}

@media (max-width: 700px) {
  .cx-strip { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .cx-strip > .cx-step::before { width: 0; }
  .cx-step { padding-top: 0; padding-left: 26px; }
  .cx-step--wide { padding-left: 26px; }
  /* on one column the dots become a vertical run, so the line turns with it */
  .cx-step::after { top: 4px; }
  .cx-strip > .cx-step:not(:last-child) { padding-bottom: 0; }
  .cx-strip > .cx-step:not(:last-child)::before {
    width: 2px;
    height: calc(100% + 30px - var(--cx-dot) - 4px);
    top: calc(4px + var(--cx-dot));
    left: calc(var(--cx-dot) / 2 - 1px);
  }
  .cx-sms { padding: 18px 16px 18px; }
  .cx-tbl { overflow-x: auto; }
  .cx-tbl table { min-width: 460px; }
}