/* ============================================================
   MAIN STYLES
   Layout, components, forms, product grid, campaigns, modals
   ============================================================ */

@font-face {
  font-family: 'Lexi';
  src: url('../fonts/Lexi-Regular-0.1.0.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexy';
  src:
    local('Lexi'),
    url('../fonts/Lexi-Regular-0.1.0.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* Self-hosted Montserrat (variable axis 100..900) — Layered Homeservices SVG
   templates reference Montserrat at weights 250/300/400/600/700. CSP is
   strict (style-src 'self'; font-src 'self'), so Google Fonts CDN is
   blocked. Self-hosting the variable font keeps fidelity end-to-end and
   avoids partner-iframe CDN dependency. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Self-hosted Raleway (variable axis 100..900). Layered templates reference
   Raleway at weight 900 (e.g. "YOUR LOGO" badge in Garage Door Tune Up).
   Same CSP constraint as Montserrat — Google Fonts CDN blocked. */
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/Raleway-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Self-hosted Open Sans (variable axis 300..800). Layered templates reference
   Open Sans at weight normal/400 (e.g. small footer text). Same CSP
   constraint as above. */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-VariableFont_wdth-wght.woff2') format('woff2-variations'),
       url('../fonts/OpenSans-VariableFont_wdth-wght.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Self-hosted Playfair Display (variable axis 400..900, OFL-1.1 — see
   fonts/PlayfairDisplay-OFL.txt). Canvas Editor Figma-parity Slice 1b: the
   canvas-builder font picker offers Playfair Display as the default serif and
   we self-host to avoid Google Fonts CDN under CSP (`font-src 'self'`). */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2-variations'),
       url('../fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* PropStream fonts — served from S3 via /images/ CloudFront behavior */
@font-face { font-family: 'FG Bonnies Font'; src: url('/images/fonts/propstream/FGBonniesFont-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'You Wont Bring Me Down'; src: url('/images/fonts/propstream/YouWontBringMeDown-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lindy Bold'; src: url('/images/fonts/propstream/Lindy-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lindy'; src: url('/images/fonts/propstream/Lindy-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'AvenirNext'; src: url('/images/fonts/propstream/AvenirNext-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'AvenirNext'; src: url('/images/fonts/propstream/AvenirNext-Bold-PropStream.ttf') format('truetype'); font-weight: bold; font-display: swap; }
@font-face { font-family: 'Michele Hand'; src: url('/images/fonts/propstream/MicheleHand-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'CTorres'; src: url('/images/fonts/propstream/CTorres-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'SignPainter'; src: url('/images/fonts/propstream/SignPainter-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'SignPainter'; src: url('/images/fonts/propstream/SignPainter-Bold-PropStream.ttf') format('truetype'); font-weight: bold; font-display: swap; }
@font-face { font-family: 'Impact'; src: url('/images/fonts/propstream/Impact-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Georgia'; src: url('/images/fonts/propstream/Georgia-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Georgia'; src: url('/images/fonts/propstream/Georgia-Bold-PropStream.ttf') format('truetype'); font-weight: bold; font-display: swap; }
@font-face { font-family: 'Arial'; src: url('/images/fonts/propstream/Arial-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Arial'; src: url('/images/fonts/propstream/Arial-Bold-PropStream.ttf') format('truetype'); font-weight: bold; font-display: swap; }
@font-face { font-family: 'Verdana'; src: url('/images/fonts/propstream/Verdana-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Verdana'; src: url('/images/fonts/propstream/Verdana-Bold-PropStream.ttf') format('truetype'); font-weight: bold; font-display: swap; }
@font-face { font-family: 'Comic Sans MS'; src: url('/images/fonts/propstream/ComicSansMS-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Comic Sans MS'; src: url('/images/fonts/propstream/ComicSansMS-Bold-PropStream.ttf') format('truetype'); font-weight: bold; font-display: swap; }
@font-face { font-family: 'Courier New'; src: url('/images/fonts/propstream/CourierNew-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Courier New'; src: url('/images/fonts/propstream/CourierNew-Bold-PropStream.ttf') format('truetype'); font-weight: bold; font-display: swap; }
@font-face { font-family: 'Tahoma'; src: url('/images/fonts/propstream/Verdana-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Tahoma'; src: url('/images/fonts/propstream/Verdana-Bold-PropStream.ttf') format('truetype'); font-weight: bold; font-display: swap; }
@font-face { font-family: 'A Hundred Miles'; src: url('/images/fonts/propstream/AHundredMiles-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Levy'; src: url('/images/fonts/propstream/Levy-PropStream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Your Font'; src: url('/images/fonts/propstream/YourFont-PropStream.ttf') format('truetype'); font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }

input, select, textarea, button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

:root {
  /* Xinyu primary palette — source of truth */
  --ps-primary: #128292;
  --ps-primary-hover: #0E6673;
  --ps-primary-active: #0A464F;
  --ps-light-blue: #E2F7FA;
  --ps-teal-50: #E2F7FA;
  --ps-teal-100: #B8DFE6;
  --ps-error: #CA1551;                /* Rose/500 — warnings and errors */
  --ps-rose-50: #FDEDF2;
  --ps-rose-500: #CA1551;
  --ps-rose-700: #A81143;
  --ps-periwinkle-50: #EFF0FB;
  --ps-periwinkle-500: #5B68C3;
  --ps-campaign-detail-scheduled-bg: #E8EBFC;
  /* Additional design-system tokens named in the Figma tracking spec */
  --ps-emerald: #5AC471;              /* Special Colors/Emerald — good scores */
  --ps-grey-50: #EFF2F6;              /* Grey/50 — alt background vs White */
  --ps-grey-300: #CED1D6;             /* Grey/300 — connector rails */
  --ps-grey-500: #99A0AA;             /* Grey/500 — secondary/caption text */
  --ps-grey-600: #808894;             /* Grey/600 — hairline dividers */
  --ps-grey-700: #66707D;             /* Grey/700 — de-emphasised label text */
  /* Legacy aliases — keep for back-compat with existing var(--ps-orange*) and var(--ps-teal) refs */
  --ps-teal: var(--ps-primary);
  --ps-orange: var(--ps-primary);
  --ps-orange-hover: var(--ps-primary-hover);
  --ps-orange-active: var(--ps-primary-active);
  --ps-checkout: #F16722;
  --ps-checkout-hover: #d55a1d;
  --ps-checkout-active: #b84a17;
  --ps-dark: #3C4654;
  --ps-gray: #868686;
  --ps-light-gray: #DFE1E4;
  --ps-disabled-text: #8F98A6;
  --ps-bg: #f5f5f5;
  --ps-white: #ffffff;
  --ps-border: #DFE1E4;
  --ps-btn-height: 44px;
  --ps-btn-height-sm: 30px;
  --ps-btn-radius: 999px;
}

/* Utility Classes */
.container-sm { max-width: 400px; margin: 0 auto; }
.container-md { max-width: 500px; margin: 0 auto; }
.container-lg { max-width: 600px; margin: 0 auto; }
.card { background: var(--ps-white); border-radius: 12px; padding: 24px; }
.card-warning { background: #fff3e0; border-radius: 8px; padding: 16px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }
.mt-md { margin-top: 24px; }
.mb-md { margin-bottom: 24px; }
.text-center { text-align: center; }
.hidden { display: none !important; }
[hidden] { display: none !important; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  background: var(--ps-bg);
  color: var(--ps-dark);
  min-height: 100vh;
}

.header {
  background: var(--ps-white);
  border-bottom: 1px solid var(--ps-border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo { height: 32px; }

.header-right { display: flex; align-items: center; gap: 16px; }

.my-campaigns-btn {
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  min-height: var(--ps-btn-height-sm);
  padding: 0 14px;
  border-radius: var(--ps-btn-radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--ps-orange);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.my-campaigns-btn:hover {
  background: var(--ps-orange-hover);
  border-color: var(--ps-orange-hover);
  color: var(--ps-white);
}

.my-campaigns-btn:active {
  background: var(--ps-orange-active);
  border-color: var(--ps-orange-active);
  color: var(--ps-white);
}

.main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.page-subtitle {
  color: var(--ps-gray);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 32px;
}

/* PROPS-3029 follow-up (QA spacing report, 2026-08-05): the sender-setup
   heading block spanned the full page width at the left edge while the 600px
   content column centered below it, reading as a broken layout. Align the
   heading with the same column and give the embed CTA breathing room from the
   read-only form. No standalone Figma frame exists for this page (the current
   design flow is dashboard card → Marketing Profile modal), so this mirrors
   the column rhythm the rest of the flow already uses. */
#page-setup .page-title,
#page-setup .page-subtitle {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

#page-setup-embed {
  text-align: center;
  margin-bottom: 24px;
}

/* Campaign Type Cards */
.campaign-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto 40px;
}

@media (max-width: 768px) {
  .campaign-types { grid-template-columns: 1fr; }
}

.campaign-type-card {
  background: var(--ps-white);
  border: 2px solid var(--ps-border);
  border-radius: 12px;
  padding: 32px 24px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 190px;
}

.campaign-type-card:hover {
  border-color: var(--ps-orange);
}

.campaign-type-card.is-ineligible {
  cursor: not-allowed;
  opacity: 0.55;
}

.campaign-type-card.is-ineligible:hover {
  border-color: var(--ps-border);
}

/* Ryan 2026-06-03 (Figma PDF target): the selected card = teal border + a subtle
   light-teal fill (--ps-light-blue #E2F7FA), NOT gray and NOT plain white. The page
   background stays gray (--ps-bg); the Step 1 content sits in a white card
   (.dm-step1-card). This supersedes the earlier white-body / no-fill experiment.
   `--ps-orange` is a legacy alias for --ps-primary. */
.campaign-type-card.selected {
  border-color: var(--ps-primary);
  background: var(--ps-light-blue);
}

.campaign-type-icon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

.type-icon-svg {
  width: 56px;
  height: 56px;
}

.campaign-type-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.campaign-type-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--ps-gray);
}

/* Steps indicator */
.steps-row {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 32px;
  min-height: 40px;
}

.steps {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 0;
}

.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ps-border);
}

.step-dot.active { background: var(--ps-orange); }
.step-dot.completed { background: var(--ps-orange); opacity: 0.5; }

.my-campaigns-inline {
  position: absolute;
  /* PR-2 (2026-05-31): moved to the left so the Figma "Step X of Y" label can
     sit top-right (Ryan 5.7). My Campaigns is an iframe-only affordance not in
     the Figma header. */
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* PR-2 (2026-05-31): top-right "Step X of Y" label (Ryan 5.7). Text set by
   updateStepCountLabel() from the existing .step-dot indicators. */
.steps-count {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-muted, #6b7280);
}

/* PR-2 (2026-05-31) + Figma PDF target (Ryan 2026-06-03): Step 1 "Select a Direct
   Mail Type". Content sits in a white rounded card on the gray page (mirrors
   .review-order-card); the Deliver To + Direct Mail Name form is a 2-column row that
   stacks on narrow. Supersedes the earlier 420px-centered-column layout (PR #67). */
.dm-step1-card {
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 1120px;   /* Ryan 2026-06-03: wider card so cards + form breathe like Figma */
  margin: 0 auto;
}
.dm-step1-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.dm-step1-card-title { font-size: 18px; font-weight: 600; color: var(--ps-dark); margin: 0; }
.dm-step1-card-head .dm-total-leads { margin: 0; white-space: nowrap; }
/* Cards fill the card width (vs the standalone 820px-centered grid). */
.dm-step1-card .campaign-types { max-width: none; margin: 0; }

/* Figma PDF (Ryan 2026-06-04, source of truth — dropdown/mailing-address PDFs): desktop
   2-COLUMN — Deliver to + Remove Duplicate Addresses (under it) on the LEFT, Direct Mail
   Name on the RIGHT, side-by-side. Stacks only on genuinely narrow widths. (The earlier
   vertical stack was a smaller-viewport artifact.) */
.dm-step1-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}
.dm-step1-fields .form-group { margin-bottom: 0; }
/* Remove Duplicate Addresses sits directly below the Deliver to dropdown (left column). */
.dm-deliver-col > .dm-step1-dups { margin-top: 10px; }
@media (max-width: 768px) {
  .dm-step1-fields { grid-template-columns: 1fr; }
}

/* Remove Duplicate Addresses row — the ⓘ button is now a SIBLING of the <label>
   (not nested inside it), so the group is a flex row: [label] [ⓘ]. The :not([hidden])
   guard keeps the existing hide behavior (the `hidden` attr from applySelectionUI and
   the inline display:none from _applyRemoveDupsVisibility for Property both win). */
.dm-step1-dups { margin: 0; }
.dm-step1-dups:not([hidden]) { display: flex; align-items: center; gap: 8px; }
.dm-dups-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ps-dark);
  cursor: pointer;
}
.dm-step1-dups .js-remove-dups { width: 24px; height: 24px; }

/* Remove Duplicate Addresses info (ⓘ): a <button> (so its click is
   dispatched/preventDefault'd and never toggles the checkbox), styled as the
   Figma 16px teal-filled circle with a white lowercase "i" (no outlined Unicode
   glyph). The "i" lives in a .review-order-info-glyph span. */
button.review-order-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: var(--ps-primary);
  color: var(--ps-white);
  cursor: pointer;
  vertical-align: middle;
}
button.review-order-info:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 2px; }
.review-order-info-glyph {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  color: var(--ps-white);
  pointer-events: none;
}
/* Click-to-open info popover — Figma "deliver to both tooltip": teal-filled card,
   white text, rounded, drop shadow, an upward arrow pointing at the ⓘ, and a
   close × at top-right. */
.dm-dups-tooltip {
  position: absolute;
  z-index: 1000;
  max-width: 320px;
  background: var(--ps-primary);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 15px 44px 17px 18px;
  color: var(--ps-white);
}
.dm-dups-tooltip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: var(--dm-arrow-left, 18px);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--ps-primary);
}
.dm-dups-tooltip-title { font-weight: 700; font-size: 15px; color: var(--ps-white); margin-bottom: 6px; }
.dm-dups-tooltip-body { font-size: 13px; color: var(--ps-white); line-height: 1.45; }
.dm-dups-tooltip-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}
.dm-dups-tooltip-close:hover { color: var(--ps-white); }
.dm-dups-tooltip-close:focus-visible { outline: 2px solid var(--ps-white); outline-offset: 2px; border-radius: 2px; }

/* Phase 3: reusable hover+focus tooltip. The shared shell keeps the compact
   legacy treatment; campaign-detail actions opt into the exact 312×112 Figma
   component below. Built via tooltip.js (createElement + textContent only). */
.dm-tooltip {
  position: absolute;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  max-width: 260px;
  color: var(--ps-white);
  pointer-events: none; /* never blocks the cursor while hovering the trigger */
}
.dm-tooltip-bubble {
  position: relative;
  width: 100%;
  background: var(--ps-primary);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 10px 14px 12px 14px;
}
.dm-tooltip::after {
  content: '';
  position: absolute;
  left: var(--dm-tooltip-caret-left, 50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.dm-tooltip.dm-tooltip-below::after {
  top: -7px;
  border-bottom: 7px solid var(--ps-primary);
}
.dm-tooltip.dm-tooltip-above::after {
  bottom: -7px;
  border-top: 7px solid var(--ps-primary);
}
.dm-tooltip-title {
  display: block;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ps-white);
  margin-bottom: 4px;
}
.dm-tooltip-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ps-white);
}
.dm-tooltip-caret,
.dm-tooltip-close {
  display: none;
}

/* Figma 1:20203–1:20205 — campaign action tooltip. The 18px caret overlaps
   the 102px bubble by 8px, yielding the approved 312×112 outer geometry. */
.dm-tooltip.dm-tooltip-campaign-detail {
  width: 312px;
  max-width: calc(100vw - 8px);
  pointer-events: auto;
}
.dm-tooltip.dm-tooltip-campaign-detail::after {
  display: none;
}
.dm-tooltip-campaign-detail .dm-tooltip-caret {
  position: relative;
  left: var(--dm-tooltip-caret-left, 50%);
  z-index: 1;
  display: block;
  flex: 0 0 18px;
  width: 30px;
  height: 18px;
  margin-bottom: -8px;
  transform: translateX(-50%);
}
.dm-tooltip-campaign-detail .dm-tooltip-caret img {
  display: block;
  width: 25.9808px;
  height: 13.5px;
  margin: 0 auto;
}
.dm-tooltip-campaign-detail.dm-tooltip-above {
  flex-direction: column-reverse;
}
.dm-tooltip-campaign-detail.dm-tooltip-above .dm-tooltip-caret {
  margin-top: -8px;
  margin-bottom: 0;
  transform: translateX(-50%) rotate(180deg);
}
.dm-tooltip-campaign-detail .dm-tooltip-bubble {
  height: 102px;
  overflow: hidden;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16);
}
.dm-tooltip-campaign-detail .dm-tooltip-title {
  display: flex;
  align-items: center;
  height: 42px;
  margin: 0;
  padding: 9px 40px 9px 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.dm-tooltip-campaign-detail .dm-tooltip-body {
  height: 60px;
  padding: 0 18px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}
.dm-tooltip-campaign-detail .dm-tooltip-close {
  position: absolute;
  top: 10px;
  right: 9px;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.dm-tooltip-campaign-detail .dm-tooltip-close img {
  display: block;
  width: 22px;
  height: 22px;
}
.dm-tooltip-campaign-detail .dm-tooltip-close:hover img {
  filter: brightness(0) invert(1);
}
.dm-tooltip-campaign-detail .dm-tooltip-close:focus-visible {
  outline: 2px solid var(--ps-white);
  outline-offset: 1px;
}

/* Centered Previous + Next row (mirrors .review-order-cta). */
.dm-step1-cta { display: flex; justify-content: center; gap: 16px; margin-top: 24px; }
/* PR-3 (2026-06-02): small right-aligned total-leads line that replaces the
   teal recipient-banner on the Type screen (Ryan 4.26.47). The inner
   #recipient-count is reused (id preserved) so setText('recipient-count')
   keeps populating it; the big 32px .recipient-count class is NOT applied. */
.dm-total-leads {
  text-align: right;
  font-size: 14px;
  color: var(--ps-gray);
  margin: 0 0 20px;
}
.dm-total-leads #recipient-count { font-weight: 600; color: var(--ps-dark); }
.faq-footer {
  text-align: left;
  font-size: 13px;
  color: var(--ps-gray);
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--ps-border);
}
/* PR-2.1: now a functional link that opens the in-iframe Q&A modal. */
.faq-link { color: var(--ps-primary); font-weight: 600; cursor: pointer; text-decoration: underline; }
.faq-link:hover { color: var(--ps-checkout, var(--ps-primary)); }
.faq-link:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 2px; border-radius: 2px; }

/* PR-2.1: Q&A modal content (left-aligned list inside the centered modal). */
.faq-modal-content { max-width: 540px; text-align: left; }
.faq-modal-content .modal-title, .faq-modal-content .modal-text { text-align: center; }
/* FAQ body left-aligns; .faq-modal-content text-align:left is overridden by the later .modal-content centering, so scope it to the list with higher specificity */
.faq-modal-content .faq-list { text-align: left; }
/* Q&A popup widened on desktop (Xinyu/Ryan 2026-06-05: keep popup, ~2x the rendered 400px, centered). Higher specificity beats base .modal-content max-width:400px; scoped to >=769px so the mobile @media .modal-content sizing stays intact. */
@media (min-width: 769px) {
  .modal-content.faq-modal-content { width: min(92vw, 800px); max-width: min(92vw, 800px); }
}
.faq-list { margin: 16px 0; max-height: 50vh; overflow-y: auto; }
.faq-item { padding: 12px 0; border-bottom: 1px solid var(--ps-border); }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-weight: 600; color: var(--ps-dark); margin-bottom: 4px; }
.faq-a { font-size: 14px; color: var(--ps-gray); line-height: 1.5; }
.faq-a em { color: var(--ps-muted, #9ca3af); }
.faq-section { font-weight: 700; color: var(--ps-dark); font-size: 15px; margin: 20px 0 4px; }
.faq-section:first-child { margin-top: 0; }
.faq-a p { margin: 8px 0 0; }
.faq-a p:first-child { margin-top: 0; }
.faq-a ul { margin: 8px 0 0; padding-left: 20px; }
.faq-a li { margin: 2px 0; }

/* PR-1A (2026-06-02): Global top-left "Back to Direct Mail Dashboard" link for
   creation-flow screens (matches Ryan/Figma reference 2026-06-01). Small teal
   text-style link with left arrow — NOT a pill. Renders ABOVE the .steps-row /
   page title. Replaces the per-page "My Campaigns" pill + duplicate top back
   buttons. Navigates to the My Campaigns page via showPage('campaigns'). */
.dm-dashboard-back-link {
  background: transparent;
  border: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ps-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  line-height: 1.2;
}
/* PROPS-3085: the link is transiently disabled while a batch submits (see
   campaign-logic.js). `disabled` on a <button> already blocks activation
   natively, but with no disabled styling it kept rendering in full brand
   colour with a pointer cursor — QA read it as "not disabled, but not
   functioning". `:hover` still matches a disabled button, hence the
   :not(:disabled) guard. not-allowed mirrors the Previous button
   (.btn-secondary) that locks in the same instant, for the same reason. */
.dm-dashboard-back-link:not(:disabled):hover { text-decoration: underline; }
.dm-dashboard-back-link:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: none;
}
.dm-dashboard-back-link:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Phase 1/1b followup (2026-06-06): on the Direct Mail Dashboard page
   (#page-campaigns) the back link must render in NORMAL FLOW above the
   "Direct Mail Dashboard" title — NOT absolutely positioned (which
   overlaps the Upcoming Orders box). This modifier overrides the
   absolute positioning the creation-flow uses and gives it a small
   bottom margin so it sits cleanly above the title. */
.dm-dashboard-back-link.dm-back-inline {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  margin: 0 0 12px;
}

/* PR-1A: when .step-dot + .my-campaigns-btn are removed, .steps-row is left as
   an empty container so PR-1B's updateStepCountLabel can still target it for
   the "Step X of Y" label. Collapse vertical space while it has no children. */
.steps-row:empty { min-height: 0; margin-bottom: 0; }

/* PR-3.1: Review Order (Step 3) — matched to the Ryan/Figma 5.7 "Review Your
   Single Send Order" screenshot. Page title + step label on top; everything else
   in one white card; real form controls (no summary table). */
.review-order-topbar { justify-content: flex-start; }
.review-order-page-title { font-size: 24px; font-weight: 600; color: var(--ps-dark); margin: 0 0 24px; }

.review-order-card {
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 760px;
  margin: 0 auto;
}
.review-order-title { font-size: 20px; font-weight: 700; color: var(--ps-dark); margin: 0 0 4px; }
.review-order-subtitle { font-size: 14px; color: var(--ps-gray); margin: 0 0 20px; }

.review-order-product {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--ps-border); border-radius: 10px;
  padding: 14px; margin-bottom: 20px;
}
.review-order-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--ps-bg); flex-shrink: 0; }
.review-order-product-info { flex: 1; min-width: 0; }
.review-order-piece-label { font-size: 12px; color: var(--ps-gray); margin-bottom: 2px; }
.review-order-product-name { font-size: 16px; font-weight: 600; color: var(--ps-dark); }
.review-order-status { font-size: 13px; font-weight: 600; color: #e65100; white-space: nowrap; align-self: flex-start; }

.review-order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 14px; }
.review-order-fields .form-group { margin-bottom: 0; }
.review-order-deliver-group[hidden] + .review-order-name-group { grid-column: 1 / -1; }
/* PR-6b-3: stack Deliver To / Direct Mail Name on the Multi + A/B review screens
   at narrow widths (.review-order-fields is 2-col by default — no global mobile
   rule). Scoped to the two review pages. */
@media (max-width: 600px) {
  #page-campaign-review .review-order-fields,
  #page-split-review .review-order-fields {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   Campaign type Step 1 — desktop Figma parity

   Approved states:
   - A/B Split Test: node 1:43386
   - Multi Send:     node 1:42173

   The two states share the same 1060px shell, 310px type cards, fields,
   and 200px actions. Their Figma frames intentionally use slightly
   different shell padding and vertical rhythm, selected below from the
   existing .selected campaign card (no additional UI state required).
   ==================================================================== */

body.iframe-mode:has(#page-type:not(.hidden)) {
  background: var(--ps-grey-50);
}

#page-type .dm-step1-card {
  display: flex;
  flex-direction: column;
  gap: 27px;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 27px 30px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--ps-white);
}

#page-type .dm-step1-card:has(#type-split.selected) {
  gap: 30px;
  padding: 28px 27px;
}

#page-type .dm-step1-card-head {
  margin: 0;
  align-items: center;
}

#page-type .dm-step1-card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  color: var(--ps-dark);
}

#page-type .dm-total-leads,
#page-type .dm-total-leads #recipient-count {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: var(--ps-dark);
}

#page-type .dm-step1-card .campaign-types {
  grid-template-columns: repeat(3, 310px);
  gap: 31px;
  width: 100%;
  margin: 0;
  justify-content: start;
}

#page-type .campaign-type-card {
  width: 310px;
  height: 187px;
  min-height: 187px;
  padding: 28px 14px 16px;
  border-width: 1px;
  border-color: var(--ps-grey-300);
  border-radius: 12px;
}

#page-type .campaign-type-card.selected {
  border-width: 2px;
  border-color: var(--ps-primary);
  background: #f6fafb;
}

#page-type .campaign-type-title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ps-dark);
}

#page-type .campaign-type-desc {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ps-grey-700);
}

#page-type #split-test-config,
#page-type #campaign-builder-config {
  width: 100%;
  max-width: none;
  margin: 0;
}

#page-type #split-test-config > .csp-inline-15,
#page-type #campaign-builder-config > .csp-inline-15 {
  width: 100%;
  margin: 0;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  background: var(--ps-white);
}

#page-type #split-test-config > .csp-inline-15 {
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 18px 20px;
}

#page-type #split-test-config .csp-inline-16 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ps-dark);
}

#page-type .split-slider-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 958px;
  max-width: 100%;
}

#page-type #split-test-config .csp-inline-17,
#page-type #split-test-config .csp-inline-20,
#page-type #split-test-config .csp-inline-22 {
  margin: 0;
}

#page-type #split-test-config .csp-inline-17 {
  font-size: 16px;
  line-height: 1.5;
}

#page-type #split-test-config .csp-inline-18 {
  color: var(--ps-primary);
}

#page-type #split-test-config .csp-inline-22 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ps-grey-700);
}

#page-type #split-slider {
  display: block;
  width: 100%;
  height: 10px;
  margin: 0;
}

#page-type #split-test-config .csp-inline-23 {
  width: 958px;
  max-width: 100%;
  height: 83px;
  margin: 0;
  padding: 0 15px;
  gap: 15px;
  align-items: center;
}

#page-type .dm-pro-tip-icon {
  display: block;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
}

#page-type #split-test-config .csp-inline-6 {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ps-dark);
}

#page-type #split-test-config .csp-inline-7 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ps-grey-700);
}

#page-type #campaign-builder-config > .csp-inline-15 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 25px 24px;
}

#page-type #campaign-builder-config .csp-inline-24,
#page-type #campaign-builder-config .csp-inline-25,
#page-type #campaign-builder-config .csp-inline-33 {
  margin: 0;
}

#page-type #campaign-builder-config .csp-inline-24 {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ps-dark);
}

#page-type #campaign-builder-config .csp-inline-25 {
  width: 952px;
}

#page-type #campaign-builder-config .csp-inline-26 {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--ps-dark);
}

#page-type #campaign-builder-config .csp-inline-27 {
  gap: 16px;
}

#page-type #campaign-pieces-slider {
  height: 10px;
  margin: 0;
}

#page-type #campaign-builder-config .csp-inline-29 {
  width: 16px;
  min-width: 16px;
  font-size: 24px;
  color: var(--ps-primary);
}

#page-type #campaign-builder-config .interval-btn:not(.active) {
  border-color: var(--ps-grey-100, #e9ebee);
  color: var(--ps-dark);
}

#page-type #campaign-builder-config .interval-btn.active {
  border-color: var(--ps-primary);
  background: var(--ps-primary);
}

#page-type #campaign-builder-config .csp-inline-33 {
  width: 974px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

#page-type #campaign-builder-config .csp-inline-34 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--ps-dark);
}

#page-type #campaign-builder-config .campaign-timeline {
  height: 75px;
  padding: 0;
}

#page-type #campaign-builder-config .timeline-step {
  display: flex;
  flex: 0 0 58px;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
}

#page-type #campaign-builder-config .timeline-date {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ps-grey-500);
  white-space: nowrap;
}

#page-type #campaign-builder-config .timeline-connector::after {
  top: -20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ps-grey-500);
}

#page-type #campaign-builder-config .csp-inline-35 {
  grid-template-columns: 286px 1fr;
  column-gap: 32px;
  row-gap: 16px;
  width: 952px;
  height: 116px;
  padding: 16px;
  background: #fff9ed;
}

#page-type #campaign-builder-config .csp-inline-36 {
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: var(--ps-grey-500);
}

#page-type .dm-step1-fields {
  grid-template-columns: 486.5px 480px;
  gap: 33px;
  width: 100%;
  margin: 0;
}

#page-type .dm-step1-card:has(#type-split.selected) .dm-step1-fields {
  gap: 39px;
}

#page-type .dm-step1-fields .form-label {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

#page-type .dm-step1-fields .form-input {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
}

#page-type .dm-deliver-col > .dm-step1-dups {
  margin-top: 10px;
}

#page-type .dm-step1-dups:not([hidden]),
#page-type .dm-dups-label {
  gap: 12px;
}

#page-type .dm-dups-label {
  font-size: 16px;
  font-weight: 500;
}

#page-type .dm-step1-dups button.review-order-info {
  width: 20px;
  height: 20px;
}

#page-type .dm-step1-dups .review-order-info-glyph {
  font-size: 12px;
}

#page-type .dm-step1-cta {
  gap: 35px;
  margin: 0;
}

#page-type .dm-step1-cta > .btn-secondary,
#page-type .dm-step1-cta > .btn-primary {
  flex: 0 0 200px;
  width: 200px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

#page-type .faq-footer {
  width: 100%;
  max-width: 1060px;
  margin: 16px auto 0;
  padding: 0;
  border-top: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ps-dark);
}

#page-type .faq-link {
  font-weight: 700;
}

@media (max-width: 1099px) {
  #page-type .dm-step1-card,
  #page-type .dm-step1-card:has(#type-split.selected) {
    gap: 24px;
    padding: 24px;
  }

  #page-type .dm-step1-card .campaign-types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  #page-type .campaign-type-card {
    width: auto;
  }

  #page-type #campaign-builder-config .csp-inline-25,
  #page-type #campaign-builder-config .csp-inline-33,
  #page-type #campaign-builder-config .csp-inline-35 {
    max-width: 100%;
  }

  #page-type .dm-step1-fields,
  #page-type .dm-step1-card:has(#type-split.selected) .dm-step1-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  #page-type .dm-step1-card .campaign-types {
    grid-template-columns: 1fr;
  }

  #page-type .dm-step1-fields,
  #page-type .dm-step1-card:has(#type-split.selected) .dm-step1-fields {
    grid-template-columns: 1fr;
  }

  #page-type #campaign-builder-config .csp-inline-35 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  #page-type .dm-step1-cta {
    width: 100%;
    gap: 12px;
  }

  #page-type .dm-step1-cta > .btn-secondary,
  #page-type .dm-step1-cta > .btn-primary {
    flex: 1 1 0;
    width: auto;
  }

  #page-type #campaign-builder-config .csp-inline-35 {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.review-order-dups { margin-bottom: 20px; }
/* ⓘ button is a sibling of the label (a11y): flex row [label] [ⓘ]; :not([hidden])
   so applySelectionUI's hidden attr + the Property inline display:none still hide it. */
.review-order-dups:not([hidden]) { display: flex; align-items: center; gap: 8px; }
.review-order-dups-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ps-dark); cursor: pointer; }
.review-order-dups-label input[type="checkbox"] { margin: 0; }
/* (icon styling lives in the `button.review-order-info` circle rule above) */

.review-order-callout { background: #f5f6f7; border-radius: 8px; padding: 12px 16px; font-size: 14px; color: var(--ps-dark); margin-bottom: 24px; }
.review-order-cta { display: flex; justify-content: center; gap: 16px; }

/* PR-4: Save as Template (Step 7) + Name Your New Template (Step 8) — Figma 5.7.
   Centered card content; reuses .review-order-card (white card) + topbar. */
/* PR-6c-2: Save/Name Template white area larger/wider + bigger thumbnail
   (Figma Step 10/11). Wider than the review cards (760) per the gap-doc
   "white content area must be larger/full-width". Thumb is responsive
   (max 400px, 3:2 postcard ratio) so it never overflows on mobile. */
.tpl-card { text-align: center; max-width: 880px; padding: 28px; }
.tpl-thumb { width: 100%; max-width: 400px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--ps-bg); display: block; margin: 0 auto 20px; }
.tpl-title { font-size: 20px; font-weight: 700; color: var(--ps-dark); margin: 0 0 6px; }
.tpl-subtitle { font-size: 14px; color: var(--ps-gray); margin: 0 auto 24px; max-width: 440px; }
.tpl-name-field { max-width: 420px; margin: 0 auto 24px; text-align: left; }
.form-error { max-width: 420px; margin: -12px auto 16px; font-size: 13px; color: var(--ps-error); text-align: left; }
.form-error.hidden { display: none; }
.tpl-cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* PROPS-3192: Save as New Template — Figma node 1:43700. */
#page-save-template-choice .review-order-topbar,
#page-save-template-choice .review-order-page-title,
#page-save-template-choice .tpl-card {
  width: 100%;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}

/* PR-A (Ryan/Xinyu 2026-06-08): Product Picker (Step 2) — entire picker sits inside
   one white rounded card on the gray shell, mirroring .dm-step1-card / .review-order-card.
   Wider than the default .review-order-card cap so the product grid breathes. */
.products-card { max-width: 1120px; }

/* PROPS-3191: Order Summary (Step 9) — Figma node 1:42780. */
body:has(#page-order-summary:not(.hidden)) { background: var(--ps-grey-50); }
#page-order-summary .os-card { width: 100%; max-width: 1060px; padding: 30px 46px; border: 0; border-radius: 12px; }
#page-order-summary .os-title { font-size: 24px; font-weight: 600; line-height: normal; color: var(--ps-dark); margin: 0 0 10px; }
#page-order-summary .os-subtitle { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--ps-dark); margin: 0 0 19px; }
#page-order-summary .os-line { display: flex; align-items: center; gap: 16px; width: 100%; height: 116px; border: 1px solid var(--ps-grey-300); border-radius: 12px; padding: 16px; margin-bottom: 19px; }
#page-order-summary .os-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; background: var(--ps-grey-50); flex-shrink: 0; }
/* Emblem (near-square SVG) and canvas-proof thumbs must not crop */
.os-thumb--emblem, .os-thumb--proof { object-fit: contain; }
#page-order-summary .os-line-info { flex: 1; min-width: 0; }
#page-order-summary .os-line-name { font-size: 16px; font-weight: 600; line-height: normal; color: var(--ps-dark); }
#page-order-summary .os-line-date { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--ps-grey-700); margin-top: 8px; }
#page-order-summary .os-line-calendar { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
#page-order-summary .os-line-price { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; white-space: nowrap; color: var(--ps-dark); }
#page-order-summary .os-line-qty { font-size: 14px; font-weight: 400; line-height: normal; color: var(--ps-dark); }
#page-order-summary .os-line-total { font-size: 18px; font-weight: 700; line-height: normal; color: var(--ps-dark); }
#page-order-summary .os-line-bill-date { font-size: 14px; font-weight: 500; font-style: italic; line-height: normal; color: var(--ps-dark); }
/* PR-6c-1: Order Summary Deliver-To / Remove-Dups as 2-up 50% boxes with dark
   icons (Figma Step 12). When the dedup pill is hidden (JS toggles
   .os-pills--single in _renderOrderSummaryPills), Deliver To spans full width. */
#page-order-summary .os-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; margin-bottom: 19px; }
.os-pills--single .os-pill { grid-column: 1 / -1; }
#page-order-summary .os-pill { display: flex; align-items: center; gap: 9px; height: 55px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ps-dark); background: var(--ps-white); border: 1px solid var(--ps-grey-300); border-radius: 12px; padding: 0 16px; }
#page-order-summary .os-pill:first-child { gap: 15px; padding-left: 24px; }
#page-order-summary .os-pill-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
#page-order-summary .os-pill:first-child .os-pill-icon { width: 23px; height: 23px; flex-basis: 23px; }
@media (max-width: 600px) { .os-pills { grid-template-columns: 1fr; } }
/* PR-2: multi-shaped Order Summary rows + per-piece badge + timeline spacing */
.os-lines { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.os-line-badge { font-size: 11px; font-weight: 600; color: var(--ps-gray); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; white-space: nowrap; }
/* Mobile: stack each multi row — thumb+info on top, price block full-width
   below (head review: 390px squeezed badge/name/price into broken columns). */
@media (max-width: 600px) {
  .os-lines .os-line { flex-wrap: wrap; row-gap: 8px; }
  .os-lines .os-line-info { flex: 1 1 calc(100% - 100px); }
  .os-lines .os-line-price { flex: 1 1 100%; text-align: left; white-space: normal; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--ps-border); padding-top: 8px; }
}
.os-timeline-section { margin: 0 0 16px; }
.os-timeline-label { font-size: 13px; font-weight: 600; color: var(--ps-dark); margin-bottom: 8px; }
.os-timeline { margin: 0; }

#page-order-summary .os-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; height: 84px; background: var(--ps-grey-50); border-radius: 12px; padding: 0; margin-bottom: 19px; }
#page-order-summary .os-total-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; }
#page-order-summary .os-total-label { font-size: 12px; font-weight: 400; line-height: normal; color: var(--ps-grey-500); }
#page-order-summary .os-total-val { font-size: 24px; font-weight: 700; line-height: normal; color: var(--ps-dark); }
#page-order-summary .os-total-val--accent { color: var(--ps-primary); }
#page-order-summary .os-note { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ps-grey-700); text-align: center; margin: 0 0 19px; }
#page-order-summary .os-note strong { font-weight: 600; }
#page-order-summary .os-submit-error { max-width: 720px; margin: 0 auto 8px; padding: 14px 18px; border: 1px solid var(--ps-error); border-radius: 8px; background: #fff4f7; color: var(--ps-dark); }
#page-order-summary .os-submit-error[hidden] { display: none; }
#page-order-summary .os-submit-error strong { display: block; color: var(--ps-error); font-size: 15px; margin-bottom: 4px; }
#page-order-summary .os-submit-error p { margin: 0; font-size: 14px; line-height: 1.5; }
#page-order-summary .review-order-cta { gap: 25px; padding: 17px 0; }
#page-order-summary .review-order-cta > .btn-secondary,
#page-order-summary .review-order-cta > .btn-primary { flex: 0 0 215px; width: 215px; height: 44px; min-height: 44px; padding: 0 19px; font-size: 18px; font-weight: 600; white-space: nowrap; }

@media (max-width: 768px) {
  #page-order-summary .os-card { padding: 24px; }
}

@media (max-width: 600px) {
  #page-order-summary .os-pills { grid-template-columns: 1fr; }
  #page-order-summary .os-totals { grid-template-columns: repeat(2, 1fr); height: auto; min-height: 168px; }
  #page-order-summary .review-order-cta { width: 100%; gap: 12px; }
  #page-order-summary .review-order-cta > .btn-secondary,
  #page-order-summary .review-order-cta > .btn-primary { flex: 1 1 0; width: auto; }
}

/* Recipient Banner */
.recipient-banner {
  background: linear-gradient(135deg, var(--ps-orange) 0%, var(--ps-orange-hover) 100%);
  color: white;
  padding: 20px 24px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.recipient-count {
  font-size: 32px;
  font-weight: 700;
}

.recipient-label {
  font-size: 14px;
  opacity: 0.9;
}

/* List Selector Page */
.list-selector-options { display: flex; flex-direction: column; gap: 10px; }
.list-selector-card { background: var(--ps-white); border: 2px solid var(--ps-border); border-radius: 12px; padding: 18px 24px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: space-between; }
.list-selector-card:hover { border-color: var(--ps-orange); }
.list-selector-name { font-size: 16px; font-weight: 600; color: var(--ps-dark); }
.list-selector-count { font-size: 14px; font-weight: 500; color: var(--ps-gray); margin-top: 2px; }

/* List Decision Page */
.ld-choices {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.ld-choice-card {
  background: var(--ps-white);
  border: 2px solid var(--ps-border);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 20px;
}

.ld-choice-card:hover {
  border-color: var(--ps-orange);
  box-shadow: 0 4px 16px rgba(18, 130, 146, 0.1);
}

.ld-choice-card.selected {
  border-color: var(--ps-orange);
  background: linear-gradient(135deg, rgba(18, 130, 146, 0.06) 0%, rgba(18, 130, 146, 0.03) 100%);
}

.ld-choice-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-choice-text {
  flex: 1;
  min-width: 0;
}

.ld-choice-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.ld-choice-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--ps-gray);
}

.ld-choice-arrow {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--ps-gray);
  transition: transform 0.2s, color 0.2s;
}

.ld-choice-card:hover .ld-choice-arrow {
  color: var(--ps-orange);
  transform: translateX(4px);
}

.ld-existing-section {
  margin-top: 8px;
}

.ld-existing-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--ps-dark);
}

.ld-campaign-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ld-campaign-item {
  background: var(--ps-white);
  border: 2px solid var(--ps-border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ld-campaign-item:hover {
  border-color: var(--ps-orange);
  box-shadow: 0 2px 12px rgba(18, 130, 146, 0.08);
}

.ld-campaign-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.ld-campaign-info {
  flex: 1;
  min-width: 0;
}

.ld-campaign-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ld-campaign-meta {
  font-size: 13px;
  color: var(--ps-gray);
}

.ld-campaign-select-btn {
  flex-shrink: 0;
  background: var(--ps-orange);
  color: white;
  border: none;
  border-radius: var(--ps-btn-radius);
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.ld-campaign-select-btn:hover {
  background: var(--ps-orange-hover);
}

.ld-no-campaigns {
  text-align: center;
  padding: 32px 24px;
  color: var(--ps-gray);
  font-size: 14px;
}

.ld-search-wrapper { margin-bottom: 12px; }
.ld-campaign-search {
  width: 100%;
  padding: 12px 16px 12px 36px;
  border: 2px solid var(--ps-border);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  background: var(--ps-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") 12px center no-repeat;
  box-sizing: border-box;
}
.ld-campaign-search:focus { border-color: var(--ps-teal); }
.ld-campaign-search::placeholder { color: #aaa; }

.ld-campaign-list {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ld-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ps-gray);
  margin: 20px 0 8px;
}
.ld-section-label:first-child { margin-top: 0; }

.ld-no-results {
  text-align: center;
  padding: 24px 16px;
  color: var(--ps-gray);
  font-size: 14px;
}

/* Add to Existing — banner on customize page */
.adding-to-banner {
  background: #f0f7f8;
  border: 1px solid var(--ps-teal);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.adding-to-label { font-size: 15px; color: var(--ps-dark); }
.adding-to-label strong { color: var(--ps-teal); }
.adding-to-sublabel { font-size: 13px; color: var(--ps-gray); margin-top: 4px; }

/* Locked state — message, postage, size, style disabled */
.customize-locked #input-message { opacity: 0.6; pointer-events: none; background: var(--ps-bg); }
.customize-locked #postcard-size,
.customize-locked #postcard-print-style,
.customize-locked #postage-type { opacity: 0.6; pointer-events: none; background: var(--ps-bg); }
.customize-locked .logo-upload-group { display: none; }
.customize-locked .merge-tag-btn { pointer-events: none; opacity: 0.5; }
.customize-locked .message-merge-tag { pointer-events: none; opacity: 0.5; }

@media (max-width: 480px) {
  .ld-choice-card {
    padding: 18px 16px;
    gap: 14px;
  }
  .ld-choice-icon {
    width: 40px;
    height: 40px;
  }
  .ld-choice-icon .type-icon-svg {
    width: 40px;
    height: 40px;
  }
  .ld-choice-title {
    font-size: 16px;
  }
}

/* Category Tabs */
.category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.category-tab {
  min-height: var(--ps-btn-height-sm);
  padding: 0 14px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-btn-radius);
  background: var(--ps-white);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.category-tab:hover {
  background: var(--ps-orange-hover);
  border-color: var(--ps-orange-hover);
  color: var(--ps-white);
}

.category-tab:active {
  background: var(--ps-orange-active);
  border-color: var(--ps-orange-active);
  color: var(--ps-white);
}

.category-tab.active {
  background: var(--ps-orange);
  color: white;
  border-color: var(--ps-orange);
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
  /* Keep cards from stretching to match taller row-mates, which leaves
     empty space under prices on shorter cards. */
  align-items: start;
}

.product-card {
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  border-color: var(--ps-orange);
  box-shadow: 0 4px 12px rgba(18, 130, 146, 0.18);
}

.product-card.selected {
  border-color: var(--ps-orange);
  box-shadow: 0 0 0 3px rgba(18, 130, 146, 0.24);
}

.product-card.hidden { display: none; }

/* #114 UX: multi-month "selected so far" strip (above the product grid during
   "Choose Piece N of 3"). Compact chips using design-system tokens. Hidden via
   the global .hidden when not multi or before the first pick. */
.multi-selected-strip {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--ps-bg, #f5f5f5);
  border: 1px solid var(--ps-border);
  border-radius: 8px;
}
.multi-selected-strip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-gray, #868686);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.multi-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.multi-selected-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 6px 12px 6px 6px;
  background: var(--ps-white, #fff);
  border: 1px solid var(--ps-border);
  border-radius: 999px;
}
.multi-selected-chip-thumb {
  width: 34px;
  height: 26px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
  background: #eef1f2;
}
.multi-selected-chip-thumb--emblem { object-fit: contain; padding: 2px; }
.multi-selected-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.multi-selected-chip-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--ps-teal, #128292);
  line-height: 1.2;
}
.multi-selected-chip-name {
  font-size: 12px;
  color: var(--ps-dark, #3C4654);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: product-image-shimmer 1.4s ease-in-out infinite;
}

.product-image.loaded {
  animation: none;
  background: #f9f9f9;
}

/* Explicit dimensions on the img element override the generic 4/3 placeholder.
   Keeps non-Classic thumbs (which have no width/height attrs) on the legacy aspect.
   height:auto is required so the width/height attributes drive the aspect ratio
   instead of the height attribute (e.g. 408) leaking through as a literal pixel
   height — which boxed landscape 600x408 Classic thumbs into a cropped portrait. */
.product-image[width][height] { aspect-ratio: auto; height: auto; }

@keyframes product-image-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .product-image {
    animation: none;
  }
}

.size-pills {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.size-pill {
  background: transparent;
  border: 1px solid var(--ps-border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ps-gray);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  line-height: 1.6;
}

.size-pill:hover {
  border-color: var(--ps-orange);
  color: var(--ps-dark);
}

.size-pill.active {
  background: var(--ps-orange);
  border-color: var(--ps-orange);
  color: var(--ps-white);
}

.size-pill.active:hover {
  background: var(--ps-orange-hover);
  border-color: var(--ps-orange-hover);
}

.product-info {
  padding: 12px 14px 14px;
}

.product-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.3;
  /* Standardize the title to a fixed 2-line area (Ryan): long names clamp to
     2 lines with an ellipsis (never push cards to 3+ lines) and 1-line names
     still reserve the same height so cards stay aligned. min-height = 2 lines
     at line-height 1.3 (2 * 1.3 = 2.6em); works at the 12px responsive size too. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}

.product-type {
  font-size: 12px;
  color: var(--ps-gray);
  margin-bottom: 8px;
}

.product-price {
  font-weight: 700;
  color: var(--ps-orange);
}

/* Preview Container - Proof System */
/* "Customize Your Direct Mail Piece" layout (Figma): settings/composer on the
   left, mail-piece preview on the right; Mailing List + Sender Information
   full-width below; CTA at the bottom. display:contents lifts the panel's
   sections into this grid so we rearrange WITHOUT moving DOM (keeps every JS
   getElementById ref + the editor's canvas-builder-mode CSS intact). */
.preview-container {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  grid-template-areas:
    "compose  preview"
    "settings preview"
    "mailing  mailing"
    "sender   sender"
    "cta      cta";
  row-gap: 20px;
  column-gap: 32px;
  align-items: start;
}

.customize-panel { display: contents; }
#message-section,
#custom-proof-personalization-section { grid-area: compose; }
#campaign-settings-section { grid-area: settings; }
.preview-image-container { grid-area: preview; }
#mailing-list-section { grid-area: mailing; }
#sender-info-section { grid-area: sender; }
#cta-section { grid-area: cta; }

/* PROPS-3193 follow-up: the approved card uses full-width separators between
   its main content, list, and sender rows. Reset the legacy per-panel borders
   only on this review surface; compose/editor panels keep their own rules. */
#page-customize:not(.cb-editing) #campaign-settings-section,
#page-customize:not(.cb-editing) #cta-section {
  margin: 0;
  padding: 0;
  border: 0;
}
#page-customize:not(.cb-editing) #campaign-settings-section > .form-group:has(#postage-type) {
  margin-bottom: 0;
}
#page-customize:not(.cb-editing) #mailing-list-section {
  margin: 0;
  padding: 19px 0 0;
  border-top: 1px solid var(--ps-border);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}
#page-customize:not(.cb-editing) #sender-info-section {
  margin: 0;
  padding: 19px 0 24px;
  border-top: 1px solid var(--ps-border);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}
#page-customize #mailing-list-section > .panel-section-title {
  margin-bottom: 18px;
}
#page-customize #sender-info-section > .sender-info-header {
  margin-bottom: 20px;
}

.mailing-list-summary-surface {
  min-height: 78px;
  padding: 16px 21px;
  background: var(--ps-grey-50);
  border: 0;
  border-radius: 8px;
}

.sender-summary-surface {
  min-height: 86.5px;
  padding: 12px;
  color: var(--ps-dark);
  font-size: 13px;
  line-height: 1.5;
  background: var(--ps-grey-50);
  border: 0;
  border-radius: 8px;
}
.propstream-list-info .csp-inline-60 {
  justify-content: space-between;
  flex-wrap: wrap;
}
.propstream-list-info .btn-edit-leads {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 96px;
}
.propstream-list-info .js-creation-edit-leads[hidden] {
  display: none !important;
}

/* PROPS-3345 / Figma 1:44206 + 1:44215 — Customize prerequisites. The
   leading 32px slot intentionally stays transparent because the approved
   Figma warning layer exports as a transparent placeholder. */
.customize-prerequisite-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 78px;
  padding: 0 26px 0 23px;
  column-gap: 13px;
  background: #eff2f6;
  border-radius: 8px;
}

.customize-prerequisite-card[hidden] {
  display: none !important;
}

.customize-prerequisite-card--sender {
  min-height: 86.5px;
  padding-right: 21px;
}

.prerequisite-icon-slot {
  display: block;
  width: 32px;
  height: 32px;
}

.prerequisite-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.prerequisite-title {
  color: #3c4654;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.prerequisite-body {
  color: #99a0aa;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.prerequisite-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  color: #128292;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dfe1e4;
  border-radius: 50px;
}

.prerequisite-action:hover {
  color: #fff;
  background: #128292;
  border-color: #128292;
}

.prerequisite-action:focus-visible {
  outline: 2px solid #128292;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .customize-prerequisite-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px 13px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .customize-prerequisite-card .prerequisite-action {
    grid-column: 2;
    justify-self: start;
  }
}
/* PROPS-3193 follow-up / Figma 1:43982: Customize uses the same gray creation
   shell as the surrounding steps, with one centered white review card. */
#page-customize {
  width: 100%;
  max-width: 1130px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

#page-customize > .steps-row {
  width: 100%;
  max-width: 1060px;
  margin-right: auto;
  margin-left: auto;
}

#page-customize > .customize-page-title {
  box-sizing: border-box;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto 14px;
  padding-left: 8px;
  line-height: 30px;
}

.customize-review-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 27px 40px 35px 41px;
  overflow: hidden;
  background: var(--ps-white);
  border: 0;
  border-radius: 12px;
}

.customize-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 53px;
}

.customize-review-header > .page-title {
  flex: 1 1 auto;
  margin: 0 0 0 -11px;
  color: var(--ps-dark);
  line-height: 30px;
}
/* Figma CTA row: secondary "Previous" on the left, primary submit on the right
   (replaces the lone left-aligned submit). Behavior unchanged — Previous reuses
   the page's existing backToProducts() nav; the primary keeps id
   #submit-campaign-btn so the app.js click listener + submit flow are intact. */
.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
/* Review screen only: the submit button carries a legacy full-width inline
   style (.csp-inline-64 = width:100%; margin-top:16px). Inside the row it must
   size to its content and sit on the right, not stretch. Scoped OUT of editor
   mode so the Fabric editor's footer keeps the legacy single full-width submit
   (and Previous is hidden there, below) — editor chrome stays as-is. With
   Previous hidden, the lone width:100% submit fills the flex row = same as the
   pre-row layout. */
.preview-container:not(:has(.preview-image-container.canvas-builder-mode)) .cta-row #submit-campaign-btn {
  width: 240px;
  margin-top: 0;
}
#page-customize:not(.cb-editing) .cta-row #cta-previous-btn,
#page-customize:not(.cb-editing) .cta-row #submit-campaign-btn {
  flex: 0 0 240px;
  width: 240px;
  height: 44px;
  min-height: 44px;
}
.preview-container:has(.preview-image-container.canvas-builder-mode) #cta-previous-btn {
  display: none;
}
/* Campaign Name is not in Ryan's/Figma "Direct Mail Settings"; hide it on the
   review layout. Field stays in the DOM with its prefilled value so the submit
   payload (campaign name) is unchanged. */
#campaign-name-group { display: none; }

/* Figma's review screen shows no price block. Hide it entirely (the Submit
   button is a sibling of #cta-section, not inside #price-summary-block, so it
   stays). Pricing logic/state is untouched — purely visual. */
#price-summary-block { display: none; }

/* No-composer review screens (HS + Classic) carry .hidden on BOTH compose-area
   sections (#message-section and #custom-proof-personalization-section — see
   syncCustomProofFormUi). With the compose row still in the grid, the tall
   preview (which spans compose+settings) splits its height across the empty
   compose row and the settings row, pushing "Direct Mail Settings" halfway
   down the left column. Drop the compose row for this case so settings
   top-aligns with the preview top:
     row 1: settings | preview
     row 2: mailing  (full-width)
     row 3: sender   (full-width)
     row 4: cta      (full-width)
   Scoped out when the Fabric editor is open — canvas-builder-mode owns its own
   full-bleed grid, and this selector's ID-bearing :has() args would otherwise
   out-specify the editor-revert rule below. Chrome-only :has(), same as that
   rule; PropStream is Chrome. Wrapped in min-width:993px (complement of the
   max-width:992px mobile rule below): this selector's ID-bearing :has() args
   out-specify the single-column mobile template, so without this media guard
   HS/Classic on a narrow viewport would be forced back to 2 columns. */
@media (min-width: 993px) {
  .preview-container:not(:has(.preview-image-container.canvas-builder-mode)):has(#message-section.hidden):has(#custom-proof-personalization-section.hidden) {
    grid-template-areas:
      "settings preview"
      "mailing  mailing"
      "sender   sender"
      "cta      cta";
  }
}

/* Editor open → revert to the legacy full-bleed grid. The canvas-builder-mode
   CSS (canvas-builder.css) expects .customize-panel to be a real grid item
   (grid-column: 1 / -1), so undo display:contents here. */
.preview-container:has(.preview-image-container.canvas-builder-mode) {
  grid-template-columns: 1fr 400px;
  grid-template-areas: none;
}
.preview-container:has(.preview-image-container.canvas-builder-mode) .customize-panel {
  display: block;
}
/* Template Name field in the editor (Ryan/Figma 2026-05-30) — minimal inline
   field below the canvas; constrain width so it reads as a field, not a full
   bleed input. */
.cb-template-name-section { max-width: 360px; margin-top: 20px; margin-left: 24px; }

/* Ryan follow-up (2026-05-30): in editor mode hide the review-only Sender +
   Mailing List sections and the now-redundant Customize button so the Fabric
   editor is the primary content (Ryan: "sender/list info is at the top and the
   customizer is below ... don't think we even need sender/list sections on the
   customize screen"). Direct Mail Settings + the CTA (Submit Campaign) stay —
   they are the ONLY submit path from the editor today (no editor Save/return
   control exists yet; full Figma editor chrome is a separate Xinyu pass). */
.preview-container:has(.preview-image-container.canvas-builder-mode) #sender-info-section,
.preview-container:has(.preview-image-container.canvas-builder-mode) #mailing-list-section,
.preview-container:has(.preview-image-container.canvas-builder-mode) #review-customize-btn {
  display: none;
}

/* PR-6: full-screen Fabric editor (Figma "Customize Your Design"). cb-editing is
   added to #page-customize when the editor opens (showCanvasBuilder) and removed
   on exit (hideCanvasBuilder / Cancel / Save). It hides the Step-4 review chrome
   so ONLY the editor card shows — unconditional (not tied to the conditional
   canvas-builder-mode reference-preview). Editor Save now replaces the in-editor
   submit, so Direct Mail Settings + the CTA row are hidden here too. */
/* PR-A1: keep the global .steps-row (Back to Dashboard + Step counter) VISIBLE on
   the full-screen editor per Ryan Screen 6 — only the rest of the chrome is hidden. */
#page-customize.cb-editing > .customize-page-title,
#page-customize.cb-editing .customize-review-header,
#page-customize.cb-editing #adding-to-campaign-banner,
#page-customize.cb-editing #review-customize-btn,
#page-customize.cb-editing .customize-panel {
  display: none !important;
}
#page-customize.cb-editing {
  max-width: none;
  padding: 24px 32px;
  background: var(--ps-white);
  border-radius: 12px;
}
#page-customize.cb-editing > .steps-row {
  max-width: none;
}
#page-customize.cb-editing .customize-review-card {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
#page-customize.cb-editing .preview-container {
  grid-template-columns: 1fr;
  grid-template-areas: "preview";
}
#page-customize.cb-editing .preview-image-container {
  padding: 24px;
}
/* Editor chrome header: "Customize Your Design" (left) + Cancel / Save (right).
   SINGLE-SEND only — hidden by default so the shared editor used by A/B (split) +
   multi does NOT show the single-send Save→Step-7 chrome; revealed only under the
   single-send full-screen .cb-editing state. */
.cb-editor-chrome { display: none; }
#page-customize.cb-editing .cb-editor-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-left: 24px;
  margin-bottom: 20px;
}
.cb-editor-title { font-size: 20px; font-weight: 700; color: var(--ps-dark); margin: 0; }
.cb-editor-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cb-editor-actions .btn-secondary,
.cb-editor-actions .btn-primary { min-height: 40px; padding: 0 22px; font-size: 15px; }

@media (max-width: 992px) {
  .preview-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "preview"
      "compose"
      "settings"
      "mailing"
      "sender"
      "cta";
  }
  .preview-container:has(.preview-image-container.canvas-builder-mode) {
    grid-template-columns: 1fr;
  }

  .custom-proof-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  #page-customize > .customize-page-title {
    padding-left: 0;
  }

  .customize-review-card {
    padding-right: 28px;
    padding-left: 28px;
  }

  .customize-review-header > .page-title {
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .customize-review-header {
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    margin-bottom: 20px;
  }

  .customize-review-header .preview-tabs {
    align-self: flex-end;
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .cta-row {
    flex-direction: column;
  }

  #page-customize:not(.cb-editing) .cta-row #cta-previous-btn,
  #page-customize:not(.cb-editing) .cta-row #submit-campaign-btn {
    flex-basis: 44px;
    width: min(240px, 100%);
  }
}

.preview-image-container {
  background: var(--ps-white);
  border-radius: 12px;
  padding: 0;
  /* NOTE (2026-07-01): was `position: sticky; top: 20px` (Ryan report).
     A tall sticky preview stayed pinned while the user scrolled down and
     painted over the "Edit Leads" button in the full-width #mailing-list-section
     (z-index:auto → later-painted sticky wins), swallowing its pointer events.
     Reproduced local + staging (elementFromPoint at the button returned
     #preview-image). Use `position: relative` (NOT static): dropping the sticky
     pinning returns the preview to normal flow so it scrolls away instead of
     covering Edit Leads, while `relative` still establishes the containing block
     that the absolutely-positioned #review-customize-btn
     needs to overlap the postcard's top-right corner on the HS review screen. */
  position: relative;
}

/* PR-1 (2026-05-31): final 5.7 (image 64) wants Front/Back tabs ABOVE the
   image and the Customize button OVERLAPPING the postcard top-right — i.e. the
   base layout (.preview-tabs in-flow above; .review-customize-btn position
   :absolute top/right). The earlier "tabs below + Customize de-floated" rules
   were removed here to restore that. Do NOT re-introduce a flex/order reorder
   of this container. */

/* Optional "Customize" entry on the Home Services review screen.
   Hidden by default; goToCustomize() adds .review-customize-btn--visible
   for HS-editable products. Uses the Xinyu --ps-primary teal token so it
   stays consistent with the rest of the secondary actions. */
.review-customize-btn {
  display: none;
  position: absolute;
  /* Figma 1:44041: inset the compact editor action from the artwork's top-right. */
  top: 15px;
  right: 10px;
  z-index: 2;
  background: var(--ps-white);
  color: var(--ps-primary);
  border: 1px solid var(--ps-border);
  height: var(--ps-btn-height-sm);
  padding: 0 14px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.review-customize-btn img {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.review-customize-btn.review-customize-btn--visible {
  display: inline-flex;
}

.review-customize-btn:hover {
  background: var(--ps-primary);
  color: var(--ps-white);
  border-color: var(--ps-primary);
}

.review-customize-btn:active {
  background: var(--ps-primary-active);
  color: var(--ps-white);
  border-color: var(--ps-primary-active);
}

.review-customize-btn:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
}

.preview-tabs {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px 0 0;
}

.preview-tab {
  height: var(--ps-btn-height-sm);
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--ps-btn-radius);
  background: var(--ps-white);
  color: var(--ps-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.preview-tab:hover {
  background: var(--ps-orange-hover);
  border-color: var(--ps-orange-hover);
  color: var(--ps-white);
}

.preview-tab:active {
  background: var(--ps-orange-active);
  border-color: var(--ps-orange-active);
  color: var(--ps-white);
}
.preview-tab.active {
  background: var(--ps-teal-100);
  color: var(--ps-primary);
  border-color: transparent;
  border-radius: 5px;
}

/* Proof Preview with Overlays */
.proof-preview-wrapper {
  position: relative;
  width: 100%;
  container-type: inline-size;
}

.preview-image {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* Blank CYO emblem placeholder: modest and centered, never stretched to the
   proof width (it pushed the Mailing List section down — Ryan 2026-07-21).
   Snapshot previews keep the normal proof sizing. */
.preview-image--emblem {
  width: auto;
  max-width: 100%;
  max-height: 280px;
  margin: 0 auto;
}

/* PROPS-3193 / Figma 1:45051: a blank Create Your Own piece is still a real
   preview surface. Keep the illustration inside the same 597:463 framed panel
   that the design specifies. */
.proof-preview-wrapper.proof-empty-design {
  box-sizing: border-box;
  aspect-ratio: 597 / 463;
  background: var(--ps-white);
  border: 1px solid var(--ps-grey-300);
  border-radius: 12px;
  overflow: hidden;
}

.proof-preview-wrapper.proof-empty-design .preview-image--emblem {
  width: 48%;
  max-width: 287px;
  max-height: none;
  margin: 8% auto 0;
}

.empty-design-prompt {
  position: absolute;
  right: 0;
  bottom: 97px;
  left: 0;
  margin: 0;
  color: var(--ps-dark);
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
}

.empty-design-prompt[hidden] {
  display: none;
}

/* Keep the established editor action and selector 45px above the framed
   preview's lower edge. */
.proof-preview-wrapper.proof-empty-design + .review-customize-btn {
  top: auto;
  right: auto;
  bottom: 45px;
  left: 50%;
  height: 44px;
  padding: 0 19px;
  transform: translateX(-50%);
  background: var(--ps-primary);
  color: var(--ps-white);
  border-color: var(--ps-primary);
  font-size: 18px;
  gap: 0;
}

.proof-preview-wrapper.proof-empty-design + .review-customize-btn img {
  display: none;
}

.proof-preview-wrapper.proof-empty-design + .review-customize-btn:hover {
  background: var(--ps-primary-hover);
  border-color: var(--ps-primary-hover);
}

.proof-preview-wrapper.proof-empty-design + .review-customize-btn:active {
  background: var(--ps-primary-active);
  border-color: var(--ps-primary-active);
}

.proof-preview-wrapper.proof-postcard-back-border {
  aspect-ratio: 3 / 2;
  background: #fff;
  border: 1px solid #3C4654;
  border-radius: 8px;
  overflow: hidden;
}

.proof-preview-wrapper.proof-postcard-back-border .preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

.proof-preview-wrapper.proof-postcard-back-border .preview-image.preview-image--load-failed {
  visibility: hidden;
}

.proof-preview-wrapper.proof-letter-insert-placeholder {
  aspect-ratio: 6.75 / 5;
  background: #fff;
  border: 1px solid #3C4654;
  border-radius: 8px;
  overflow: hidden;
}

.proof-preview-wrapper.proof-letter-insert-placeholder .preview-image {
  display: none;
}

.proof-preview-wrapper.proof-color-letter-insert-placeholder {
  width: min(100%, 510px);
  aspect-ratio: 8.5 / 11;
  margin-inline: auto;
}

.proof-preview-wrapper.proof-color-letter-canvas-preview.proof-color-letter-insert-placeholder {
  overflow: hidden;
  border: 1px solid #d5d9e0;
  border-radius: 8px;
  background: #fff;
}

.proof-preview-wrapper.proof-color-letter-canvas-preview.proof-color-letter-insert-placeholder .preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.proof-preview-wrapper.proof-color-letter-mockup-placeholder {
  min-height: 360px;
  overflow: hidden;
  border: 1px solid #d8dde5;
  border-radius: 8px;
  background: linear-gradient(145deg, #f7f8fa 0%, #e8ebf0 100%);
}

.proof-preview-wrapper.proof-color-letter-mockup-placeholder .preview-image {
  display: none;
}

.proof-preview-wrapper.proof-color-letter-mockup-placeholder.proof-color-letter-mockup-designed .preview-image {
  display: block;
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 14%;
  width: 42%;
  height: auto;
  aspect-ratio: 8.5 / 11;
  object-fit: cover;
  transform: rotate(-4deg);
  border: 1px solid #d5d9e0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 14px 32px rgba(31, 41, 55, 0.16);
}

.proof-preview-wrapper.proof-color-letter-mockup-placeholder.proof-color-letter-mockup-designed::before {
  display: none;
}

.proof-preview-wrapper.proof-color-letter-envelope-placeholder {
  width: 100%;
  aspect-ratio: 950 / 413;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 8px;
}

.proof-preview-wrapper.proof-color-letter-envelope-placeholder .preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.proof-preview-wrapper.proof-color-letter-mockup-placeholder::before,
.proof-preview-wrapper.proof-color-letter-mockup-placeholder::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 14px 32px rgba(31, 41, 55, 0.16);
}

.proof-preview-wrapper.proof-color-letter-mockup-placeholder::before {
  top: 8%;
  left: 14%;
  width: 42%;
  aspect-ratio: 8.5 / 11;
  transform: rotate(-4deg);
  border: 1px solid #d5d9e0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 9%, #e5e8ed 9% 9.8%, transparent 9.8% 14%),
    #fff;
}

.proof-preview-wrapper.proof-color-letter-mockup-placeholder::after {
  right: 12%;
  bottom: 16%;
  width: 53%;
  aspect-ratio: 9.5 / 4.125;
  transform: rotate(3deg);
  border: 1px solid #cfd4dc;
  background:
    linear-gradient(151deg, transparent 49.4%, #d8dde4 49.7% 50.3%, transparent 50.6%),
    linear-gradient(209deg, transparent 49.4%, #d8dde4 49.7% 50.3%, transparent 50.6%),
    #fff;
}

/* Overlay elements positioned on the preview */

/* ============================================================
   COMPONENT STYLES (campaigns, customize, modals, etc.)
   ============================================================ */

   TEMPLATE: Flip With Rick
   Products: Flip With Rick series
   Has property value offer calculation
   ---------------------------------------- */
.template-flipwithrick .overlay-full-name {
  top: 3%;
  left: 4%;
  width: 45%;
  height: 5%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  font-size: clamp(6px, 2cqw, 11px);
}

.template-flipwithrick .overlay-rma {
  top: 8%;
  left: 4%;
  width: 48%;
  height: 8%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  font-size: clamp(6px, 1.8cqw, 10px);
  line-height: 1.2;
}

.template-flipwithrick .overlay-custom-message {
  top: 28%;
  left: 4%;
  width: 44%;
  height: 60%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  font-size: clamp(6px, 2.3cqw, 13px);
  line-height: 1.4;
}

.template-flipwithrick .overlay-recipient-name {
  top: 38%;
  left: 53%;
  width: 44%;
  height: 5%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  font-size: clamp(6px, 2cqw, 12px);
}

.template-flipwithrick .overlay-recipient-address {
  top: 43%;
  left: 53%;
  width: 44%;
  height: 20%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  font-size: clamp(6px, 1.9cqw, 11px);
  line-height: 1.3;
}

.template-flipwithrick .overlay-offer {
  top: 18%;
  left: 53%;
  width: 44%;
  height: 18%;
  font-family: 'Impact', Arial, sans-serif;
  color: #2e7d32;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 7cqw, 38px);
  font-weight: bold;
}

.template-flipwithrick .overlay-website,
.template-flipwithrick .overlay-phone {
  display: none;
}

.template-flipwithrick .overlay-logo {
  top: 2%;
  left: 55%;
  width: 18%;
  height: 14%;
}

/* Default template classes (backwards compatible) */
.overlay-full-name {
  top: 2.1875%;
  left: 3.875%;
  width: 47%;
  height: 6%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  font-size: clamp(6px, 2cqw, 12px);
}

.overlay-rma {
  top: 8.1875%;
  left: 3.875%;
  width: 51.36%;
  height: 6.25%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  font-size: clamp(6px, 2cqw, 12px);
  line-height: 1.2;
}

.overlay-website {
  top: 14.4375%;
  left: 3.875%;
  width: 47%;
  height: 7.25%;
  font-family: Arial, sans-serif;
  color: #000;
  display: flex;
  justify-content: flex-start;
  text-align: left;
  font-size: clamp(6px, 2cqw, 10px);
  word-break: break-all;
}

.overlay-custom-message {
  top: 27.4375%;
  left: 3.875%;
  width: 46%;
  height: 65%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  font-size: clamp(6px, 2.5cqw, 14px);
  line-height: 1.4;
}

.overlay-recipient-name {
  top: 38.2%;
  left: 52.7083%;
  width: 45.5%;
  height: 5.5%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  font-size: clamp(6px, 1.9cqw, 14px);
}

.overlay-recipient-address {
  top: 43.1875%;
  left: 52.7083%;
  width: 45.5%;
  height: 24.75%;
  font-family: 'Lexi', 'Dancing Script', cursive;
  color: #000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  font-size: clamp(6px, 2cqw, 13px);
  line-height: 1.3;
}

.overlay-barcode {
  top: 91.5%;
  left: 55.708%;
  width: 42.5%;
  height: 8.5%;
  display: none;
}

.overlay-offer {
  font-family: 'ITC-Avant-Garde-Bold', Arial, sans-serif;
  font-weight: bold;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.overlay-phone {
  font-family: 'ITC-Avant-Garde-Bold', Arial, sans-serif;
  font-weight: bold;
  display: none;
  align-items: center;
}

.overlay-logo {
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 3px;
}

.overlay-logo.visible {
  display: flex;
}

.overlay-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.proof-preview-wrapper.custom-proof-active .proof-overlay {
  display: none !important;
}

.custom-proof-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  display: none;
}

.custom-proof-field {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  background: transparent;
  outline: 0;
}

.custom-proof-text-field {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.custom-proof-logo-field {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-proof-logo-field img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Customize Panel */
.customize-panel {
  background: var(--ps-white);
  border-radius: 12px;
  padding: 24px;
}

.panel-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ps-border);
}

.panel-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* PROPS-3129 (Figma 1:45048): #campaign-settings-section is the left cell of the
   settings|preview grid row, so its .panel-section border-bottom draws a stray
   short divider under only that column. Suppress it and put the full-width
   block-to-Mailing-List divider on #mailing-list-section (border-top) instead.
   Sender Information has no divider before the footer in the design, so drop its
   border-bottom too. Desktop only — the mobile single-column grid keeps the
   default stacked dividers. */
@media (min-width: 993px) {
  #campaign-settings-section {
    border-bottom: none;
    padding-bottom: 0;
  }
  #mailing-list-section {
    border-top: 1px solid var(--ps-border);
    padding-top: 24px;
  }
  #sender-info-section {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.panel-section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--ps-dark);
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ps-dark);
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ps-border);
  border-radius: 6px;
  font-size: 16px;
  color: var(--ps-dark);
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-input:focus,
select:focus {
  outline: none;
  border-color: var(--ps-orange);
}

.postcard-size-change-btn {
  margin-top: 8px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
}

.form-input.input-missing {
  border-color: #c62828;
  background: #fff5f5;
}

textarea.form-input {
  min-height: 100px;
  resize: vertical;
}

/* Recipient selection (Deliver To + Remove duplicates). Shown only when
   PropStream supplies piece_counts. Reuses .form-group / .form-input. */
#recipient-selection-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ps-border);
}

/* Ryan 2026-06-03: larger, easier-to-click "Remove duplicate addresses" checkbox
   with the teal accent. Shared by Step 1, the customize screen, and the three
   Review/Order Summary screens (all carry .js-remove-dups). Only the native box
   is restyled (size + accent-color), so checked/unchecked behavior + keyboard a11y
   are unchanged. */
.js-remove-dups {
  width: 17px;
  height: 17px;
  accent-color: var(--ps-primary);
  cursor: pointer;
  flex-shrink: 0;          /* keep size in the flex .review-order-dups-label rows */
  vertical-align: middle;  /* align with text in the inline-label rows */
}
/* Inline-label rows (Step 1 + customize): gap between box and text + clickable label.
   The Review rows use .review-order-dups-label (flex + gap) which already handles this. */
.js-remove-dups-group label.form-label {
  cursor: pointer;
}
.js-remove-dups-group label.form-label .js-remove-dups {
  margin-right: 8px;
}

.warning-text {
  font-size: 13px;
  color: #c62828;
  margin-top: 6px;
}

#submit-campaign-btn.is-disabled-zero-recipients,
#submit-campaign-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Character Counter */
.char-counter-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 13px;
}

.char-counter {
  color: var(--ps-gray);
}

.char-counter span#char-count {
  font-weight: 600;
  color: var(--ps-dark);
}

.char-counter-wrap.warning {
  background: #fff8e1;
}

.char-counter-wrap.warning .char-counter span#char-count {
  color: #f57c00;
}

.char-counter-wrap.over {
  background: #ffebee;
}

.char-counter-wrap.over .char-counter span#char-count {
  color: #c62828;
}

.char-status {
  font-size: 12px;
  font-weight: 500;
}

.char-status.optimal {
  color: #2e7d32;
}

.char-status.warning {
  color: #f57c00;
}

.char-status.over {
  color: #c62828;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.custom-proof-form-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#custom-proof-personalization-section .custom-proof-form-stack {
  gap: 4px;
}

.custom-proof-side-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ps-dark);
}

#custom-proof-personalization-section .form-group {
  margin-bottom: 8px;
}

#custom-proof-personalization-section .form-label {
  margin-bottom: 4px;
}

.custom-proof-side-divider {
  margin: 2px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ps-gray);
}

#custom-proof-personalization-section .custom-proof-side-divider {
  margin: 4px 0 6px;
}

.custom-proof-input {
  resize: vertical;
}

textarea.custom-proof-input.form-input {
  min-height: 0 !important;
  height: auto;
  overflow-y: hidden;
  resize: none !important;
}

.custom-proof-sender-source {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  background: #fff;
}

.custom-proof-sender-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  margin-top: 6px;
}

.custom-proof-sender-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-gray);
}

.custom-proof-sender-value {
  font-size: 13px;
  color: var(--ps-dark);
  overflow-wrap: anywhere;
}

/* File Upload */
.file-upload {
  border: 2px dashed var(--ps-border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.file-upload:hover {
  border-color: var(--ps-orange);
  background: rgba(18, 130, 146, 0.04);
}

.file-upload.has-file {
  border-color: var(--ps-orange);
  background: rgba(18, 130, 146, 0.1);
}

/* File dragged over the zone. Must stay legible on top of .has-file, which
   already paints border-color + a 0.1 wash — hence the solid border and the
   scale, not just a slightly darker background. */
.file-upload.is-dragover {
  border-style: solid;
  border-color: var(--ps-orange);
  background: rgba(18, 130, 146, 0.18);
  transform: scale(1.01);
}

.file-upload input[type="file"] {
  display: none;
}

.file-upload-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.file-upload-text {
  font-size: 13px;
  color: var(--ps-gray);
}

.logo-preview {
  max-width: 100px;
  max-height: 60px;
  margin-top: 8px;
}

/* Once a logo is in, the box must stop asking for one (Ryan, 2026-08-04).
   Before: the 🖼️ placeholder and "Click to upload your logo" stayed put and the
   logo appeared UNDER them, so the box showed a logo while still asking for one.
   Now the placeholder gives way to the logo itself, plus an explicit
   confirmation that also says how to change it. */
.file-upload-done {
  display: none;
}

.file-upload.has-file .file-upload-icon,
.file-upload.has-file .file-upload-text {
  display: none;
}

.file-upload.has-file .logo-preview {
  max-width: 180px;
  max-height: 90px;
  margin: 0 auto;
}

.file-upload.has-file .file-upload-done {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-orange);
}

/* Price Summary */
.price-summary {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.price-row:last-child { margin-bottom: 0; }

.price-row.total {
  font-weight: 700;
  font-size: 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ps-border);
}

/* Buttons */
.btn-primary {
  background: var(--ps-orange);
  color: white;
  border: 1px solid transparent;
  min-height: var(--ps-btn-height);
  padding: 0 24px;
  border-radius: var(--ps-btn-radius);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-primary:hover { background: var(--ps-orange-hover); }
.btn-new-campaign { font-size: 13px; padding: 0 12px; min-height: 30px; }
.btn-edit-leads { font-size: 14px; padding: 0 18px; min-height: 38px; }
/* Export Leads — delivered campaigns use tracking pieces; cancelled campaigns
   use retained order recipients. Sized to match Edit Leads. */
.btn-export-leads { font-size: 14px; padding: 0 18px; min-height: 38px; }
.page-header-actions { display: flex; gap: 12px; align-items: center; }
.btn-primary:active {
  background: var(--ps-orange-active);
  border-color: var(--ps-orange-active);
}
.btn-primary:disabled {
  background: var(--ps-light-gray);
  border-color: var(--ps-light-gray);
  color: var(--ps-disabled-text);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--ps-white);
  color: var(--ps-orange);
  border: 1px solid var(--ps-border);
  min-height: var(--ps-btn-height);
  padding: 0 24px;
  border-radius: var(--ps-btn-radius);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-secondary:hover {
  background: var(--ps-orange-hover);
  border-color: var(--ps-orange-hover);
  color: var(--ps-white);
}

.btn-secondary:active {
  background: var(--ps-orange-active);
  border-color: var(--ps-orange-active);
  color: var(--ps-white);
}

.btn-secondary:disabled {
  background: var(--ps-light-gray);
  border-color: var(--ps-light-gray);
  color: var(--ps-disabled-text);
  cursor: not-allowed;
}

/* Customize CTA (Edit Next Piece / Continue to Order Summary) follows the Figma:
   teal .btn-primary, NOT PropStream checkout-orange. The Figma uses teal for
   EVERY Direct Mail CTA including "Continue to Payment" — there is no orange
   button in this flow (Ryan 2026-06-17). #submit-campaign-btn therefore inherits
   the default .btn-primary teal; no per-id color override. */

.back-btn {
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  color: var(--ps-orange);
  min-height: var(--ps-btn-height-sm);
  padding: 0 14px;
  border-radius: var(--ps-btn-radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.back-btn:hover {
  background: var(--ps-orange-hover);
  border-color: var(--ps-orange-hover);
  color: var(--ps-white);
}

.back-btn:active {
  background: var(--ps-orange-active);
  border-color: var(--ps-orange-active);
  color: var(--ps-white);
}

.continue-section {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 24px;
}

#page-products {
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

#page-products .continue-section {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--ps-border);
  box-shadow: 0 -6px 18px rgba(60, 70, 84, 0.08);
  gap: 35px;
}

#page-products .continue-section > .btn-secondary,
#page-products .continue-section > .btn-primary {
  flex: 0 0 200px;
  width: 200px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

#page-products.hidden .continue-section {
  display: none;
}

@media (max-width: 500px) {
  #page-products .continue-section {
    gap: 12px;
  }

  #page-products .continue-section > .btn-secondary,
  #page-products .continue-section > .btn-primary {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

/* Pages */
.page { display: block; }
.page.hidden { display: none; }

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: white;
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  max-width: 400px;
}

.modal-icon { font-size: 64px; margin-bottom: 16px; }
.modal-title { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.modal-text { color: var(--ps-gray); margin-bottom: 24px; }

/* Campaign List */
.campaign-list { display: flex; flex-direction: column; gap: 16px; }

.campaign-item {
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  padding: 20px;
}

.campaign-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.campaign-name { font-weight: 600; margin-bottom: 4px; }
.campaign-meta { font-size: 13px; color: var(--ps-gray); }

.campaign-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-delivered { background: #e8f5e9; color: #2e7d32; }
.status-transit { background: #fff3e0; color: #ef6c00; }
.status-production { background: #E2F7FA; color: #1976d2; }

.campaign-progress {
  height: 4px;
  background: var(--ps-border);
  border-radius: 2px;
  overflow: hidden;
}

.campaign-progress-bar {
  height: 100%;
  background: var(--ps-orange);
  border-radius: 2px;
}

/* Mailing List Section */
.mailing-list-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
}

.mailing-list-option:hover {
  border-color: var(--ps-orange);
}

.mailing-list-option.selected {
  border-color: var(--ps-orange);
  background: rgba(18, 130, 146, 0.08);
}

.mailing-list-option input[type="radio"] {
  accent-color: var(--ps-orange);
}

/* CSV Upload Section */
.csv-upload-section {
  display: none;
  margin-top: 16px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
}

.csv-upload-section.visible {
  display: block;
}

.csv-preview {
  margin-top: 12px;
  padding: 12px;
  background: white;
  border: 1px solid var(--ps-border);
  border-radius: 6px;
  font-size: 13px;
}

.csv-preview-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--ps-border);
}

.csv-preview-row:last-child {
  border-bottom: none;
}

/* Style Selector */
.style-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.style-option {
  flex: 1;
  padding: 16px;
  border: 2px solid var(--ps-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.style-option:hover {
  border-color: var(--ps-orange);
}

.style-option.selected {
  border-color: var(--ps-orange);
  background: rgba(18, 130, 146, 0.08);
}

.style-option-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.style-option-desc {
  font-size: 12px;
  color: var(--ps-gray);
}

/* Helper text */
.help-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--ps-gray);
  margin-top: 4px;
}

.sender-required-callout {
  display: none;
  margin: 0 0 12px;
  color: #c62828;
  font-size: 13px;
  font-weight: 600;
}

.sender-required-callout.visible {
  display: block;
}

.panel-section.sender-info-invalid {
  border-color: #f2a7a7;
}

/* PROPS-3114: parent-owned (locked) sender + logo-capable product — the
   expanded panel is a logo uploader only; sender fields never render as an
   editing surface. */
.sender-locked-logo-only #sender-expanded .form-group:not(#logo-upload-group),
.sender-locked-logo-only #sender-expanded .form-row {
  display: none;
}

/* Merge fields hint */
.merge-fields-hint {
  background: #E2F7FA;
  border-radius: 6px;
  padding: 12px;
  font-size: 12px;
  margin-bottom: 12px;
}

.merge-fields-hint strong {
  display: block;
  margin-bottom: 4px;
}

.merge-tag {
  display: inline-block;
  background: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  margin: 2px;
  cursor: pointer;
  border: 1px solid #90caf9;
}

.merge-tag:hover {
  background: #E2F7FA;
}

/* Split Test Slider */
.split-test-config {
  max-width: 600px;
  margin: 0 auto;
}

#split-slider,
#split-review-slider,
#campaign-pieces-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 5px;
  outline: none;
}

#split-slider::-webkit-slider-thumb,
#split-review-slider::-webkit-slider-thumb,
#campaign-pieces-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--ps-dark);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#split-slider::-moz-range-thumb,
#split-review-slider::-moz-range-thumb,
#campaign-pieces-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--ps-dark);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Campaign Builder Styles */
.campaign-builder-config {
  max-width: 700px;
  margin: 0 auto;
}

.interval-btn {
  min-height: var(--ps-btn-height-sm);
  padding: 0 14px;
  border: 2px solid var(--ps-border);
  border-radius: var(--ps-btn-radius);
  background: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.interval-btn:hover {
  border-color: var(--ps-orange-hover);
  background: var(--ps-orange-hover);
  color: var(--ps-white);
}

.interval-btn:active {
  border-color: var(--ps-orange-active);
  background: var(--ps-orange-active);
  color: var(--ps-white);
}

.interval-btn.active {
  border-color: var(--ps-orange);
  background: var(--ps-orange);
  color: white;
}

/* Campaign Timeline */
.campaign-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 8px 0;
}

.timeline-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}

.timeline-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ps-orange);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.timeline-circle.empty {
  background: #e0e0e0;
  color: var(--ps-gray);
}

.timeline-circle.scheduled {
  background: #4caf50;
}

.timeline-date {
  font-size: 11px;
  color: var(--ps-gray);
  margin-top: 6px;
  text-align: center;
}

.timeline-connector {
  flex: 1;
  height: 2px;
  background: #e0e0e0;
  min-width: 24px;
  position: relative;
}

.timeline-connector::after {
  content: attr(data-days);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--ps-gray);
  white-space: nowrap;
}

/* Campaign Review Page */
.campaign-review {
  max-width: 900px;
  margin: 0 auto;
}

.piece-card {
  background: white;
  border: 2px solid var(--ps-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  transition: all 0.2s;
}

.piece-card:hover {
  border-color: var(--ps-orange);
}

.piece-card.selected {
  border-color: var(--ps-orange);
  background: rgba(18, 130, 146, 0.06);
}

.piece-card.scheduled {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.05);
}

.piece-card .piece-image {
  width: 120px;
  height: 80px;
  object-fit: contain;
  background: #f5f5f5;
  border-radius: 6px;
}

.piece-card .piece-info {
  flex: 1;
}

.piece-card .piece-number {
  font-size: 12px;
  color: var(--ps-gray);
  margin-bottom: 4px;
}

.piece-card .piece-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.piece-card .piece-date {
  font-size: 13px;
  color: var(--ps-gray);
}

.piece-card .piece-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
}

.piece-card .piece-status.pending {
  background: #fff3e0;
  color: #e65100;
}

.piece-card .piece-status.scheduled {
  background: #e8f5e9;
  color: #2e7d32;
}

/* Split Test Review */
.split-review {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

.split-variant-card {
  background: white;
  border: 2px solid var(--ps-border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.split-variant-card.variant-a {
  border-color: var(--ps-orange);
}

.split-variant-card.variant-b {
  border-color: var(--ps-checkout);
}

.split-variant-card .variant-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.split-variant-card.variant-a .variant-label {
  color: var(--ps-orange);
}

.split-variant-card.variant-b .variant-label {
  color: var(--ps-checkout);
}

.split-variant-card .variant-image {
  width: 100%;
  max-width: 200px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.split-vs {
  font-size: 24px;
  font-weight: 700;
  color: var(--ps-gray);
  padding-top: 80px;
}

/* Exit Intent Modal */
.exit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.exit-modal-overlay.show {
  display: flex;
}

.exit-modal {
  background: white;
  border-radius: 16px;
  padding: 32px;
  max-width: 480px;
  text-align: center;
}

.exit-modal-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.exit-modal-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
}

.exit-modal-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--ps-gray);
  margin-bottom: 24px;
  line-height: 1.5;
}

.exit-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Reusable Leave Warning Modal — left-aligned card, borderless teal Cancel,
   filled teal Leave Now (Ryan reference: order summary - single send-2). */
.leave-warning-modal__content {
  text-align: left;
  max-width: 380px;
  padding: 28px 28px 24px;
}
.leave-warning-modal__title { margin-bottom: 10px; }
.leave-warning-modal__text { margin-bottom: 20px; }
.leave-warning-modal__buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
/* Cancel/secondary action shared by the creation-flow and editor contexts through
   #leave-warning-modal. PROPS-3033 hover fill remains grey (--ps-grey-50) per Figma. */
.leave-warning-modal__cancel {
  background: none;
  border: none;
  color: var(--ps-primary);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: var(--ps-btn-radius);
  transition: background 0.2s, color 0.2s;
}
.leave-warning-modal__cancel:hover {
  background: var(--ps-grey-50);
  color: var(--ps-primary-hover);
}
.leave-warning-modal__cancel:active {
  background: rgba(18, 130, 146, 0.15);
  color: var(--ps-primary-active);
}
.leave-warning-modal__cancel:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
}

/* My Campaigns - Hierarchical View */
.campaign-group {
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.campaign-group-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--ps-border);
}

.campaign-group-header:hover {
  background: #fafafa;
}

.campaign-group-title {
  font-weight: 600;
  font-size: 18px;
}

.campaign-group-meta {
  font-size: 14px;
  font-weight: 500;
  color: var(--ps-gray);
  margin-top: 4px;
}

.campaign-type-inline-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }

.campaign-group-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.campaign-group-thumb {
  width: 56px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Figma node 1:21415 — Direct mail preview section. The 1,038px detail
   column is centered in the 1,132px application container (47px gutters in
   the source frame). */
body:has(#page-campaign-detail:not(.hidden)) {
  background: var(--ps-grey-50);
}

#page-campaign-detail {
  width: 100%;
  max-width: 1038px;
  margin-right: auto;
  margin-left: auto;
}

#campaign-detail-body .campaign-detail-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#campaign-detail-body .campaign-detail-wrap-canceled {
  gap: 27px;
}

.campaign-detail-preview {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  padding: 19px 20px;
  overflow: hidden;
  background: var(--ps-white);
  border-radius: 12px;
}

.campaign-detail-preview .campaign-detail-header {
  display: flex;
  flex: 0 0 109.2857px;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 50px;
  width: calc(100% - 2px);
  height: 109.2857px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: default;
}

.campaign-detail-preview .campaign-detail-header:hover {
  background: transparent;
}

.campaign-detail-preview .campaign-group-header-left {
  display: flex;
  flex: 0 0 804px;
  align-items: center;
  gap: 21px;
  width: 804px;
  min-width: 0;
  height: 109.2857px;
}

.campaign-detail-thumb-slot {
  flex: 0 0 153px;
  width: 153px;
  height: 109.2857px;
  overflow: hidden;
  border-radius: 16.3929px;
}

.campaign-detail-preview .campaign-group-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.campaign-detail-preview .campaign-group-header-copy {
  display: flex;
  flex: 0 0 630px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 630px;
  height: 101px;
  min-width: 0;
  overflow: visible;
}

.campaign-detail-preview .campaign-group-title {
  max-width: 100%;
  overflow: hidden;
  color: var(--ps-dark);
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-detail-preview .campaign-group-meta {
  width: 100%;
  height: 17px;
  margin: 0;
  overflow: hidden;
  color: var(--ps-grey-500);
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-detail-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px;
}

/* Figma 1:20168 (Tags/"Scheduled") — indigo tag, not the teal/blue upcoming badge.
   Scoped to the scheduled group status only; Accepted stays on the legacy badge. */
.campaign-detail-preview .order-status-badge.status-scheduled {
  background: var(--ps-campaign-detail-scheduled-bg);
  color: var(--ps-periwinkle-500);
  padding: 4px 10px;
  border-radius: 50px;
}

.campaign-detail-preview .order-status-badge.status-scheduled .campaign-status-icon {
  width: 16px;
  height: 16px;
}

.campaign-preview-icon {
  display: block;
  flex: 0 0 auto;
}

.campaign-detail-preview .campaign-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 4px 10px;
  color: #3F3F46;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  background: var(--ps-grey-50);
  border-radius: 50px;
}

.campaign-detail-preview .campaign-type-icon {
  width: 14.4286px;
  height: 14.4286px;
  margin-bottom: 0;
}

.campaign-detail-preview .order-status-badge {
  height: 24px;
  padding: 4px 8px;
  gap: 4px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.campaign-detail-preview .campaign-status-icon {
  width: 13.3333px;
  height: 13.3333px;
}

.campaign-detail-preview.campaign-detail-preview-canceled .order-status-badge.cancelled {
  color: var(--ps-rose-500, #ca1551);
  background: var(--ps-rose-50, #ffedf3);
}

.campaign-detail-preview-canceled .campaign-status-icon {
  width: 16px;
  height: 16px;
}

.campaign-status-icon-fallback,
.campaign-status-icon-fallback svg {
  display: block;
  width: 14px;
  height: 14px;
}

.campaign-detail-actions {
  display: flex;
  flex: 0 0 142px;
  align-items: flex-start;
  justify-content: flex-end;
  width: 142px;
}

.campaign-detail-preview .btn-export-leads,
.campaign-detail-preview .btn-edit-leads {
  width: 142px;
  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  gap: 6px;
  color: var(--ps-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 50px;
}

/* Figma 1:5506/1:5512/1:5516 — white outline at rest, teal on hover,
   dark teal while pressed. */
.campaign-detail-preview .btn-edit-leads {
  width: 99px;
  min-width: 99px;
  color: var(--ps-primary);
  background: var(--ps-white);
  border-color: var(--ps-border);
}

.campaign-detail-preview .btn-edit-leads:hover {
  color: var(--ps-white);
  background: var(--ps-primary-hover);
  border-color: var(--ps-primary-hover);
}

.campaign-detail-preview .btn-edit-leads:active {
  color: var(--ps-white);
  background: var(--ps-primary-active);
  border-color: var(--ps-primary-active);
}

.campaign-detail-preview .campaign-export-icon {
  width: 18px;
  height: 18px;
}

.campaign-detail-preview .btn-export-leads:hover .campaign-export-icon {
  filter: brightness(0) invert(1);
}

.campaign-group-toggle {
  font-size: 18px;
  color: var(--ps-gray);
  transition: transform 0.2s;
}

.campaign-group.expanded .campaign-group-toggle {
  transform: rotate(180deg);
}

.campaign-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.campaign-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ps-dark);
}
.campaign-stat-label {
  font-size: 12px;
  color: var(--ps-gray);
  margin-top: 2px;
}

.campaign-group-content {
  display: none;
  padding: 0 20px 16px;
}

.campaign-group.expanded .campaign-group-content {
  display: block;
}

/* Phase 4a: campaign detail body reuses .campaign-group-content as wrapper but
   has no .campaign-group.expanded ancestor — force visible inside detail page. */
#campaign-detail-body .campaign-group-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
}

#campaign-detail-body .campaign-detail-wrap-canceled .campaign-group-content {
  gap: 27px;
}

.campaign-orders-card {
  padding: 16px 22px;
  background: var(--ps-white);
  border-radius: 12px;
}

/* Figma node 1:21416 — delivered Drop Details. Separators are absolutely
   positioned in the 40px row gaps, matching the zero-height Figma line layer
   without changing the card's 364px intrinsic height. */
.campaign-orders-card-delivered {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 16px 25px 20.4px 22px;
  overflow: hidden;
}

.campaign-orders-card-delivered .campaign-order-item-delivered {
  position: relative;
  display: flex;
  flex: 0 0 82.6px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 991px;
  height: 82.6px;
  min-height: 82.6px;
  padding: 0;
  border: 0;
}

.campaign-orders-card-delivered .order-piece-info {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 602px;
  height: 82.6px;
}

.campaign-orders-card-delivered .order-piece-thumb-slot {
  flex: 0 0 118px;
  width: 118px;
  height: 82.6px;
  overflow: hidden;
  background: #f9f9f9;
  border: 1px solid var(--ps-grey-200);
  border-radius: 4px;
}

.campaign-orders-card-delivered .campaign-order-item-delivered:first-child .order-piece-thumb-slot {
  background: var(--ps-white);
  border-color: transparent;
  border-radius: 9.44px;
}

.campaign-orders-card-delivered .order-piece-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f9f9f9;
  border-radius: inherit;
}

.campaign-orders-card-delivered .order-piece-copy {
  display: flex;
  flex: 0 0 466px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 466px;
  height: 76px;
  overflow: visible;
}

.campaign-orders-card-delivered .order-piece-name,
.campaign-orders-card-delivered .order-piece-unit-price {
  display: flex;
  align-items: center;
  width: 466px;
  height: 17px;
  overflow: visible;
  color: var(--ps-dark);
  line-height: 24px;
  white-space: nowrap;
}

.campaign-orders-card-delivered .order-piece-name {
  font-size: 16px;
  font-weight: 600;
}

.campaign-orders-card-delivered .order-piece-unit-price {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.campaign-orders-card-delivered .order-delivered-at {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 4px 10px;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  background: #e8f5e9;
  border-radius: 10px;
}

.campaign-orders-card-delivered .order-delivered-clock {
  display: block;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}

.campaign-orders-card-delivered .campaign-order-separator {
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  display: block;
  width: 991px;
  height: 1px;
}

.campaign-orders-card-delivered .campaign-order-item-delivered:last-child .campaign-order-separator {
  display: none;
}

/* Figma node 1:20417 — pre-mail Drop Details. This layout is deliberately
   scoped to campaigns whose drops are all pre-production/production so mixed
   and mailstream states retain their existing interaction surfaces. */
.campaign-orders-card-premail {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 16px 25px 20.4px 22px;
  overflow: hidden;
}

.campaign-orders-card-premail .campaign-order-item-premail {
  position: relative;
  display: flex;
  flex: 0 0 82.6px;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 991px;
  height: 82.6px;
  min-height: 82.6px;
  padding: 0;
  border: 0;
}

.campaign-orders-card-premail .order-piece-info {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 602px;
  height: 82.6px;
}

.campaign-orders-card-premail .order-piece-thumb-slot {
  flex: 0 0 118px;
  width: 118px;
  height: 82.6px;
  overflow: hidden;
  background: #f9f9f9;
  border: 1px solid var(--ps-border);
  border-radius: 4px;
}

.campaign-orders-card-premail .campaign-order-item-premail:first-child .order-piece-thumb-slot {
  background: var(--ps-white);
  border-color: transparent;
  border-radius: 9.44px;
}

.campaign-orders-card-premail .order-piece-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f9f9f9;
  border-radius: inherit;
}

.campaign-orders-card-premail .order-piece-copy {
  display: flex;
  flex: 0 0 466px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 466px;
  height: 76px;
  overflow: visible;
}

.campaign-orders-card-premail .order-piece-name,
.campaign-orders-card-premail .order-piece-unit-price {
  display: flex;
  align-items: center;
  width: 466px;
  height: 17px;
  overflow: hidden;
  color: var(--ps-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-orders-card-premail .order-piece-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.campaign-orders-card-premail .order-piece-unit-price {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.campaign-orders-card-premail .order-piece-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.campaign-orders-card-premail .order-schedule-at,
.campaign-orders-card-premail .order-billing-at {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  border-radius: 50px;
}

.campaign-orders-card-premail .order-schedule-at {
  color: #5b68c3;
  background: #e8ebfc;
}

.campaign-orders-card-premail .order-billing-at {
  color: #3c4654;
  background: var(--ps-grey-50);
}

.campaign-orders-card-premail .order-schedule-icon {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.campaign-orders-card-premail .order-billing-icon {
  display: block;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}

.campaign-orders-card-premail .order-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
  margin-left: auto;
}

.campaign-orders-card-premail .order-piece-locked-note {
  width: 255px;
  max-width: none;
  color: #66707d;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  text-align: right;
}

.campaign-orders-card-premail .reschedule-btn,
.campaign-orders-card-premail .cancel-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 50px;
}

/* Figma 1:5506–1:5518 — outlined defaults with exact teal/rose hover and
   clicked variants. Explicit widths preserve the approved 108px/76px layout. */
.campaign-orders-card-premail .reschedule-btn {
  width: 108px;
  color: var(--ps-primary);
}

.campaign-orders-card-premail .reschedule-btn:hover {
  color: var(--ps-white);
  background: var(--ps-primary-hover);
  border-color: var(--ps-primary-hover);
}

.campaign-orders-card-premail .reschedule-btn:active {
  color: var(--ps-white);
  background: var(--ps-primary-active);
  border-color: var(--ps-primary-active);
}

.campaign-orders-card-premail .cancel-order-btn {
  width: 76px;
  color: var(--ps-rose-500);
}

.campaign-orders-card-premail .cancel-order-btn:hover {
  color: var(--ps-white);
  background: var(--ps-rose-500);
  border-color: var(--ps-rose-500);
  text-decoration: none;
}

.campaign-orders-card-premail .cancel-order-btn:active {
  color: var(--ps-white);
  background: var(--ps-rose-700);
  border-color: var(--ps-rose-700);
}

.campaign-orders-card-premail .campaign-order-separator {
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  display: block;
  width: 991px;
  height: 1px;
}

.campaign-orders-card-premail .campaign-order-item-premail:last-child .campaign-order-separator {
  display: none;
}

/* Figma node 1:21144 — canceled Drop Details. API-backed product artwork uses
   the same fixed preview geometry as delivered and pre-mail order rows. */
.campaign-orders-card-canceled {
  display: flex;
  flex-direction: column;
  padding: 16px 25px 16.4px 22px;
  overflow: hidden;
}

.campaign-orders-card-canceled .campaign-order-item-canceled {
  display: flex;
  flex: 0 0 82.6px;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 991px;
  height: 82.6px;
  min-height: 82.6px;
  padding: 0;
  border: 0;
}

.campaign-orders-card-canceled .order-piece-info {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 602px;
  height: 82.6px;
}

.campaign-orders-card-canceled .order-piece-thumb-slot {
  flex: 0 0 118px;
  width: 118px;
  height: 82.6px;
  overflow: hidden;
  background: var(--ps-white);
  border: 0;
  border-radius: 9.44px;
}

.campaign-orders-card-canceled .order-piece-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f9f9f9;
  border-radius: inherit;
}

.campaign-orders-card-canceled .order-piece-copy {
  display: flex;
  flex: 0 0 466px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 466px;
  height: 76px;
  overflow: visible;
}

.campaign-orders-card-canceled .order-piece-name,
.campaign-orders-card-canceled .order-piece-unit-price {
  display: flex;
  align-items: center;
  width: 466px;
  height: 17px;
  overflow: visible;
  color: var(--ps-dark);
  white-space: nowrap;
}

.campaign-orders-card-canceled .order-piece-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.campaign-orders-card-canceled .order-piece-unit-price {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.campaign-orders-card-canceled .order-canceled-at {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 4px 8px;
  color: #c62828;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  background: #ffebee;
  border-radius: 10px;
}

#campaign-detail-body .tracking-section {
  margin-top: 0;
}

.campaign-detail-preview .campaign-deliver-summary {
  display: grid;
  grid-template-columns: repeat(2, 490px);
  gap: 17px;
  width: 997px;
  height: 55px;
  padding: 0;
}

.campaign-detail-preview .campaign-deliver-line {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 490px;
  height: 55px;
  padding: 0 24px;
  color: var(--ps-dark);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  background: var(--ps-white);
  border: 1px solid var(--ps-grey-300);
  border-radius: 12px;
}

.campaign-detail-preview .campaign-deliver-line-dedup {
  gap: 9px;
  padding-right: 16px;
  padding-left: 16px;
}

.campaign-detail-preview .campaign-deliver-icon {
  width: 23px;
  height: 23px;
}

.campaign-detail-preview .campaign-dedup-icon {
  width: 24px;
  height: 24px;
}

.campaign-detail-preview .campaign-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 998px;
  height: 84px;
  padding: 0;
  margin: 0;
  text-align: center;
  background: var(--ps-grey-50);
  border: 0;
  border-radius: 12px;
}

.campaign-detail-preview .campaign-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.campaign-detail-preview .campaign-stat-label {
  margin: 0;
  color: var(--ps-grey-500);
  font-size: 12px;
  font-weight: 400;
  line-height: 14.5px;
}

.campaign-detail-preview .campaign-stat-value {
  color: var(--ps-dark);
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px;
}

.campaign-order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.campaign-order-item:last-child {
  border-bottom: none;
}

.order-piece-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-piece-thumb {
  width: 50px;
  height: 35px;
  object-fit: contain;
  background: #f5f5f5;
  border-radius: 4px;
}

.order-piece-name {
  font-weight: 600;
  font-size: 14px;
}

.order-piece-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--ps-gray);
}

/* Phase 4b-2: Bill At per-drop line — only rendered when an authoritative
   order.bill_at / billed_at / billAt field is present (no client compute). */
.order-piece-bill-at {
  font-size: 12px;
  font-weight: 500;
  color: var(--ps-gray);
  margin-top: 2px;
}

/* Phase 4c: billed/locked static note that replaces Reschedule + Cancel
   buttons on the per-drop row when order.paymentConfirmed===true and the
   drop is not terminal/delivered. Static Figma copy — no computation. */
.order-piece-locked-note {
  font-size: 12px;
  color: var(--ps-gray);
  font-style: italic;
  max-width: 320px;
  text-align: right;
  line-height: 1.35;
}

.order-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-status-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.order-status-badge svg {
  flex-shrink: 0;
  vertical-align: middle;
}

.order-status-badge.upcoming {
  background: #E2F7FA;
  color: #1565c0;
}

.order-status-badge.sent {
  background: #e8f5e9;
  color: #2e7d32;
}

.order-status-badge.production {
  background: #E2F7FA;
  color: #128292;
}
.order-status-badge.mailed {
  background: #FFF3E0;
  color: #F16722;
}
.order-status-badge.in-transit {
  background: #E2F7FA;
  color: #128292;
}
.order-status-badge.cancelled {
  background: #ffebee;
  color: #c62828;
}

.cancel-order-btn {
  font-size: 12px;
  color: #c62828;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.cancel-order-btn:hover {
  text-decoration: underline;
}

/* Upcoming Section */
.upcoming-section {
  background: #E2F7FA;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.upcoming-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 16px;
  color: #1565c0;
}

.upcoming-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.upcoming-item:last-child {
  margin-bottom: 0;
}

.upcoming-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.upcoming-action-btn { padding: 4px 10px; border-radius: 20px; border: 1px solid #e5e7eb; background: white; font-size: 12px; font-weight: 600; cursor: pointer; }
.upcoming-action-btn:hover { background: #f9fafb; }
.reschedule-btn { color: #2563eb; border-color: #bfdbfe; }
.reschedule-btn:hover { background: #eff6ff; }
.cancel-btn { color: #dc2626; border-color: #fecaca; }
.cancel-btn:hover { background: #fef2f2; }
.save-btn { color: #059669; border-color: #a7f3d0; }
.save-btn:hover { background: #ecfdf5; }
.reschedule-picker { display: flex; gap: 6px; align-items: center; margin-top: 8px; padding: 8px; background: #f9fafb; border-radius: 6px; border: 1px solid #e5e7eb; }
.reschedule-picker input[type="date"] { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px; }

/* Phase 4b-1: when the reschedule picker is appended inside a
   .campaign-order-item (Campaign Detail per-drop row), allow it to wrap to a
   new line below the row instead of squeezing between the info block and the
   actions cluster. */
.campaign-order-item { flex-wrap: wrap; }
.campaign-order-item > .reschedule-picker { flex-basis: 100%; }

.campaigns-context-warning {
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  color: #7c5a00;
  font-size: 14px;
  line-height: 1.45;
}

.campaigns-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 16px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: #f8fbff;
  border: 1px solid #E2F7FA;
}

.campaigns-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #d7e9fb;
  border-top-color: #1565c0;
  animation: campaigns-spin 0.8s linear infinite;
}

.campaigns-loading-text {
  color: #1565c0;
  font-size: 14px;
  font-weight: 500;
}

@keyframes campaigns-spin {
  to { transform: rotate(360deg); }
}

/* Boot veil (PROPS-3027 / PROPS-3109): covers the default-visible page-setup
   while the embedded bootstrap handshake resolves the sender state. JS adds
   .bp-boot-veil-hidden to dismiss; the delayed failsafe animation guarantees
   the veil never traps the UI if scripting fails entirely. */
#bp-boot-veil {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ps-bg);
  animation: bp-boot-veil-failsafe 0s linear 15s forwards;
}
#bp-boot-veil.bp-boot-veil-hidden {
  display: none;
  animation: none;
}
@keyframes bp-boot-veil-failsafe {
  to { visibility: hidden; pointer-events: none; }
}


/* ============================================================
   RESPONSIVE + IFRAME STYLES
   ============================================================ */

/* ========== RESPONSIVE STYLES ========== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
  .header {
    padding: 12px 16px;
  }
  
  .logo {
    height: 32px;
  }
  
  .my-campaigns-btn {
    padding: 0 12px;
    font-size: 14px;
  }
  
  .main {
    padding: 16px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .page-subtitle {
    font-size: 16px;
  }
  
  .campaign-types {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .campaign-type-card {
    padding: 20px 16px;
  }
  
  .type-icon-svg {
    width: 40px;
    height: 40px;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .product-card {
    padding: 0;
  }

  .product-info {
    padding: 12px;
  }
  
  .product-name {
    font-size: 12px;
  }
  
  .category-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .category-tab {
    padding: 0 12px;
    font-size: 14px;
  }
  
  .preview-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .preview-image-container {
    padding: 16px;
    order: -1; /* Show preview first on mobile */
  }
  
  .customize-panel {
    padding: 16px;
  }
  
  .panel-section {
    padding: 16px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .form-row .form-group {
    flex: none !important;
    width: 100%;
  }
  
  .btn-primary, .btn-secondary {
    padding: 0 20px;
    font-size: 18px;
    min-height: var(--ps-btn-height);
  }
  
  .merge-tag {
    padding: 6px 10px;
    font-size: 11px;
  }
  
  .interval-btn {
    padding: 0 12px;
    font-size: 14px;
    min-height: var(--ps-btn-height-sm);
  }
  
  .campaign-builder-config {
    padding: 16px;
  }
  
  .campaign-timeline {
    gap: 8px;
    padding: 12px 0;
  }
  
  .timeline-piece {
    min-width: 50px;
  }
  
  .timeline-circle {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .price-summary {
    padding: 16px;
  }
  
  .modal-content {
    margin: 16px;
    padding: 24px 20px;
    max-width: calc(100% - 32px);
  }
  
  .exit-modal {
    margin: 16px;
    padding: 24px 20px;
    max-width: calc(100% - 32px);
  }
  
  .split-review {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .split-vs {
    padding: 8px 0;
    font-size: 20px;
  }
  
  .campaign-review {
    padding: 16px;
  }
  
  .piece-card {
    flex-direction: column;
    text-align: center;
  }
  
  .piece-image {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
  
  /* Campaign groups */
  .campaign-group-header {
    padding: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .campaign-order-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .upcoming-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  /* My Info section */
  .my-info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Small phones (480px and below) */
@media (max-width: 480px) {
  .main {
    padding: 12px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
  }
  
  .product-card {
    display: flex;
    flex-direction: row;
    gap: 12px;
    text-align: left;
  }
  
  .product-image {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
  }
  
  .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }
  
  .preview-tabs {
    flex-wrap: wrap;
  }
  
  .preview-tab {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: 0 8px;
  }
  
  .category-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  
  .category-tab {
    flex-shrink: 0;
  }
  
  .steps {
    gap: 8px;
  }
  
  .step-dot {
    width: 10px;
    height: 10px;
  }
  
  .interval-buttons {
    flex-wrap: wrap;
  }
  
  .interval-btn {
    flex: 1 1 calc(50% - 4px);
  }
  
  .exit-modal-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .exit-modal-buttons button {
    width: 100%;
  }
}

/* Ensure touch targets are large enough */
@media (pointer: coarse) {
  .product-card,
  .category-tab,
  .interval-btn,
  .preview-tab,
  .merge-tag,
  .campaign-type-card,
  .campaign-group-header {
    min-height: 44px;
  }
  
  input[type="text"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* Print styles (hide non-essential elements) */
@media print {
  .header,
  .steps,
  .btn-primary,
  .btn-secondary,
  .category-tabs {
    display: none !important;
  }
}

/* Toast Notification */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--ps-dark);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  max-width: 90%;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.toast-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}

.toast-subtitle {
  font-size: 13px;
  opacity: 0.8;
}

.toast-image {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  display: none;
  background: rgba(255,255,255,0.1);
}

@media (max-width: 480px) {
  .toast {
    top: 70px;
    padding: 12px 16px;
    gap: 10px;
  }
  .toast-title {
    font-size: 14px;
  }
  .toast-subtitle {
    font-size: 12px;
  }
  .toast-image {
    width: 40px;
    height: 30px;
  }
}

/* ========== IFRAME MODE STYLES ========== */
body.iframe-mode {
  min-height: auto;
}

body.iframe-mode .header {
  display: none;
}

body.iframe-mode .main {
  padding-top: 20px;
}

body.iframe-mode .toast {
  top: 20px;
}

/* Compact header option for iframe */
body.iframe-mode.show-header .header {
  display: flex;
  padding: 12px 20px;
}

body.iframe-mode.show-header .header .logo {
  height: 24px;
}

body.iframe-mode.show-header .main {
  padding-top: 24px;
}

/* Hide My Campaigns in iframe - PropStream manages this */
body.iframe-mode .my-campaigns-btn {
  display: none;
}

body.iframe-mode #page-campaigns {
  display: none !important;
}

/* CSP inline-style replacements (auto-generated) */
.csp-inline-1 { background: var(--ps-white); border-radius: 12px; padding: 32px; margin-bottom: 24px; }
.csp-inline-2 { flex: 2; }
.csp-inline-3 { flex: 1; }
.csp-inline-4 { background: #E2F7FA; border-radius: 8px; padding: 16px; margin-bottom: 24px; display: flex; gap: 12px; align-items: flex-start; }
.csp-inline-5 { font-size: 20px; }
.csp-inline-6 { display: block; margin-bottom: 4px; }
.csp-inline-7 { font-size: 14px; color: var(--ps-gray); }
.csp-inline-8 { width: 100%; }
.csp-inline-9 { width: 100%; margin-top: 12px; }
.csp-inline-10 { text-align: right; }
.csp-inline-11 { font-size: 14px; opacity: 0.8; }
.csp-inline-12 { font-weight: 600; }
.csp-inline-13 { width: 100%; display: none; }
.csp-inline-14 { display: none; }
.csp-inline-15 { background: var(--ps-white); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.csp-inline-16 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.csp-inline-17 { display: flex; justify-content: space-between; margin-bottom: 8px; }
.csp-inline-18 { font-weight: 600; color: var(--ps-orange); }
.csp-inline-19 { font-weight: 600; color: var(--ps-checkout); }
.csp-inline-20 { position: relative; margin-bottom: 8px; }
.csp-inline-21 { width: 100%; height: 8px; -webkit-appearance: none; background: linear-gradient(to right, var(--ps-orange) 50%, var(--ps-checkout) 50%); border-radius: 4px; cursor: pointer; }
.csp-inline-22 { display: flex; justify-content: space-between; font-size: 13px; color: var(--ps-gray); }
.csp-inline-23 { background: var(--ps-light-blue); border-radius: 8px; padding: 16px; margin-top: 20px; display: flex; gap: 12px; align-items: flex-start; }
.csp-inline-24 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.csp-inline-25 { margin-bottom: 24px; }
.csp-inline-26 { display: block; font-weight: 600; margin-bottom: 8px; }
.csp-inline-27 { display: flex; align-items: center; gap: 16px; }
.csp-inline-28 { flex: 1; height: 8px; -webkit-appearance: none; background: linear-gradient(to right, var(--ps-orange) 25%, #e0e0e0 25%); border-radius: 4px; cursor: pointer; }
.csp-inline-29 { font-size: 24px; font-weight: 700; color: var(--ps-orange); min-width: 40px; text-align: center; }
.csp-inline-30 { display: flex; gap: 8px; flex-wrap: wrap; }
.csp-inline-31 { display: none; margin-top: 12px; }
.csp-inline-32 { width: 100px; }
.csp-inline-33 { background: #f9f9f9; border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.csp-inline-34 { font-size: 13px; color: var(--ps-gray); margin-bottom: 12px; }
.csp-inline-35 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; background: #fff3e0; border-radius: 8px; }
.csp-inline-36 { font-size: 12px; color: var(--ps-gray); }
.csp-inline-37 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.csp-inline-38 { background: #f9f9f9; border-radius: 12px; padding: 20px; margin-top: 24px; }
.csp-inline-39 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; }
.csp-inline-40 { font-size: 24px; font-weight: 700; }
.csp-inline-41 { font-size: 24px; font-weight: 700; color: var(--ps-orange); }
.csp-inline-42 { margin-top: 24px; }
.csp-inline-44 { font-weight: 600; margin-bottom: 4px; }
.csp-inline-45 { font-size: 13px; color: var(--ps-gray); }
.csp-inline-46 { max-width: 500px; margin: 32px auto; background: var(--ps-white); border-radius: 12px; padding: 24px; }
.csp-inline-47 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.csp-inline-48 { max-width: 500px; margin: 0 auto 24px; background: var(--ps-light-blue); border-radius: 8px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.csp-inline-49 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.csp-inline-50 { margin-bottom: 0; }
.csp-inline-51 { background: var(--ps-white); border: 1px solid var(--ps-border); color: var(--ps-orange); font-size: 14px; font-weight: 600; min-height: var(--ps-btn-height-sm); padding: 0 14px; border-radius: var(--ps-btn-radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.csp-inline-51:hover { background: var(--ps-orange-hover); border-color: var(--ps-orange-hover); color: var(--ps-white); }
.csp-inline-51:active { background: var(--ps-orange-active); border-color: var(--ps-orange-active); color: var(--ps-white); }
.csp-inline-52 { background: #f9f9f9; border-radius: 8px; padding: 12px; font-size: 13px; line-height: 1.5; }
.csp-inline-53 { color: var(--ps-gray); }
.csp-inline-54 { color: var(--ps-gray); margin-top: 4px; }
.csp-inline-55 { margin-left: 8px; color: #999; font-size: 12px; }
.csp-inline-56 { background: #e8f5e9; border-radius: 8px; padding: 12px; margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; }
.csp-inline-57 { font-size: 16px; }
.csp-inline-58 { font-size: 12px; font-weight: 500; }
.csp-inline-59 { background: #f9f9f9; border: 1px solid #ececec; border-radius: 8px; padding: 16px; }
.csp-inline-60 { display: flex; align-items: center; gap: 12px; }
.csp-inline-61 { font-size: 24px; }
.csp-inline-62 { font-weight: 600; margin-bottom: 2px; }
.csp-inline-63 { color: var(--ps-gray); font-size: 13px; }
.csp-inline-64 { width: 100%; margin-top: 16px; }
.csp-inline-65 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.csp-inline-66 { margin-top: 48px; }
.csp-inline-67 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.csp-inline-68 { font-size: 18px; font-weight: 600; }
.csp-inline-69 { background: var(--ps-white); border-radius: 12px; padding: 20px; }
.csp-inline-70 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.csp-inline-71 { font-size: 12px; color: var(--ps-gray); margin-bottom: 4px; }
.csp-inline-72 { font-weight: 500; }
.csp-inline-73 { font-weight: 500; white-space: pre-line; }
.csp-inline-74 { display: none; background: var(--ps-white); border-radius: 12px; padding: 24px; }
.csp-inline-75 { display: flex; gap: 12px; margin-top: 16px; }
.csp-inline-76 { max-width: 400px; }
.csp-inline-77 { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.csp-inline-78 { background: #c62828; }
.csp-inline-79 { max-width: 480px; }
.csp-inline-80 { background: #fff8e1; border-radius: 8px; padding: 16px; margin: 16px 0; text-align: left; }
.csp-inline-81 { font-weight: 600; margin-bottom: 8px; color: #f57c00; }
.csp-inline-82 { margin: 0; padding-left: 20px; font-size: 14px; color: #666; line-height: 1.6; }
.csp-inline-83 { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.csp-inline-84 { background: var(--ps-orange); }
.csp-inline-85 { background: var(--ps-white); border: 1px solid var(--ps-border); color: var(--ps-orange); font-size: 14px; font-weight: 600; min-height: var(--ps-btn-height-sm); padding: 0 14px; border-radius: var(--ps-btn-radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.csp-inline-85:hover { background: var(--ps-orange-hover); border-color: var(--ps-orange-hover); color: var(--ps-white); }
.csp-inline-85:active { background: var(--ps-orange-active); border-color: var(--ps-orange-active); color: var(--ps-white); }


/* ====================================================================
   Tracking Dashboard — Funnel + Cards + Piece Table
   ==================================================================== */

.tracking-svg-icon { display: inline-block; vertical-align: -3px; margin-right: 4px; }

.tracking-section {
  margin-top: 16px;
  box-sizing: border-box;
  padding: 21px 27px;
  background: var(--ps-white);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* Frame 1477393 has a 984px padded content box and a 960px analytics column,
   leaving 24px of intentional breathing room on its right edge. */
.tracking-section > :not(.tracking-section-title):not(.tracking-loading):not(.tracking-error) {
  box-sizing: border-box;
  width: calc(100% - 24px);
}

/* Top-level section title (PROPS-3205 — the section previously had none).
   Distinct from `.tracking-section-heading`, which titles the sub-sections
   ("Timeline", "Geographic Distribution"). */
.tracking-section-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ps-dark);
  margin-bottom: 22px;
}

/* --- Loading / Error / Empty states --- */

.tracking-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--ps-gray);
  font-size: 14px;
}

.tracking-loading-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--ps-border);
  border-top-color: var(--ps-orange);
  border-radius: 50%;
  animation: tracking-spin 0.7s linear infinite;
}

@keyframes tracking-spin {
  to { transform: rotate(360deg); }
}

.tracking-error {
  padding: 20px;
  color: #c62828;
  font-size: 14px;
  text-align: center;
}

.tracking-empty-state {
  text-align: center;
  padding: 40px 20px;
}

.tracking-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.tracking-empty-icon svg {
  width: 40px;
  height: 40px;
}

.tracking-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ps-dark);
  margin-bottom: 8px;
}

.tracking-empty-sub {
  font-size: 14px;
  color: var(--ps-gray);
  margin-bottom: 12px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.tracking-empty-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-orange);
}

/* Figma node 1:21154 — terminal canceled campaigns use a compact, bordered
   empty state and never append the return-to-sender suppression footer. */
.tracking-section-canceled {
  width: 100%;
  height: 274px;
  padding: 0;
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 12px;
}

.tracking-section.tracking-section-canceled > .tracking-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 59px 20px 0;
  text-align: center;
}

.tracking-section-canceled .tracking-empty-icon {
  width: 36px;
  height: 49px;
  margin: 0 0 12px;
  color: var(--ps-dark);
  font-size: 40px;
  font-weight: 400;
  line-height: 49px;
}

.tracking-section-canceled .tracking-empty-title {
  height: 22px;
  margin: 0 0 8px;
  color: var(--ps-dark);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.tracking-section-canceled .tracking-empty-sub {
  width: 342px;
  max-width: 342px;
  height: 34px;
  margin: 0 0 12px;
  color: var(--ps-grey-500);
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
}

.tracking-section-canceled .tracking-empty-status {
  height: 16px;
  color: #ca1551;
  font-size: 13px;
  font-weight: 600;
  line-height: 15.5px;
}

/* --- Suppression List --- */

.suppression-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ps-border);
}
.suppression-card {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background: var(--ps-white);
  border-radius: 12px;
}
.suppression-header {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 44px;
  gap: 12px;
  align-items: center;
  height: 44px;
  padding: 0 11px 0 16px;
  background: #fef2f2;
  border-radius: 0;
  border: 1px solid #fecaca;
}
.suppression-title { font-weight: 600; font-size: 14px; color: #dc2626; }
.suppression-add-marketing {
  margin-left: auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ps-primary);
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 50px;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.suppression-add-marketing-icon {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url('../assets/icons/dashboard-add.svg') center / 12px 12px no-repeat;
  mask: url('../assets/icons/dashboard-add.svg') center / 12px 12px no-repeat;
}
.suppression-add-marketing:hover {
  color: var(--ps-white);
  background: var(--ps-primary);
  border-color: var(--ps-primary);
}
.suppression-add-marketing:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 130, 146, 0.25);
}
.suppression-add-marketing:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
}
.suppression-add-marketing:disabled { opacity: 0.6; cursor: not-allowed; }
.suppression-table-frame {
  box-sizing: border-box;
  flex: 0 0 355px;
  height: 355px;
  padding-top: 1px;
  overflow: hidden;
  background: var(--ps-white);
  border: 1px solid #fecaca;
  border-top: 0;
}
.suppression-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border: 0;
}
.suppression-table colgroup {
  display: none;
}
.suppression-col-status { width: 226px; }
.suppression-col-recipient { width: 252px; }
.suppression-col-address { width: 360px; }
.suppression-col-scan { width: 122px; }
.suppression-table thead,
.suppression-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.suppression-table tbody {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 323px;
  padding: 5px 0 6px;
  overflow-y: auto;
  scrollbar-width: none;
}
.suppression-table tbody::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.suppression-table-pii th:nth-child(1),
.suppression-table-pii td:nth-child(1),
.suppression-table-redacted th:nth-child(1),
.suppression-table-redacted td:nth-child(1) { width: 23.5416667%; }
.suppression-table-pii th:nth-child(2),
.suppression-table-pii td:nth-child(2),
.suppression-table-redacted th:nth-child(2),
.suppression-table-redacted td:nth-child(2) { width: 26.25%; }
.suppression-table-pii th:nth-child(3),
.suppression-table-pii td:nth-child(3),
.suppression-table-redacted th:nth-child(3),
.suppression-table-redacted td:nth-child(3) { width: 37.5%; }
.suppression-table-pii th:nth-child(4),
.suppression-table-pii td:nth-child(4),
.suppression-table-redacted th:nth-child(4),
.suppression-table-redacted td:nth-child(4) { width: 12.7083333%; }
.suppression-table th {
  box-sizing: border-box;
  height: 30px;
  text-align: left;
  padding: 0 12px;
  background: #fff5f5;
  color: #991b1b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid #fecaca;
}
.suppression-table td {
  box-sizing: border-box;
  height: 39px;
  padding: 0 10px;
  border-bottom: 1px solid #eff2f6;
  color: var(--ps-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suppression-table td:nth-child(2) { font-weight: 500; }
.suppression-table tbody tr:last-child td { border-bottom: 0; }
.suppression-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 96.19px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ffebee;
  color: #c62828;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
}
.suppression-status-pill img {
  display: block;
  width: 16px;
  height: 16px;
}
.suppression-auto-suppress {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 35px;
  align-items: center;
  height: 35px;
  padding: 0 16px;
  background: #f9fafb;
  border: 1px solid #fecaca;
  border-top: 0;
  border-radius: 0;
}
.suppression-auto-suppress-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.suppression-auto-suppress-checkbox {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #2563eb;
  cursor: pointer;
}
.suppression-auto-suppress-checkbox:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
/* Next-drop projection note, right-aligned in the auto-suppress footer row
   (PROPS-3273 / Figma 472-388803). No `display` is declared so the `hidden`
   attribute keeps working inside the flex parent. */
.suppression-adjusted { font-weight: 600; color: #059669; margin-left: auto; font-size: 12px; }
.suppression-empty { padding: 16px; font-size: 13px; color: #9ca3af; text-align: center; }

/* --- Section A: Flowing Status Funnel --- */

/* Figma Frame 1477401 stacks stages → flow → status row → tiles with a
   uniform 30px gap; the gaps are owned by `.funnel-progress` and
   `.tracking-cards` margin-top so they don't compound with these. */
.tracking-funnel {
  margin-bottom: 0;
}

.funnel-flow-wrap {
  margin-bottom: 0;
}

.funnel-stages {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.funnel-stage {
  flex: 1;
  text-align: center;
  padding: 8px 4px 4px;
  opacity: 0;
  transform: translateY(8px);
  animation: stage-enter 0.35s ease-out forwards;
  animation-delay: calc(var(--stage-i, 0) * 80ms);
}

.funnel-stage.active {
  animation-name: stage-enter-active;
}

.funnel-stage.no-anim {
  animation: none;
  opacity: 0.45;
  transform: none;
}

.funnel-stage.no-anim.active {
  opacity: 1;
}

.funnel-stage-emoji {
  font-size: 24px;
  margin-bottom: 4px;
}

.funnel-stage-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--ps-dark);
  line-height: 1.1;
}

.funnel-stage-label {
  font-size: 11px;
  line-height: 13px;
  color: var(--ps-grey-500);
  font-weight: 500;
  margin-top: 2px;
}

/* SVG flowing shape */
.funnel-flow-svg {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -4px;
}

.funnel-flow-path {
  clip-path: inset(0 100% 0 0);
  animation: flow-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

/* Delivery status row (PROPS-3205)
   One centred line: "✓ N% delivered │ ✕ N returned". Previously `.funnel-pct`
   was a block-level div with the RTS badge appended after it, which forced the
   badge onto a second line. Both are flex children now. */
.funnel-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
  margin-bottom: 4px;
}

.funnel-pct {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: var(--ps-emerald);
}

/* The shared 4px icon margin would stack on top of the row gap here. */
.funnel-pct .tracking-svg-icon,
.tracking-badge-rts .tracking-svg-icon {
  margin-right: 0;
  vertical-align: middle;
}

.funnel-status-divider {
  width: 1px;
  height: 19px;
  background: var(--ps-grey-600);
}

.tracking-badge-rts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--ps-error);
}

.tracking-badge-clickable {
  cursor: pointer;
  transition: opacity 0.15s;
}

.tracking-badge-clickable:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* Live polling indicator */
.tracking-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--ps-orange);
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  animation: live-pulse 2s ease-in-out infinite;
}

/* Value change flash on poll refresh */
.tracking-value-changed {
  animation: value-flash 1.5s ease;
  border-radius: 4px;
}

/* --- Funnel & Card Animations --- */

@keyframes stage-enter {
  to { opacity: 0.45; transform: translateY(0); }
}

@keyframes stage-enter-active {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flow-reveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes value-flash {
  0%, 100% { background: transparent; }
  15% { background: rgba(18, 130, 146, 0.15); }
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* --- Section B: Summary Cards --- */

.tracking-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-top: 30px;
  margin-bottom: 24px;
}

.tracking-card {
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 10px;
  padding: 14px 12px;
  min-height: 101px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: scale(0.95);
  animation: card-enter 0.3s ease-out forwards;
  animation-delay: calc(var(--card-i, 0) * 60ms + 0.3s);
}

.tracking-card.no-anim {
  animation: none;
  opacity: 1;
  transform: none;
}

@keyframes card-enter {
  to { opacity: 1; transform: scale(1); }
}

.tracking-card-icon {
  font-size: 18px;
  margin-bottom: 4px;
}

.tracking-card-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ps-dark);
  line-height: 29px;
}

.tracking-card-sub {
  font-size: 12px;
  line-height: 15px;
  color: var(--ps-grey-500);
  font-weight: 500;
  margin-top: 2px;
}

/* --- Section C: Timeline --- */

.tracking-timeline {
  border-top: 1px solid var(--ps-border);
  padding-top: 24px;
  margin-bottom: 15px;
}

/* Sub-section titles ("Timeline", "Geographic Distribution").
   Figma Frame 1477417: Inter 600 / 16px / 150%. */
.tracking-section-heading {
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: var(--ps-dark);
  margin-bottom: 14px;
}

/* Timeline header: title left, scan-event-log link right (PROPS-3205) */
.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.timeline-header .tracking-section-heading {
  margin-bottom: 0;
}

/* Horizontal milestone chips — Figma Frame 1477410/1477415 (PROPS-3205).
   Replaces the vertical rail, which used ~25% of the card width and left a
   large dead zone to its right — what QA flagged as "not centered". */
.timeline-track {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 17px;
  height: 72px;
  margin-top: 12px;
  overflow-x: clip;
  overflow-y: hidden;
  padding: 14px 0 15px;
}

.timeline-chip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 43px;
  padding: 0 11px;
  overflow: hidden;
  border: 1px solid var(--ps-primary);
  border-radius: 4px;
  background: var(--ps-light-blue);
}

/* Exact chip widths from Figma node 1:21540. Together with five 17px gaps,
   these six milestones fill the 960px timeline frame exactly. */
.timeline-chip[data-milestone="order-submitted"] { width: 149px; }
.timeline-chip[data-milestone="in-production"] { width: 127px; }
.timeline-chip[data-milestone="first-scan-detected"] { width: 169px; }
.timeline-chip[data-milestone="delivery-25"] { width: 136px; }
.timeline-chip[data-milestone="delivery-75"] { width: 130px; }
.timeline-chip[data-milestone="delivery-95"] { width: 164px; }

/* Connector rail. The Figma draws one continuous line behind the chips —
   Teal/500 up to the progress point, Grey/300 after it. Because the chips are
   opaque, only the gaps are ever visible, so a per-gap segment renders
   identically and survives any chip count or width without magic numbers. */
.timeline-chip + .timeline-chip {
  position: relative;
}

.timeline-chip + .timeline-chip::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  width: 17px;
  height: 1px;
  background: var(--ps-primary);
}

/* The rail turns grey at the first not-yet-reached milestone. */
.timeline-chip.future + .timeline-chip::before,
.timeline-chip.future::before {
  background: var(--ps-grey-300);
}

.timeline-chip.future {
  border: none;
  background: var(--ps-grey-50);
}

.timeline-chip.future .chip-label {
  color: var(--ps-grey-700);
}

.chip-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.chip-icon .tracking-svg-icon {
  margin-right: 0;
  vertical-align: middle;
}

.timeline-chip.future .chip-icon {
  opacity: 0.45;
}

.chip-body {
  min-width: 0;
  overflow: hidden;
}

.chip-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 150%;
  color: var(--ps-dark);
  white-space: nowrap;
}

.chip-date {
  font-size: 10px;
  font-weight: 500;
  line-height: 150%;
  color: var(--ps-grey-500);
  white-space: nowrap;
}

/* Event log */

.timeline-events-toggle {
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  color: var(--ps-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

.timeline-events-toggle:hover {
  text-decoration: underline;
}

.timeline-events {
  margin-top: 10px;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.timeline-event-row {
  display: flex;
  gap: 12px;
  padding: 6px 12px;
  font-size: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.timeline-event-row:last-child {
  border-bottom: none;
}

.event-time {
  color: var(--ps-gray);
  min-width: 60px;
}

.event-category {
  font-weight: 500;
  color: var(--ps-dark);
  flex: 1;
}

.event-zip {
  color: var(--ps-gray);
  min-width: 50px;
  text-align: right;
}

.timeline-events-empty {
  padding: 16px;
  text-align: center;
  color: var(--ps-gray);
  font-size: 13px;
}

.timeline-events-more {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-orange);
  background: #f9fafb;
  border: none;
  border-top: 1px solid var(--ps-border);
  cursor: pointer;
}

.timeline-events-more:hover {
  background: #f0f0f0;
}

/* --- Section D: Geographic Map --- */

.tracking-geo-section {
  border-top: 1px solid var(--ps-border);
  padding-top: 24px;
  margin-bottom: 24px;
  position: relative;
}

.tracking-geo-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: calc(100% + 21px);
  height: 753px;
  margin-left: -10.5px;
}

.tracking-geo-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: 0 0 26.5px;
  width: 968.37px;
  height: 26.5px;
  margin: 0;
}

.tracking-geo-header .tracking-section-heading {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 312px;
  height: 17px;
  padding-left: 4px;
  margin-bottom: 0;
}

.geo-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
}

.geo-toggle-btn {
  box-sizing: border-box;
  height: 26.5px;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  padding: 0 15px;
  border: 1px solid var(--ps-border);
  border-radius: 999px;
  background: var(--ps-white);
  color: var(--ps-grey-500);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.geo-toggle-btn[data-mode="facility"] { width: 127.38px; }
.geo-toggle-btn[data-mode="destination"] { width: 95.99px; }

.geo-toggle-btn.active {
  background: var(--ps-primary);
  border-color: var(--ps-primary);
  color: var(--ps-white);
}

.geo-toggle-btn:hover:not(.active) {
  border-color: var(--ps-primary);
  color: var(--ps-primary);
}

.tracking-geo-map {
  position: relative;
  flex: 0 0 613.125px;
  width: 981px;
  height: 613.125px;
  margin: 0;
}

.geo-svg {
  width: 100%;
  height: auto;
  display: block;
}

.geo-svg path {
  transition: fill 0.2s;
  cursor: pointer;
}

.tracking-geo-tooltip {
  position: absolute;
  background: var(--ps-dark);
  color: var(--ps-white);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.tracking-geo-legend {
  flex: 0 0 27px;
  width: 160px;
  height: 27px;
  margin: 0;
  text-align: center;
}

.geo-legend-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  width: 160px;
  margin: 0 auto 4px;
}

.geo-legend-seg {
  width: 32px;
  height: 10px;
}

.geo-legend-seg:first-child {
  border-radius: 4px 0 0 4px;
}

.geo-legend-seg:last-child {
  border-radius: 0 4px 4px 0;
}

.geo-legend-labels {
  display: flex;
  justify-content: center;
  width: 160px;
  margin: 0 auto;
  gap: 100px;
  font-size: 11px;
  line-height: 13px;
  color: var(--ps-grey-500);
}

/* --- Section E: Per-Piece Table --- */

.tracking-pieces {
  border-top: 1px solid var(--ps-border);
  padding-top: 24px;
}

.tracking-pieces-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 17px;
}

.tracking-filter {
  box-sizing: border-box;
  width: 140px;
  height: 31px;
  font-size: 13px;
  line-height: 15.5px;
  padding: 0 14px;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  background: var(--ps-white);
  color: var(--ps-dark);
  cursor: pointer;
  min-width: 140px;
}

.tracking-filter:focus {
  outline: none;
  border-color: #128292;
}

.tracking-search {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  height: 32px;
  font-size: 13px;
  line-height: 15.5px;
  padding: 0 12px;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  background: var(--ps-white);
  color: var(--ps-dark);
}

.tracking-search::placeholder {
  color: var(--ps-light-gray);
}

.tracking-table-wrap {
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
}

.tracking-table {
  width: 1261px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}

.tracking-col-status { width: 226px; }
.tracking-col-recipient { width: 252px; }
.tracking-col-address { width: 360px; }
.tracking-col-scan { width: 209px; }
.tracking-col-location { width: 214px; }

.tracking-table th {
  box-sizing: border-box;
  height: 30px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--ps-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 10px;
  border-bottom: 2px solid var(--ps-border);
}

.tracking-table td {
  box-sizing: border-box;
  height: 39.5px;
  padding: 0 10px;
  border-bottom: 1px solid var(--ps-grey-50);
  color: var(--ps-dark);
  vertical-align: middle;
}

.tracking-table tbody tr:hover {
  background: #f9fafb;
}

.tracking-cell-name {
  font-weight: 500;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-cell-addr {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status pills */
.tracking-status-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.tracking-status-pill .tracking-svg-icon { margin-right: 0; }

.status-delivered  { background: #e8f5e9; color: #2e7d32; }
.status-transit    { background: #e0f2f1; color: #00695c; }
.status-ofd        { background: #fff8e1; color: #f57f17; }
.status-mailed     { background: #E2F7FA; color: #1565c0; }
.status-production { background: #f3e5f5; color: #6a1b9a; }
.status-rts        { background: #ffebee; color: #c62828; }
.status-forwarded  { background: #fff3e0; color: #e65100; }
.status-unknown    { background: #f5f5f5; color: #9e9e9e; }

/* Empty table state */
.tracking-table-empty {
  text-align: center;
  padding: 24px;
  color: var(--ps-gray);
  font-size: 14px;
}

/* Pagination */
.tracking-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
}

.tracking-page-info {
  font-size: 13px;
  color: var(--ps-grey-500);
}

.tracking-page-btn {
  box-sizing: border-box;
  height: 25.5px;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  color: var(--ps-primary);
  background: none;
  border: 1px solid var(--ps-primary);
  border-radius: 999px;
  padding: 0 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.tracking-page-btn:hover:not(:disabled) {
  background: var(--ps-primary);
  color: var(--ps-white);
}

.tracking-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --- Export CSV Button --- */

.tracking-export-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ps-primary);
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 50px;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.tracking-export-btn .tracking-svg-icon {
  width: 18px;
  height: 18px;
  margin-right: 0;
}

.tracking-export-btn:hover {
  border-color: var(--ps-primary);
  background: var(--ps-primary);
  color: var(--ps-white);
}

.tracking-export-btn:hover .tracking-svg-icon { filter: brightness(0) invert(1); }

/* --- Piece Detail Drill-down --- */

.tracking-piece-row {
  cursor: pointer;
}

.tracking-piece-row.piece-detail-open {
  background: #f0f9fa;
}

.piece-detail-row {
  background: #f9fafb;
}

.piece-detail-panel {
  padding: 16px 12px !important;
  border-top: 2px solid var(--ps-teal);
}

.piece-detail-loading {
  color: var(--ps-gray);
  font-size: 13px;
}

.piece-detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.piece-detail-empty {
  color: var(--ps-gray);
  font-size: 13px;
  font-style: italic;
}

.piece-detail-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.piece-detail-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.piece-detail-step-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.piece-detail-step-info {
  flex: 1;
}

.piece-detail-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-dark);
}

.piece-detail-step-meta {
  font-size: 12px;
  color: var(--ps-gray);
  margin-top: 2px;
}

/* --- Clickable Tracking Card (Repeat Recipients) --- */

.tracking-card-clickable {
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.tracking-card-clickable:hover {
  border-color: var(--ps-orange);
  box-shadow: 0 0 0 2px rgba(18, 130, 146, 0.15);
}

.tracking-card-clickable.active {
  border-color: var(--ps-orange);
  background: rgba(18, 130, 146, 0.04);
}

/* --- Repeat Recipients Panel --- */

.repeat-recipients-panel {
  grid-column: 1 / -1;
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 4px;
}

.repeat-recipients-panel.hidden {
  display: none;
}

.repeat-recipients-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.repeat-recipient-row {
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.repeat-recipient-row.expanded {
  border-color: var(--ps-orange);
}

.repeat-recipient-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.repeat-recipient-summary:hover {
  background: var(--ps-bg);
}

.repeat-recipient-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ps-dark);
  min-width: 120px;
}

.repeat-recipient-addr {
  font-size: 12px;
  color: var(--ps-gray);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.repeat-recipient-count-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--ps-orange);
  background: rgba(18, 130, 146, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.repeat-recipient-expand {
  padding: 0 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.repeat-recipient-expand.hidden {
  display: none;
}

.repeat-campaign-appearance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  background: var(--ps-bg);
  border-radius: 6px;
  font-size: 12px;
}

.repeat-campaign-name {
  font-weight: 600;
  color: var(--ps-dark);
  min-width: 100px;
}

.repeat-campaign-meta {
  color: var(--ps-gray);
  flex: 1;
}

.repeat-recipients-more {
  text-align: center;
  font-size: 12px;
  color: var(--ps-gray);
  padding: 8px 0 4px;
}


/* ============================================================
   Campaign Insights Header
   ============================================================ */

/* PROPS-3231: Figma node 1:26193 uses a centered 1,070px dashboard column.
   Sender Information remains a sibling in this same column; its own markup
   and component styles are intentionally unchanged. */
body:has(#page-campaigns:not(.hidden)) {
  background: var(--ps-grey-50);
}

#page-campaigns {
  width: 100%;
  max-width: 1070px;
  margin-right: auto;
  margin-left: auto;
}

#page-campaigns .dm-dashboard-back-link.dm-back-inline {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 21px;
}

#page-campaigns > .csp-inline-65 {
  margin-bottom: 14px;
}

#page-campaigns .page-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 45px;
}

.campaign-insights-header {
  background: var(--ps-white);
  border: 0;
  border-radius: 12px;
  padding: 14px 30px 18px;
  margin-bottom: 20px;
}

.insights-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  margin-bottom: 13px;
}

.insights-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  color: var(--ps-dark);
}

.insights-date-selector {
  width: 124px;
  height: 32px;
  appearance: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ps-dark);
  background-color: var(--ps-white);
  background-image: url('../assets/icons/dashboard-select-chevron.svg');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px 6px;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  padding: 0 36px 0 16px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.insights-date-selector:focus {
  border-color: var(--ps-orange);
}

.insights-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  height: 95px;
  padding: 13px 14px 12px;
  background: var(--ps-white);
  border: 1px solid var(--ps-grey-300);
  border-radius: 12px;
}

.insight-card {
  position: relative;
  background: transparent;
  border-radius: 0;
  height: 68px;
  padding: 0 16px;
  text-align: left;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  border-right: 1px solid var(--ps-grey-300);
  transition: none;
}

.insight-card:last-child {
  border-right: none;
}

.insight-card:hover {
  transform: none;
}

.insight-card-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.insight-card-icon-image {
  display: block;
  max-width: 22px;
  max-height: 22px;
}

.insight-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.insight-card-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ps-dark);
  line-height: 1.2;
}

.insight-card-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--ps-grey-700);
  margin-top: 3px;
}

/* Direct Mail list card (search slot + CTA header, then list) */
.dm-list-card {
  background: var(--ps-white);
  border: 0;
  border-radius: 12px;
  padding: 26px 30px;
  margin-top: 0;
}

/* Dashboard filters use the compact active pill from Figma. The scrollable
   track remains available at narrow widths, without the legacy underline rail. */
.dm-tabs {
  display: flex;
  align-items: center;
  gap: 17px;
  height: 21px;
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dm-tabs::-webkit-scrollbar { display: none; }

.dm-tab {
  appearance: none;
  background: transparent;
  border: 0;
  height: 21px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--ps-grey-700);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.dm-tab:hover {
  color: var(--ps-primary);
}

.dm-tab:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.dm-tab .dm-tab-count {
  color: inherit;
  font-weight: inherit;
}

.dm-tab.active {
  color: var(--ps-primary);
  background: var(--ps-teal-50);
  padding: 0 10px;
  font-weight: 600;
}

.dm-tab.active .dm-tab-count {
  color: var(--ps-primary);
}

.dm-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 43px;
  margin-bottom: 15px;
  flex-wrap: nowrap;
}

.dm-list-card-search {
  flex: 1 1 auto;
  min-width: 0;
}

.dm-list-card .campaign-groups {
  display: block;
}

.dm-list-card #campaign-groups-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dm-list-card #campaign-groups-list > * {
  margin-bottom: 0;
}

.dm-list-card .campaign-group {
  height: 62px;
  margin: 0;
  border: 1px solid var(--ps-grey-300);
  border-radius: 12px;
}

.dm-list-card .campaign-group-header {
  width: 100%;
  height: 60px;
  padding: 9px 17px;
  gap: 12px;
  border: 0;
  background: var(--ps-white);
}

.dm-list-card .campaign-group-header:hover {
  background: var(--ps-grey-50);
}

.dm-list-card .campaign-group-header:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: -2px;
  border-radius: 11px;
}

.dm-list-card .campaign-group-header-left {
  flex: 1 1 auto;
  overflow: hidden;
}

.campaign-group-header-copy {
  min-width: 0;
  overflow: hidden;
}

.dm-list-card .campaign-group-title {
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-list-card .campaign-group-meta {
  overflow: hidden;
  margin-top: 3px;
  color: var(--ps-grey-700);
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-group-right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dm-list-card .dashboard-status-badge {
  height: 24px;
  padding: 0 8px;
  gap: 4px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.dm-list-card .dashboard-status-scheduled {
  color: var(--ps-periwinkle-500);
  background: var(--ps-periwinkle-50);
}

.dm-list-card .dashboard-status-delivered {
  color: #2E7D32;
  background: #E8F5E9;
}

.dm-list-card .dashboard-status-canceled,
.dm-list-card .dashboard-status-failed {
  color: var(--ps-rose-500);
  background: var(--ps-rose-50);
}

.dashboard-status-icon {
  display: block;
  width: auto;
  max-width: 13px;
  height: 12px;
  flex: 0 0 auto;
}

.dm-list-card .campaign-group-toggle {
  display: flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  transition: none;
}

.dm-list-card .campaign-group-toggle img {
  display: block;
  width: 7px;
  height: 12px;
}

.dm-list-card .btn-new-campaign {
  width: 176px;
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  flex: 0 0 176px;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.btn-new-campaign-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

.dm-list-card .btn-new-campaign:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
}

/* Sender Information helper text */
.dm-sender-helper {
  font-size: 13px;
  color: var(--ps-gray);
  margin: 4px 0 12px;
}

#page-campaigns .my-info-section--populated {
  margin-top: 20px;
  padding: 21px 23px;
  background: var(--ps-white);
  border-radius: 12px;
}

#page-campaigns .my-info-section--populated #my-info-header {
  align-items: flex-start;
  width: 100%;
  height: 49px;
  margin-bottom: 20px;
  gap: 5px;
}

#page-campaigns .dm-sender-heading-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

#page-campaigns .my-info-section--populated .csp-inline-68 {
  width: 100%;
  margin: 0;
  color: var(--ps-dark);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}

#page-campaigns .my-info-section--populated .dm-sender-helper {
  width: 100%;
  margin: 0;
  color: var(--ps-dark);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

#page-campaigns .my-info-section--populated #my-info-edit-btn {
  width: 55.82px;
  height: 30px;
  min-height: 30px;
  padding: 0 15px;
  flex: 0 0 55.82px;
  border-radius: 999px;
}

#page-campaigns .my-info-section--populated #my-info-collapsed {
  width: 100%;
  height: 151px;
  padding: 20px;
  background: var(--ps-grey-50);
  border-radius: 12px;
}

#page-campaigns .my-info-section--populated #my-info-collapsed > .csp-inline-70 {
  grid-template-columns: 389px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 16px;
}

#page-campaigns .my-info-section--populated .csp-inline-71 {
  margin-bottom: 4px;
  color: var(--ps-grey-700);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

#page-campaigns .my-info-section--populated .csp-inline-72,
#page-campaigns .my-info-section--populated .csp-inline-73 {
  color: var(--ps-dark);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

/* Direct Mail empty state */
.dm-empty-state {
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* The flex declaration above has enough author-level precedence to override
   the browser's default [hidden] rule. Keep sender states mutually exclusive. */
.dm-empty-state[hidden] {
  display: none;
}

.dm-empty-state-illustrated {
  min-height: 246px;
  flex-direction: row;
  justify-content: center;
  gap: clamp(32px, 7vw, 96px);
  text-align: left;
}

.dm-empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 8px;
}

.dm-empty-state-illustration {
  display: block;
  flex: 0 1 auto;
  height: auto;
  object-fit: contain;
}

.dm-empty-state-campaigns-illustration {
  width: 279px;
  max-width: 42%;
}

.dm-sender-empty-illustration {
  width: 167px;
  max-width: 34%;
}

.dm-empty-state-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ps-dark);
  margin: 0;
}

.dm-empty-state-body {
  font-size: 14px;
  color: var(--ps-gray);
  margin: 0 0 12px;
}

/* Sender-missing is its own Figma card inside .my-info-section. The white
   surface also preserves the illustration's intended background. */
.dm-sender-empty {
  background: var(--ps-white);
  border: 1px solid var(--ps-border, #e5e7eb);
  border-radius: 10px;
  padding: 24px 16px;
}

.insights-loading,
.insights-error {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
  padding: 0;
  font-size: 13px;
  color: var(--ps-gray);
}


/* ============================================================
   Cross-Campaign Recipient Search
   ============================================================ */

.recipient-search-section {
  height: 43px;
  margin-bottom: 0;
  position: relative;
}

.recipient-search-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  height: 43px;
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 10px;
  padding: 0 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.recipient-search-input-wrap:focus-within {
  border-color: var(--ps-orange);
  box-shadow: 0 0 0 3px rgba(18, 130, 146, 0.1);
}

.recipient-search-icon {
  display: flex;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
}

.recipient-search-icon img {
  display: block;
  width: 16px;
  height: 16px;
}

.recipient-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  height: 41px;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--ps-dark);
}

.recipient-search-input::placeholder {
  color: var(--ps-gray);
}

.recipient-search-clear {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--ps-gray);
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  transition: background 0.15s;
}

.recipient-search-clear:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 1px;
}

.recipient-search-clear:hover {
  background: var(--ps-bg);
  color: var(--ps-dark);
}

.recipient-search-clear.hidden {
  display: none;
}

.recipient-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 10px;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 400px;
  overflow-y: auto;
}

.recipient-search-results.hidden {
  display: none;
}

.recipient-search-hint,
.recipient-search-loading,
.recipient-search-error,
.recipient-search-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ps-gray);
}

.recipient-search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.recipient-search-loading .campaigns-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.recipient-search-list {
  padding: 6px;
}

.recipient-result-row {
  border-radius: 8px;
  overflow: hidden;
  transition: background 0.15s;
}

.recipient-result-row:not(:last-child) {
  border-bottom: 1px solid var(--ps-border);
}

.recipient-result-row.expanded {
  background: rgba(18, 130, 146, 0.03);
}

.recipient-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  gap: 12px;
  transition: background 0.15s;
}

.recipient-result-summary:hover {
  background: var(--ps-bg);
}

.recipient-result-name-addr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.recipient-result-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ps-dark);
}

.recipient-result-addr {
  font-size: 12px;
  color: var(--ps-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recipient-result-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--ps-orange);
  background: rgba(18, 130, 146, 0.08);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.recipient-campaign-list {
  padding: 4px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.recipient-campaign-thumb { width: 36px; height: 26px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }

.recipient-campaign-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--ps-bg);
  border-radius: 6px;
  font-size: 12px;
}

.recipient-campaign-name {
  font-weight: 600;
  color: var(--ps-dark);
  min-width: 100px;
}

/* A/B attribution badge on a matched lead's campaign line. Variant B uses the
   neutral dark tone rather than a second accent so the pair reads as two sides
   of one test, not as a status. */
.recipient-campaign-variant {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ps-white);
  background: var(--ps-primary);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.recipient-campaign-variant.variant-b {
  background: var(--ps-dark);
}

.recipient-campaign-meta {
  color: var(--ps-gray);
  flex: 1;
}

.recipient-campaign-link {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-orange);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.15s;
  white-space: nowrap;
}

.recipient-campaign-link:hover {
  background: rgba(18, 130, 146, 0.08);
}

.recipient-search-more {
  text-align: center;
  font-size: 12px;
  color: var(--ps-gray);
  padding: 8px 0;
}

/* Opt-out button in search results */
.opt-out-btn {
  flex-shrink: 0;
  background: none;
  border: 1.5px solid #e74c3c;
  color: #e74c3c;
  border-radius: var(--ps-btn-radius);
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.opt-out-btn:hover {
  background: #e74c3c;
  color: white;
}

.opt-out-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.opt-out-btn.opted-out {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.opt-out-btn.opted-out:hover {
  background: none;
  color: #e74c3c;
}


/* --- Responsive --- */

@media (max-width: 1000px) {
  .timeline-track {
    overflow-x: auto;
  }
}

@media (max-width: 600px) {
  .tracking-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .funnel-stages {
    gap: 0;
  }

  .funnel-stage {
    min-width: 56px;
    padding: 6px 2px;
  }

  .funnel-stage-count {
    font-size: 20px;
  }

  .funnel-stage-emoji {
    font-size: 18px;
  }

  .funnel-flow-svg {
    height: 40px;
  }

  .geo-legend-labels {
    gap: 60px;
  }

  /* Six chips will not fit a narrow iframe — let the track scroll rather
     than crushing each chip below its legible width. */
  .timeline-chip {
    flex: 0 0 auto;
    min-width: 150px;
  }

  .timeline-event-row {
    font-size: 11px;
    gap: 8px;
  }

  .tracking-pieces-controls {
    flex-direction: column;
  }

  .tracking-table {
    font-size: 12px;
  }

  .tracking-cell-name,
  .tracking-cell-addr {
    max-width: 100px;
  }

  .dm-list-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .dm-empty-state-illustrated {
    min-height: 0;
    flex-direction: column;
    gap: 20px;
    padding: 32px 16px;
    text-align: center;
  }

  .dm-empty-state-content {
    align-items: center;
  }

  .dm-empty-state-campaigns-illustration {
    width: min(240px, 82%);
    max-width: none;
  }

  .dm-sender-empty-illustration {
    width: min(160px, 64%);
    max-width: none;
  }

  .recipient-result-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .repeat-recipient-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .recipient-campaign-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* PROPS-3231 responsive adaptation. No mobile Figma frame was supplied, so
   the desktop hierarchy collapses without changing content or status rules. */
@media (max-width: 768px) {
  #page-campaigns .page-title {
    font-size: 24px;
    line-height: 36px;
  }

  .insights-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    height: 166px;
    padding: 0 14px;
  }

  .insight-card {
    height: 82px;
    gap: 12px;
    padding: 7px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--ps-grey-300);
  }

  .insight-card:nth-child(odd) {
    border-right: 1px solid var(--ps-grey-300);
  }

  .insight-card:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

@media (max-width: 600px) {
  #page-campaigns .my-info-section--populated {
    padding: 16px;
  }

  #page-campaigns .my-info-section--populated #my-info-header,
  #page-campaigns .my-info-section--populated #my-info-collapsed {
    height: auto;
  }

  #page-campaigns .my-info-section--populated #my-info-collapsed > .csp-inline-70 {
    grid-template-columns: minmax(0, 1fr);
  }

  .campaign-insights-header {
    padding: 14px 16px 16px;
  }

  .insights-cards {
    height: 170px;
    padding: 0;
  }

  .insight-card {
    height: 84px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 10px;
  }

  .insight-card-icon {
    width: 24px;
    height: 24px;
  }

  .insight-card-icon-image {
    max-width: 20px;
    max-height: 20px;
  }

  .insight-card-value {
    font-size: 22px;
  }

  .dm-list-card {
    padding: 26px 16px;
  }

  .dm-list-card-header {
    height: auto;
    gap: 12px;
  }

  .dm-list-card-search {
    width: 100%;
    flex: 0 0 auto;
  }

  .dm-list-card .btn-new-campaign {
    width: 100%;
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  #page-campaigns .page-title {
    font-size: 20px;
    line-height: 30px;
  }

  .dm-list-card .campaign-group-header {
    padding-right: 10px;
    padding-left: 10px;
    gap: 8px;
  }

  .dm-list-card .campaign-group-header-left {
    gap: 8px;
  }

  .campaign-group-right {
    gap: 6px;
  }

  .dm-list-card .dashboard-status-badge {
    padding-right: 6px;
    padding-left: 6px;
  }
}

@media (pointer: coarse) {
  #page-campaigns .my-info-section--populated #my-info-edit-btn {
    height: 44px;
    min-height: 44px;
  }

  #page-campaigns .insights-top-row,
  #page-campaigns .dm-list-card-header {
    height: auto;
    min-height: 44px;
  }

  #page-campaigns .recipient-search-section,
  #page-campaigns .recipient-search-input-wrap {
    height: 44px;
  }

  #page-campaigns .dm-tab,
  #page-campaigns .btn-new-campaign,
  #page-campaigns .recipient-search-clear,
  #page-campaigns .insights-date-selector,
  #page-campaigns .dm-dashboard-back-link {
    min-height: 44px;
  }

  #page-campaigns .dm-tab {
    height: 44px;
  }

  #page-campaigns .dm-tabs {
    height: 44px;
  }
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  .funnel-stage,
  .tracking-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .funnel-stage:not(.active) {
    opacity: 0.45 !important;
  }

  .funnel-flow-path {
    animation: none !important;
    clip-path: none !important;
  }

  .tracking-live-dot {
    animation: none !important;
  }

  .tracking-value-changed {
    animation: none !important;
  }
}

/* Slice F: Postcard Size Selection step */
/* Issue #376: two 295px cards with a 50px gutter = 640, per Figma 1:43796. */
.size-step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  max-width: 640px;
  margin: 24px auto;
}
.size-step-card {
  background: var(--ps-white);
  border: 2px solid var(--ps-grey-300, #ced1d6);
  border-radius: 12px;
  padding: 24px;
  height: 226px;
  cursor: pointer;
  /* PR-2 (2026-05-31): centered to match Figma Step 5 (icon on top, centered
     title/price). */
  text-align: center;
  font-family: inherit;
  /* Figma centers the artwork/label/price group within the card box. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Issue #376: the page had no focus rule at all — only the UA default ring,
   drawn over a border that already changes on hover. Matches the modal
   (canvas-builder.css). */
.size-step-card:focus-visible {
  outline: 3px solid rgba(18, 130, 146, 0.28);
  outline-offset: 3px;
}
/* PR-2: postcard line-art icon on each size card (Ryan 5.7 / Step 5). Gray by
   default, teal (--ps-primary) when the card is selected or hovered. */
.size-step-card-icon {
  display: block;
  margin: 0 auto 12px;
  color: var(--ps-gray);
  transition: color 0.15s;
}
/* Issue #376: exact Figma artwork (1:43796) replaces the line-art SVG. Teal and
   gray are two separate exports, swapped by selection rather than recolored —
   same approach as the single/split modal (canvas-builder.css). */
.size-step-card-art { display: none; margin: 0 auto; }
.size-step-card .size-step-card-art--gray { display: block; }
.size-step-card.selected .size-step-card-art--gray { display: none; }
.size-step-card.selected .size-step-card-art--teal { display: block; }
/* 6×9 is drawn physically larger than 4×6, per Figma. */
.size-step-card[data-size="4x6"] .size-step-card-art { width: 99px; height: 68.051px; }
.size-step-card[data-size="6x9"] .size-step-card-art { width: 136px; height: 93.484px; }
/* Issue #376: Figma 1:43796 has no fill or ring on either state — selection is
   carried by the border and the artwork swap alone. Hover is deliberately a
   distinct mid-teal so it can't be mistaken for the selected state, matching
   the modal; previously both states rendered identically apart from a shadow. */
.size-step-card:hover {
  border-color: #69b1bc;
  box-shadow: 0 6px 16px rgba(18, 130, 146, 0.12);
}
.size-step-card.selected {
  border-color: var(--ps-primary);
  box-shadow: none;
}
.size-step-card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: var(--ps-dark, #3c4654);
}
.size-step-card-price {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--ps-grey-500, #99a0aa);
  min-height: 1em;
}

#page-size-selection .review-order-card {
  position: relative;
  width: 100%;
  max-width: 1060px;
  height: 458px;
  padding: 0;
  border: 0;
}

#page-size-selection .review-order-title {
  position: absolute;
  top: 32px;
  left: 514px;
  width: max-content;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: var(--ps-dark, #3c4654);
}

#page-size-selection .review-order-subtitle {
  position: absolute;
  top: 76px;
  left: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 465px;
  height: 14.5px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--ps-grey-500, #99a0aa);
}

#page-size-selection .size-step-grid {
  position: absolute;
  top: 116px;
  left: 194px;
  display: grid;
  grid-template-columns: 295px 295px;
  gap: 50px;
  width: 640px;
  max-width: none;
  margin: 0;
}

#page-size-selection .size-step-card {
  position: relative;
  display: block;
  width: 295px;
  height: 226px;
  padding: 0;
}

#page-size-selection .size-step-card-icon {
  position: absolute;
  display: block;
  margin: 0;
  overflow: hidden;
}

#page-size-selection .size-step-card-art {
  position: absolute;
  left: 0;
  margin: 0;
}

#page-size-selection .size-step-card[data-size="4x6"] .size-step-card-icon {
  top: 24px;
  left: 89px;
  width: 99px;
  height: 99px;
}

#page-size-selection .size-step-card[data-size="4x6"] .size-step-card-art {
  top: 26px;
  width: 99px;
  height: 68.051px;
}

#page-size-selection .size-step-card[data-size="6x9"] .size-step-card-icon {
  top: 14px;
  left: 76px;
  width: 136px;
  height: 136px;
}

#page-size-selection .size-step-card[data-size="6x9"] .size-step-card-art {
  top: 21.258px;
  width: 136px;
  height: 93.484px;
}

#page-size-selection .size-step-card-title,
#page-size-selection .size-step-card-price {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

#page-size-selection .size-step-card[data-size="4x6"] .size-step-card-title {
  top: 147px;
  left: 36px;
  width: 208.013px;
  height: 19.5px;
}

#page-size-selection .size-step-card[data-size="4x6"] .size-step-card-price {
  top: 177.5px;
  left: 36px;
  width: 208.013px;
  height: 16px;
}

#page-size-selection .size-step-card[data-size="6x9"] .size-step-card-title {
  top: 139px;
  left: 15px;
  width: 258px;
  height: 39px;
}

#page-size-selection .size-step-card[data-size="6x9"] .size-step-card-price {
  top: 178px;
  left: 15px;
  width: 258px;
  height: 16px;
}

#page-size-selection .review-order-card > .continue-section {
  position: absolute;
  top: 377px;
  left: 261px;
  gap: 25px;
  padding: 0;
}

#page-size-selection .continue-section > .btn-secondary,
#page-size-selection .continue-section > .btn-primary {
  flex: 0 0 240px;
  width: 240px;
  height: 44px;
  min-height: 44px;
  padding-right: 19px;
  padding-left: 19px;
}

@media (max-width: 1100px) {
  #page-size-selection .review-order-card {
    height: auto;
    padding: 24px 28px;
    border: 1px solid var(--ps-border);
  }

  #page-size-selection .review-order-title,
  #page-size-selection .review-order-subtitle,
  #page-size-selection .size-step-grid {
    position: static;
    transform: none;
  }

  #page-size-selection .review-order-title {
    width: auto;
    margin: 0 0 4px;
    white-space: normal;
  }

  #page-size-selection .review-order-subtitle {
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 20px;
  }

  #page-size-selection .size-step-grid {
    width: auto;
    max-width: 640px;
    margin: 24px auto;
  }

  #page-size-selection .review-order-card > .continue-section {
    position: static;
    padding-top: 24px;
  }
}

@media (max-width: 720px) {
  #page-size-selection .size-step-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
  }

  #page-size-selection .size-step-card {
    justify-self: center;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  #page-size-selection .review-order-card > .continue-section {
    flex-direction: column;
    width: 100%;
  }

  #page-size-selection .continue-section > .btn-secondary,
  #page-size-selection .continue-section > .btn-primary {
    flex: 0 0 44px;
    width: 100%;
    max-width: 100%;
  }
}

/* ====================================================================
   Payment result screens (#page-payment-success / #page-payment-failure)
   Driven by inbound `payment_result` from PropStream after the partner-
   owned payment popup confirms/fails. Centered white card, teal title
   for success, --ps-error title for failure, teal pill CTA.
   ==================================================================== */
#page-payment-success,
#page-payment-failure {
  padding: 24px;
}

.payment-result-card {
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  /* Full-width card filling the content area, matching the Figma Frame.pdf /
     Frame-1.pdf layout (NOT a small centered card). Content is centered in the
     upper portion with whitespace below. */
  width: 100%;
  margin: 0;
  padding: 56px 32px 72px;
  min-height: 56vh;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.payment-result-illustration {
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figma payment illustrations (rendered from Frame.pdf / Frame-1.pdf into
   assets/payment/*.png). Opaque white background matches the white card. */
.payment-result-illustration-img {
  height: 240px;
  width: auto;
  max-width: 100%;
  display: block;
}

.payment-result-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.25;
  /* Allow long titles to wrap on narrow viewports; never clipped. */
  overflow-wrap: break-word;
}

.payment-result-title--success {
  color: var(--ps-primary);
}

.payment-result-title--failure {
  color: var(--ps-error);
}

.payment-result-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ps-dark);
  margin: 0 0 28px;
  /* Wrap long copy / phone numbers on narrow viewports. */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Optional decline reason from parent payment_result.reason. Muted, wraps,
   hidden via the [hidden] attribute when no reason is supplied. */
.payment-result-reason {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ps-error);
  background: #fdecef;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 24px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.payment-result-reason[hidden] {
  display: none;
}

/* Failure-screen body variants (failed vs cancelled) toggle via [hidden]. */
.payment-result-body[hidden] {
  display: none;
}

.payment-result-link {
  color: var(--ps-primary);
  text-decoration: underline;
  font-weight: 600;
  /* tel: links should never be clipped — keep them inline but wrappable. */
  white-space: nowrap;
}

.payment-result-link:hover,
.payment-result-link:focus {
  color: var(--ps-primary-hover);
}

.payment-result-cta {
  display: flex;
  justify-content: center;
}

/* Pill CTA reusing .btn-primary (teal), wider on this screen for emphasis. */
.payment-result-btn {
  min-width: 240px;
  border-radius: 999px;
  padding: 0 28px;
}

@media (max-width: 600px) {
  #page-payment-success,
  #page-payment-failure {
    padding: 12px;
  }
  .payment-result-card {
    padding: 36px 20px 48px;
    min-height: 0;
  }
  .payment-result-illustration-img {
    height: 168px;
  }
  .payment-result-title {
    font-size: 20px;
  }
  .payment-result-btn {
    min-width: 0;
    width: 100%;
  }
  .payment-result-link {
    /* On very narrow widths, allow the phone link to wrap rather than
       overflow the card. */
    white-space: normal;
  }
}

/* The customer artwork is unchanged; these are disposable mailing-side proofs. */
.cb-postal-review { margin: 24px; padding: 20px; border: 1px solid var(--ps-border, #d8dee5); border-radius: 8px; background: #fff; }
.cb-postal-review[hidden], .cb-postal-review-grid[hidden] { display: none; }
.cb-postal-review h3 { margin: 0 0 8px; font-size: 16px; }
.cb-postal-review p { margin: 8px 0; line-height: 1.5; }
.cb-postal-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cb-postal-review figure { margin: 0; }
.cb-postal-review figcaption { font-weight: 600; margin-bottom: 8px; }
.cb-postal-review img { display: block; width: 100%; height: auto; border: 1px solid var(--ps-border, #d8dee5); }
@media (max-width: 640px) { .cb-postal-review-grid { grid-template-columns: 1fr; } }