/* PORTED VERBATIM from vo-app-marketing-hub/apps/Marketing-Hub/marketing-hub-piece-builder.css, minus 1 rule(s)
   whose selectors name a class crm.css / ax-containers.css already own.
   DO NOT EDIT — node tools/port-marketing-hub.cjs */
/* ══════════════════════════════════════════════════════════════════════════
   marketing-hub-piece-builder.css — the PIECE feature's own CSS: the builder
   popup first, then the Pieces panel at the bottom. ONE stylesheet for both,
   because they are one feature and a `?v=` that only bumps half of it is how a
   panel ships against a popup's old styles.

   It carries ONLY what the existing skins have no equivalent for.

   The piece popup wears `.cb-overlay` / `.cb-card` and every `.cb-*` control
   from marketing-hub-campaign-builder.css, on purpose: a piece and a campaign
   are two records in one family, and a second stylesheet describing the same
   input twice is how the two popups start looking like different products.
   So this file is short by design. If a rule here could be a `.cb-` rule
   instead, it belongs in that file.

   Everything is scoped under `.pb-scope` (the class on the overlay) so a
   `.pb-*` name can never reach another popup.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ THE CARD IS WIDER, AND THE FORM IS SHORTER FOR IT ═════════════════════
   Tyler, 2026-08-11: *"You don't have to make this thing so tall. You can have
   a lot of these just doing side by side."*

   Measured before: 5 sections, 14 full-width fields, 2,180px of body in a
   ~700px viewport — four screens of scrolling to make one email. Widening the
   card to 980px lets `.cb-row` carry nine of those fields in pairs (name+status,
   campaign+automation, owner+approver, subject+preview, date+time+repeat) and
   the derived channel fold into the kind note, which is where it was already
   being read. The email preview needed the width anyway. */
.pb-scope .cb-card { max-width: 980px; }

/* Three-up, for date + time + repeat. `.cb-row` itself is 1fr 1fr and is the
   campaign builder's, so it is left alone. */
.pb-scope .cb-row.is-3 { grid-template-columns: 1fr 1fr 1.25fr; }

.pb-scope .cb-row.is-wide { grid-template-columns: 1.35fr 1fr; }

/* A field that must span both columns of a .cb-row it lives inside. */
.pb-scope .cb-field.is-span { grid-column: 1 / -1; }

/* ── the kind grid — the FIRST decision, asked before the form exists ─────
   Six across, so the whole vocabulary is on one line and "what kinds are
   there" is answered by looking rather than by scrolling. It lives in the
   chooser dialog now (`.pbkc-*` at the bottom of this file), not in section 1;
   section 1 states the answer with `.pb-kindstated`. */
.pb-kinds {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px;
}

.pb-kind {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid #e5e7eb; background: #fff; font-family: inherit;
  transition: border-color .12s, box-shadow .12s, background .12s;
}

/* Only shown in the chooser, where a tile IS the button that continues. */
.pb-kind-go { display: none; }

.pb-kind:hover { border-color: #c7d2fe; background: #fafaff; }

.pb-kind.is-on {
  /* The kind's own colour, so a social piece and an automation piece are
     told apart at a glance — the same colours MhPieceTiles paints the card
     art with, which is why they are passed in as --_pk rather than hard-coded
     per class here. */
  border-color: var(--_pk, #6366f1);
  box-shadow: inset 0 0 0 1px var(--_pk, #6366f1), 0 1px 3px rgba(15, 23, 42, .06);
  background: #fff;
}

/* The icon earns its place by making the row scannable without reading —
   Tyler asked for "the correct icons that you select". */
.pb-kind-ic {
  width: 24px; height: 24px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 1px;
  color: var(--_pk, #6366f1); background: color-mix(in srgb, var(--_pk, #6366f1) 11%, #fff);
}

.pb-kind.is-on .pb-kind-ic { color: #fff; background: var(--_pk, #6366f1); }

.pb-kind-l { font-size: 11.5px; font-weight: 700; color: #161616; line-height: 1.3; }

.pb-kind.is-on .pb-kind-l { color: var(--_pk, #4f46e5); }

.pb-kind-d { font-size: 9.5px; color: #8d8d8d; line-height: 1.35; }

/* ── the kind, stated and locked ───────────────────────────────────────────
   It used to carry a "Change" pill. It does not any more (kindStatedHtml in the
   JS says why at length): the kind decides which body columns are written and
   which are blanked, so changing it mid-form threw words away. What is left is
   a fact with a padlock — drawn to match the approver row and the owner fact,
   because a locked control that renders like a dead button reads as broken. */
.pb-kindstated {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 12px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--_pk, #6366f1) 4%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_pk, #6366f1) 18%, transparent);
}

.pb-kindstated .pb-kind-ic {
  width: 30px; height: 30px; border-radius: 9px; margin: 0; flex: 0 0 auto;
  color: #fff; background: var(--_pk, #6366f1);
}

.pb-kindstated-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }

.pb-kindstated-t b { font-size: 13.5px; font-weight: 700; color: #161616; letter-spacing: -.01em; }

.pb-kindstated-t span { font-size: 11.5px; color: #6b7280; }

.pb-kindstated-lk {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #f4f4f5; color: #a1a1aa; cursor: help;
}

.pb-kindstated-lk svg { width: 13px; height: 13px; }

/* ══════════════════════════════════════════════════════════════════════════
   PbSel — the trigger, then the panel. marketing-hub-pb-select.js.

   ⚠️ THE PANEL IS A CHILD OF <body>, NOT OF `.pb-scope`. It has to be: the
   card is `overflow:hidden`. So every `.pb-sel-panel` rule below is UNSCOPED
   and the class names have to carry their own uniqueness — which is why they
   are all `pb-sel-*` and why nothing here is a bare state class.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the trigger — the same height and skin as `.cb-input`, so a dropdown and
      a text box sitting side by side in a `.cb-row` line up ──────────────── */
.pb-trig {
  width: 100%; display: flex; align-items: center; gap: 9px;
  border: 1px solid #e5e7eb; border-radius: 9px; background: #fff;
  padding: 7px 10px; min-height: 40px; cursor: pointer; text-align: left;
  font-family: inherit; color: #161616;
  transition: border-color .12s, box-shadow .12s, background .12s;
}

.pb-trig:hover { border-color: #c7d2fe; background: #fafaff; }

.pb-trig:focus-visible, .pb-trig.is-open {
  outline: 0; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

.pb-trig.is-empty { border-style: dashed; border-color: #d5d9e0; }

.pb-trig-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.pb-trig-l { font-size: 12.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pb-trig-d, .pb-trig-ph { font-size: 10.5px; color: #8d8d8d; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pb-trig-ph { font-size: 12px; color: #a3a3a3; font-weight: 500; }

.pb-trig-cv { flex: 0 0 auto; color: #a3a3a3; line-height: 0; }

.pb-trig.is-open .pb-trig-cv { color: #6366f1; transform: rotate(180deg); }

.pb-trig[disabled], .pb-trig[aria-disabled="true"] { opacity: .6; cursor: default; }

/* ══ THE OWNER, RECORDED RATHER THAN CHOSEN ════════════════════════════════
   Sized and spaced to match `.pb-trig` exactly — same min-height, same gap,
   same two-line text block — so the Owner field lines up with the "Needs
   approval from" picker beside it in the same `.cb-row`. A read-only fact that
   is visibly SHORTER than the control next to it reads as a control that
   failed to render, which is the opposite of the intended message.
   ⚠️ NOT A BUTTON AND NO `cursor: pointer`. There is a global
   `cursor: pointer !important` on some hosts (reference_global_cursor_pointer_important),
   so the flat background and absent chevron are what carry "you cannot open
   this" — never the cursor alone. */
.pb-who {
  width: 100%; display: flex; align-items: center; gap: 9px;
  border: 1px solid #e8e8ef; border-radius: 9px; background: #fafafc;
  padding: 7px 10px; min-height: 40px; color: #161616;
}

.pb-who-av {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; display: grid; place-items: center;
}

.pb-who-av.is-ini {
  background: var(--_w, #6366f1); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
}

.pb-who-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.pb-who-l {
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pb-who-l i { font-style: normal; font-weight: 600; color: #6366f1; }

.pb-who-d {
  font-size: 10.5px; color: #8d8d8d; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pb-who-lk { flex: 0 0 auto; color: #a3a3a3; line-height: 0; }

/* "optional — set at send", riding the section heading rather than adding a
   line of its own: the whole point of the change is that this step costs less
   attention, so announcing it must not cost a row of height. */
.pb-scope .cb-sec-opt {
  font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: #8d8d8d; background: #f1f1f5; border: 1px solid #e8e8ef;
  border-radius: 999px; padding: 2px 7px; margin-left: 8px; white-space: nowrap;
}

/* ── the leading tile: icon, avatar, initials or a status dot ───────────── */
.pb-sel-tile {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--_c, #6366f1); background: color-mix(in srgb, var(--_c, #6366f1) 12%, #fff);
  font-size: 9.5px; font-weight: 800; letter-spacing: .2px;
}

.pb-sel-tile.is-txt { color: #fff; background: var(--_c, #6366f1); }

.pb-sel-tile.is-img { background: #f3f4f6; }

.pb-sel-tile.is-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pb-sel-tile.is-ghost { color: #a3a3a3; background: #f3f4f6; }

.pb-sel-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin: 0 8px 0 3px; }

/* ── the panel ─────────────────────────────────────────────────────────── */
.pb-sel-panel {
  position: fixed; z-index: 1000050;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .19), 0 2px 6px rgba(15, 23, 42, .06);
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
  font-family: var(--f, system-ui, -apple-system, sans-serif);
  animation: pbSelIn .13s ease-out both;
}

@keyframes pbSelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.pb-sel-panel.is-up { animation-name: pbSelInUp; }

@keyframes pbSelInUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pb-sel-head { padding: 11px 13px 8px; border-bottom: 1px solid #f3f4f6; }

.pb-sel-head b { display: block; font-size: 11.5px; font-weight: 800; color: #161616; }

.pb-sel-head span { display: block; margin-top: 2px; font-size: 10.5px; color: #8d8d8d; line-height: 1.45; }

.pb-sel-search {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6; color: #a3a3a3; flex: 0 0 auto;
}

.pb-sel-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: inherit; font-size: 12px; color: #161616; padding: 2px 0;
}

.pb-sel-search input::placeholder { color: #c6c6c6; }

/* ── "Create new …", pinned above the list ───────────────────────────────
   OUTSIDE `.pb-sel-list` on purpose: it must not scroll away and must not be
   filtered out by the search box. The rule under it is the separation Tyler
   asked for — the top option reads as a different KIND of thing from the
   records below it, which is the same shape as the CRM's picklist combos. */
.pb-sel-create {
  flex: 0 0 auto; padding: 5px; border-bottom: 1px solid #eef0f4; background: #fcfcfe;
}

.pb-sel-new .pb-sel-l { color: #4f46e5; }

.pb-sel-new:hover { background: #eef2ff; }

.pb-sel-tile.is-new { color: #4f46e5; background: #e0e7ff; }

.pb-sel-none-up { display: block; margin-top: 5px; }

.pb-sel-list { flex: 1; min-height: 0; overflow-y: auto; padding: 5px; scrollbar-width: thin; }

.pb-sel-row {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border: 0; border-radius: 8px; background: none;
  cursor: pointer; text-align: left; font-family: inherit;
}

.pb-sel-row:hover, .pb-sel-row.is-cursor { background: #f6f7ff; }

.pb-sel-row.is-on { background: #eef2ff; }

.pb-sel-row.is-off { opacity: .55; cursor: default; }

.pb-sel-row.is-off:hover { background: none; }

.pb-sel-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.pb-sel-l { font-size: 12px; font-weight: 700; color: #161616; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pb-sel-d { font-size: 10px; color: #8d8d8d; line-height: 1.4; }

.pb-sel-badge {
  flex: 0 0 auto; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; padding: 2px 6px; border-radius: 5px;
  color: #525252; background: #f3f4f6;
}

.pb-sel-badge.is-on { color: #15803d; background: #dcfce7; }

.pb-sel-badge.is-off { color: #9a3412; background: #ffedd5; }

.pb-sel-badge.is-info { color: #4338ca; background: #e0e7ff; }

/* The tick is always in the layout so a row does not jump 13px when it is
   chosen — it only becomes visible. */
.pb-sel-ck { flex: 0 0 auto; width: 13px; color: #6366f1; line-height: 0; opacity: 0; }

.pb-sel-row.is-on .pb-sel-ck { opacity: 1; }

.pb-sel-none { padding: 20px 14px; text-align: center; font-size: 10.5px; color: #8d8d8d; line-height: 1.55; }

.pb-sel-none strong { color: #525252; }

.pb-sel-foot {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  border-top: 1px solid #f3f4f6; background: #fbfbfc; flex: 0 0 auto;
}

.pb-sel-count { flex: 1; font-size: 10px; font-weight: 700; color: #8d8d8d; }

.pb-sel-act {
  border: 1px solid #e5e7eb; background: #fff; border-radius: 7px;
  padding: 5px 10px; font-size: 10.5px; font-weight: 700; color: #525252;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}

.pb-sel-act:hover { border-color: #6366f1; color: #4f46e5; }

.pb-sel-act.is-primary { border-color: #6366f1; background: #6366f1; color: #fff; }

.pb-sel-act.is-primary:hover { opacity: .9; color: #fff; }

/* ── the three doors to the body ────────────────────────────────────────── */
.pb-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }

.pb-door {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  text-align: left; padding: 10px 11px; border-radius: 10px; cursor: pointer;
  border: 1px dashed #d5d9e0; background: #fff; font-family: inherit;
  transition: all .12s;
}

.pb-door b { font-size: 11.5px; font-weight: 700; color: #161616; display: flex; align-items: center; gap: 5px; }

.pb-door b svg { flex: 0 0 auto; }

.pb-door span { font-size: 10px; color: #8d8d8d; line-height: 1.4; }

.pb-door:hover { border-color: #6366f1; background: #fafaff; }

.pb-door.is-on { border-style: solid; border-color: #6366f1; background: #f5f6ff; }

.pb-door.is-on b { color: #4338ca; }

.pb-door.is-ai { border-color: #c7d2fe; background: linear-gradient(135deg, #eef2ff, #f5f3ff); }

.pb-door.is-ai b { color: #4f46e5; }

.pb-door.is-ai:hover { border-color: #6366f1; box-shadow: 0 2px 8px rgba(99, 102, 241, .18); }

/* ── the email body box + its live preview ──────────────────────────────── */
.pb-scope .cb-textarea.pb-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.6; min-height: 150px;
}

.pb-prev {
  border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden;
  background: #f6f7f9; min-height: 150px; max-height: 320px;
}

/* The frame is the width of the box, not of an invented phone — the send
   screen owns the device viewports and this is only "did the words land". */
.pb-prev-frame { width: 100%; height: 300px; border: 0; display: block; background: #fff; }

.pb-prev-none {
  padding: 26px 16px; text-align: center;
  font-size: 10.5px; color: #8d8d8d; line-height: 1.5;
}

/* ⚠️ THE DESIGN COULD NOT BE RENDERED, AND THE WORDS BELOW ARE UNDESIGNED.
   Amber rather than red: nothing is broken and the send is unaffected — but it
   must not be quiet, because the alternative is a preview that silently shows a
   different email from the one that will go out. */
.pb-prev-warn {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 11px; margin: 0 0 8px;
  border: 1px solid #fcd9a4; border-radius: 8px; background: #fffaf0;
  font-size: 10.5px; line-height: 1.5; color: #92400e;
}

.pb-prev-warn svg { flex: 0 0 auto; margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════════════
   THE DESIGN SWITCHER — IT SITS ON TOP OF THE PREVIEW

   Tyler, 2026-08-11: *"make sure that you're able to switch the template on a
   drop-down right above the preview, but that template gets locked."*

   Squared off against the frame underneath it (no bottom radius, no gap) so the
   two read as one object: a picture with its own control, rather than a form row
   that happens to sit above an iframe. That adjacency is the whole point of
   moving it here, and a 12px gap would throw it away.
   ══════════════════════════════════════════════════════════════════════════ */
.pb-designbar { display: flex; flex-direction: column; gap: 5px; margin: 0 0 -1px; }

.pb-designbar-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 15px;
}

.pb-designbar-lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8d8d8d;
}

/* The padlock states the RULE, not a refusal — the control below it still
   opens. Amber for "this will cost you something", grey for "it is over". */
.pb-designbar-lock {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 650; letter-spacing: .02em;
  color: #b45309;
}

.pb-designbar-lock svg { width: 11px; height: 11px; }

.pb-designbar.is-frozen .pb-designbar-lock { color: #8d8d8d; }

/* Hairline in the same colour as the note, so an approved piece reads as
   "careful" from across the room without shouting. */
.pb-designbar.is-costly .pb-trig { border-color: #fcd9a4; }

.pb-designbar.is-frozen .pb-trig { border-color: #e5e7eb; background: #f6f7f9; }

/* ⚠️ THE TRIGGER SQUARES OFF INTO THE FRAME. Both bottom corners, or the
   rounded button floats a pixel above a squared box and looks misaligned. */
.pb-designbar .pb-trig { width: 100%; border-radius: 8px 8px 0 0; }

/* ⚠️ THE HOST DIV IS THE SIBLING, NOT THE BAR. paintDesign() repaints
   `[data-pb-designhost]` innerHTML, so `.pb-designbar` is its CHILD and
   `.pb-designbar + .pb-prev` matches nothing — the frame kept all four rounded
   corners and the seam showed. */
[data-pb-designhost] + .pb-prev { border-radius: 0 0 10px 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   A SOCIAL POST IS NOT ONLY ITS WORDS

   Tyler, 2026-08-11: *"the post isn't just what it says. You should be able to
   upload [media]. What about other stuff?"* — so: the media tray, the first
   comment, the hashtags, and a readout of which of the chosen networks Post
   for Me is actually connected to.
   ══════════════════════════════════════════════════════════════════════════ */
.pb-media {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
}

.pb-media-item {
  position: relative; width: 84px; height: 84px; border-radius: 10px;
  overflow: hidden; border: 1px solid #e5e7eb; background: #f6f7f9; flex: 0 0 auto;
}

.pb-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pb-media-item.is-file {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 6px; text-align: center; font-size: 9px; color: #8d8d8d; line-height: 1.3;
}

.pb-media-item.is-busy { opacity: .55; }

.pb-media-x {
  position: absolute; top: 4px; right: 4px; width: 19px; height: 19px;
  border: 0; border-radius: 50%; background: rgba(15, 23, 42, .66); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 0;
}

.pb-media-x:hover { background: #dc2626; }

.pb-media-add {
  width: 84px; height: 84px; border-radius: 10px; flex: 0 0 auto;
  border: 1px dashed #d5d9e0; background: #fff; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 9.5px; font-weight: 700; color: #8d8d8d; line-height: 1.3; text-align: center;
}

.pb-media-add:hover { border-color: #6366f1; color: #4f46e5; background: #fafaff; }

.pb-media-add svg { color: inherit; }

/* The chosen networks, shown back as chips so "who is this going to" is
   answered without opening the dropdown again. */
.pb-nets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.pb-net {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 10px 4px 6px;
  font-size: 11px; font-weight: 700; color: #525252; background: #fff; line-height: 1.3;
}

.pb-net .pb-net-ic { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--_n, #6366f1); }

/* ⚠️ A NETWORK WE CANNOT POST TO MUST SAY SO ON THE CHIP. Post for Me is the
   publisher (project_postiz_social_scheduler); on a host where it has never
   been connected, /api/social/profiles 404s and a confident row of network
   chips is a promise the app cannot keep. */
.pb-net.is-off { border-style: dashed; color: #9a3412; background: #fffbf5; border-color: #fed7aa; }

.pb-net.is-off .pb-net-ic { color: #ea580c; }

/* ── notes that carry a state ───────────────────────────────────────────── */
.pb-count { font-variant-numeric: tabular-nums; }

/* Over a network's own limit — the post will be refused, so it is red, not
   grey, and it names the network that will refuse it. */
.pb-count.is-over { color: #b91c1c; font-weight: 700; }

.pb-auto-note {
  margin-top: 0; padding: 10px 12px; border-radius: 9px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
}

.pb-auto-note strong { color: #7c2d12; }

/* ── what has already happened to it — read-only facts ──────────────────── */
.pb-facts { display: flex; flex-direction: column; gap: 1px; }

.pb-fact {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid #f3f4f6;
}

.pb-fact:last-child { border-bottom: 0; }

.pb-fact > span { font-size: 10.5px; color: #8d8d8d; flex: 0 0 118px; }

.pb-fact > b { font-size: 11.5px; font-weight: 700; color: #161616; }

@media (max-width: 1000px) {
.pb-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
/* ⚠️ THE SIDE-BY-SIDE ROWS HAVE TO COLLAPSE, or the phone gets two 130px
     columns and every label wraps to three lines. `.cb-row` is the campaign
     builder's class and it already collapses there; `.is-3` / `.is-wide` are
     ours and would not have. */
  .pb-scope .cb-row.is-3, .pb-scope .cb-row.is-wide { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
.pb-kinds, .pb-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pb-fact > span { flex: 0 0 96px; }
}

@media (max-width: 480px) {
.pb-kinds, .pb-doors { grid-template-columns: 1fr; }

.pb-media-item, .pb-media-add { width: 72px; height: 72px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PIECES PANEL (marketing-hub-pieces.js)

   Its rows are `.ax-triage-row.tmr-row` and its tiles are `.ax-card` — both
   already loaded on every tab — so only these four things are new: the Edit
   affordance on a row, the empty states, and the two breakdown columns.
   ══════════════════════════════════════════════════════════════════════════ */

/* Edit sits on the row itself so a draft is one click from being finished. It
   stays out of the way until the row is hovered, because the row's own job is
   to be read. */
.mh-pb-edit {
  flex: 0 0 auto; border: 1px solid #e5e7eb; background: #fff; border-radius: 7px;
  padding: 5px 10px; font-size: 10.5px; font-weight: 700; color: #525252;
  cursor: pointer; font-family: inherit; opacity: 0; transition: opacity .12s, border-color .12s, color .12s;
}

.mh-pb-edit:hover { border-color: #6366f1; color: #4f46e5; }

/* ⚠️ Keyboard users never hover. Without this the only way to reach Edit is a
   pointer, on a control that is invisible until it is too late. */
.mh-pb-edit:focus-visible { opacity: 1; outline: 2px solid #6366f1; outline-offset: 1px; }

@media (hover: none) {
.mh-pb-edit { opacity: 1; }
}

.mh-pb-empty {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 40px 22px; text-align: center;
}

.mh-pb-empty b { font-size: 13px; font-weight: 800; color: #161616; }

.mh-pb-empty span { font-size: 11px; color: #8d8d8d; line-height: 1.55; max-width: 460px; }

.mh-pb-cta {
  margin-top: 6px; border: 0; background: #6366f1; color: #fff; border-radius: 8px;
  padding: 9px 16px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}

.mh-pb-cta:hover { opacity: .9; }

.mh-pb-bd {
  display: flex; align-items: center; gap: 9px; padding: 7px 14px;
  border-bottom: 1px solid #f6f7f9;
}

.mh-pb-bd:last-child { border-bottom: 0; }

.mh-pb-bd-l {
  flex: 0 0 40%; font-size: 10.5px; color: #525252;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mh-pb-bd-bar { flex: 1; height: 5px; border-radius: 3px; background: #f1f2f4; overflow: hidden; }

.mh-pb-bd-bar i { display: block; height: 100%; border-radius: 3px; }

.mh-pb-bd-n {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #161616;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   A CAMPAIGN'S PIECES, on the campaign detail page (renderDetail in
   marketing-hub-campaigns.js). `.mc-*` because it lives inside
   `.mc-detail-section` and belongs to that screen's vocabulary — the rules are
   here rather than in marketing-hub-campaigns.css only so the whole piece
   feature ships behind one `?v=`.
   ══════════════════════════════════════════════════════════════════════════ */
.mc-piece-rows { display: flex; flex-direction: column; gap: 4px; }

.mc-piece-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border: 1px solid #eef0f4; border-radius: 9px; background: #fff;
  cursor: pointer; transition: border-color .12s, background .12s;
}

.mc-piece-row:hover { border-color: #c7d2fe; background: #fafaff; }

/* A planned row is not a record yet, so it must not look clickable as a whole —
   only its Build it button does anything. */
.mc-piece-row.is-plan { cursor: default; border-style: dashed; background: #fbfbfc; }

.mc-piece-row.is-plan:hover { border-color: #d5d9e0; background: #fbfbfc; }

/* Identical to `.cb-piece-kind` in the campaign builder's sheet — same colour
   token, same color-mix tint — so a kind chip reads the same in the popup that
   plans it and on the page that lists it. */
.mc-piece-kind {
  flex: 0 0 auto; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; padding: 3px 6px; border-radius: 5px;
  min-width: 62px; text-align: center;
  color: var(--_pk, #6366f1); background: color-mix(in srgb, var(--_pk, #6366f1) 12%, #fff);
}

.mc-piece-name {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  font-size: 11.5px; font-weight: 700; color: #161616;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mc-piece-name i {
  font-style: normal; font-size: 10px; font-weight: 400; color: #8d8d8d;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mc-piece-pill {
  flex: 0 0 auto; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; padding: 3px 7px; border-radius: 5px;
}

.mc-piece-when {
  flex: 0 0 62px; text-align: right; font-size: 10.5px; color: #8d8d8d;
  font-variant-numeric: tabular-nums;
}

.mc-piece-sub {
  margin: 14px 0 7px; font-size: 10.5px; font-weight: 600;
  color: #8d8d8d; line-height: 1.5;
}

.mc-piece-note { font-size: 11px; color: #8d8d8d; line-height: 1.55; padding: 4px 0; }

.mc-piece-note.is-bad { color: #b91c1c; }

/* ══ A PIECE THAT HAS BEEN SENT ═══════════════════════════════════════════
   Tyler, 2026-08-10: "Once it has been sent once, it's locked down. There's no
   change again."

   ⚠️ IT IS A BANNER, NOT A GREY FORM. The form below it IS greyed (lockForm()
   in marketing-hub-piece-builder.js disables every control), and a wall of
   disabled boxes with nothing saying why is the single most frustrating screen
   an app can show. This says why, at the top, before anything is touched — and
   it names the way forward, which is Duplicate in the footer.

   Amber, not red: nothing has gone wrong. This is the normal end state of a
   piece that worked. */
.pb-scope .cb-note.pb-locked {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 14px; padding: 11px 13px;
  border: 1px solid #fcd34d; border-radius: 9px;
  background: #fffbeb; color: #78350f;
  font-size: 11.5px; line-height: 1.6;
}

.pb-scope .cb-note.pb-locked svg { flex: 0 0 auto; margin-top: 1px; color: #b45309; }

.pb-scope .cb-note.pb-locked strong { color: #713f12; }

/* ── 6 · THE WORK BEHIND IT ─────────────────────────────────────────────────
   A piece's production deliverable and its approval task, once they exist in
   Work. Deliberately NOT the Work task card: this is a one-line receipt saying
   "that job is tracked over there", and a full .rp-card here would imply the
   piece popup is a place to work the task. The row leads to Work, where it is.

   ⚠️ .cb-toggle[disabled] gets .is-disabled from the JS as well — Safari will
   not fire a click on a disabled <button>, so the "name an approver first" note
   is the only thing that explains itself. Keep the note. */
.pb-scope .pbw-task {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
  background: #fff; cursor: pointer;
  transition: border-color .12s, background .12s;
}

.pb-scope .pbw-task:hover { border-color: #94a3b8; background: #f8fafc; }

.pb-scope .pbw-task-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b;   /* open */
}

.pb-scope .pbw-task.is-done .pbw-task-dot { background: #16a34a; }

.pb-scope .pbw-task-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.pb-scope .pbw-task-lbl {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink3, #64748b);
}

.pb-scope .pbw-task-name {
  font-size: 12.5px; font-weight: 600; color: var(--ink1, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pb-scope .pbw-task.is-done .pbw-task-name { color: var(--ink3, #64748b); }

.pb-scope .pbw-task-meta { font-size: 10.5px; color: var(--ink3, #64748b); }

.pb-scope .pbw-task-go {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #0369a1;
}

/* ── A JOB THAT DOES NOT EXIST YET ────────────────────────────────────────
   Same row, dashed, and it does not pretend to be clickable — there is nothing
   at the other end until the piece is saved. `is-blocked` is the third state:
   a job that will NOT be created, and says which fact is missing. */
.pb-scope .pbw-task.is-planned {
  cursor: default; border-style: dashed; border-color: #d5d9e0; background: #fcfcfd;
}

.pb-scope .pbw-task.is-planned:hover { border-color: #d5d9e0; background: #fcfcfd; }

.pb-scope .pbw-task.is-planned .pbw-task-dot { background: #cbd5e1; }

.pb-scope .pbw-task.is-planned .pbw-task-go { color: #94a3b8; }

.pb-scope .pbw-task.is-blocked .pbw-task-name { color: var(--ink3, #64748b); font-weight: 500; }

.pb-scope .pbw-task.is-blocked .pbw-task-dot { background: #e2e8f0; }

/* ── THE AUTOMATION'S CLOCK, STATED ───────────────────────────────────────
   The Automated piece's whole schedule section. Not a field: nothing here is
   set on this screen, so it is drawn as a fact with the ⓘ that opens the
   workflow. Amber when no workflow is linked, because that is a piece that will
   never run and the tab dot already says so. */
.pb-scope .pb-autowhen {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; border-radius: 12px;
  border: 1px solid #fed7aa; background: linear-gradient(180deg, #fffbf5, #fff7ed);
}

.pb-scope .pb-autowhen.is-missing { border-color: #fca5a5; background: #fef2f2; }

.pb-scope .pb-autowhen-ic {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: #ea580c; color: #fff;
}

.pb-scope .pb-autowhen.is-missing .pb-autowhen-ic { background: #dc2626; }

.pb-scope .pb-autowhen-ic svg { width: 14px; height: 14px; }

.pb-scope .pb-autowhen-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.pb-scope .pb-autowhen-t b { font-size: 12.5px; font-weight: 700; color: #7c2d12; }

.pb-scope .pb-autowhen.is-missing .pb-autowhen-t b { color: #991b1b; }

.pb-scope .pb-autowhen-t span { font-size: 11px; line-height: 1.5; color: #9a3412; }

.pb-scope .pb-autowhen.is-missing .pb-autowhen-t span { color: #b91c1c; }

.pb-scope .pb-autowhen-t strong { font-weight: 700; }

.pb-scope .pb-autowhen-i {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  border: 1px solid #fed7aa; background: #fff; color: #ea580c;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

.pb-scope .pb-autowhen-i:hover { border-color: #ea580c; background: #fff7ed; }

.pb-scope .pb-autowhen-i svg { width: 13px; height: 13px; }

/* ── A CADENCE FROM BEFORE CADENCES WERE AUTOMATIONS ──────────────────────
   Shown so an old row does not silently lose a fact it carries; never offered,
   never rewritten. */
.pb-scope .cb-note.pb-legacy-cadence {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 9px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid #e5e7eb; background: #fafafa;
}

.pb-scope .cb-note.pb-legacy-cadence svg { flex: 0 0 auto; margin-top: 1px; width: 13px; height: 13px; color: #a1a1aa; }

/* ── WHAT HAPPENS, IN ORDER ───────────────────────────────────────────────
   Tyler: *"the schedule it's on, you should also show them the details."* The
   four facts the due date actually governs, on the tab that sets it — read-only,
   and deliberately the SAME four the rail leads with rather than four others. */
.pb-scope .pb-schedsum {
  margin-top: 14px; padding: 11px 12px; border-radius: 12px;
  border: 1px solid #eef0f4; background: #fafbfc;
}

.pb-scope .pb-schedsum-h {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #94a3b8; margin-bottom: 8px;
}

.pb-scope .pb-schedsum-r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-top: 1px solid #f1f3f6;
}

.pb-scope .pb-schedsum-r:first-of-type { border-top: 0; }

.pb-scope .pb-schedsum-r > span { font-size: 11px; color: #8d8d8d; flex: 0 0 auto; }

.pb-scope .pb-schedsum-r > b {
  font-size: 12px; font-weight: 700; color: #161616; text-align: right;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pb-scope .pb-schedsum-r > b.is-soft { font-weight: 600; color: #8d8d8d; }

.pb-scope .pb-schedsum-r > b.is-empty { font-weight: 600; color: #c6c6c6; }

.pb-scope .pb-schedsum .cb-note { margin-top: 9px; }

/* ══════════════════════════════════════════════════════════════════════════
   THE QUIETER FORM — 2026-08-12

   Tyler: *"Overall, everything just kind of needs a cleaner look."*

   Three measured things were making it noisy, and none of them was the colour
   palette:

   1. 🚫 A NUMBERED STEP WITH NO OTHER STEPS ON SCREEN. `.cb-sec-n` drew a
      violet ①…⑥ beside every heading. That was right when the form was one
      scrolling column; split across five tabs the Content tab opened on a lone
      "③" with no ① or ② anywhere, which reads as a wizard you have skipped two
      steps of. The numbers are gone from the markup (render()); the heading
      carries the section on its own and the tab bar carries the order.

   2. EVERY SINGLE FIELD CARRIED A PARAGRAPH. `.cb-note` is 10.5px grey and
      there were sixteen of them, so the eye had no way to tell "this explains
      an unusual rule" from "this restates the label". They are dimmer and
      tighter here, and the ones that matter (a warning, a legacy fact, a lock)
      are boxed instead — contrast does the sorting rather than the reader.

   3. Sections were 16px apart with a hairline between, on a body that already
      scrolls inside a tab. Slightly tighter, and the rule is lighter.

   ⚠️ EVERY RULE IS SCOPED TO `.pb-scope`. `.cb-sec`, `.cb-note` and friends are
   the CAMPAIGN builder's, shared with the new-group dialog; restyling them
   unscoped changes two other popups nobody asked about. */
.pb-scope .cb-sec { padding: 15px 0; border-bottom-color: #f6f7f9; }

.pb-scope .cb-sec-h {
  font-size: 10px; font-weight: 800; letter-spacing: .62px;
  color: #52525b; margin-bottom: 11px;
}

.pb-scope .cb-sec-opt {
  font-style: normal; font-weight: 700; letter-spacing: .04em;
  color: #a1a1aa; text-transform: none;
}

.pb-scope .cb-note { color: #9b9ba3; margin-top: 5px; }

.pb-scope .cb-note strong { color: #6b7280; }

/* The boxed notes keep their own colours — they are the ones worth reading. */
.pb-scope .cb-note.pb-locked,
.pb-scope .cb-note.pb-recipe-warn,
.pb-scope .cb-note.pb-legacy-cadence,
.pb-scope .cb-note.pb-auto-note { color: inherit; }

.pb-scope .cb-lbl { color: #3f3f46; }

/* ══════════════════════════════════════════════════════════════════════════
   TABS — "maybe this is way too much for a piece, and you need tabs"

   The bar sits BETWEEN `.cb-head` and `.cb-body`, so it does not scroll away
   with the section it belongs to. Panes are `display:none` / `block` — never
   `hidden`, which an author `display` beats
   (reference_hidden_attr_loses_to_author_display), and never detached, because
   `pull()` and every `paintX()` read the whole form out of the live DOM.
   ══════════════════════════════════════════════════════════════════════════ */
.pb-scope .pb-tabs {
  display: flex; gap: 3px; flex: 0 0 auto;
  padding: 0 18px; border-bottom: 1px solid #eef0f4; background: #fbfbfc;
  overflow-x: auto; scrollbar-width: none;
}

.pb-scope .pb-tabs::-webkit-scrollbar { display: none; }

.pb-scope .pb-tab {
  position: relative; display: flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  padding: 11px 12px 10px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: #8d8d8d;
  transition: color .12s, border-color .12s;
}

.pb-scope .pb-tab:hover { color: #525252; }

.pb-scope .pb-tab.is-on { color: #4f46e5; border-bottom-color: #6366f1; }

.pb-scope .pb-tab-ic { line-height: 0; opacity: .8; flex: 0 0 auto; }

.pb-scope .pb-tab.is-on .pb-tab-ic { opacity: 1; }

.pb-scope .pb-tab:focus-visible { outline: 2px solid #6366f1; outline-offset: -3px; border-radius: 6px; }

/* ⚠️ AMBER, NOT RED, AND NEVER A COUNT. It marks "this tab holds something
   that will stop the save" — one dot, one meaning. A number would invite being
   read as severity. */
.pb-scope .pb-tab-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; flex: 0 0 auto;
}

.pb-scope .pb-pane { display: none; }

.pb-scope .pb-pane.is-on { display: block; }

/* The first section in a pane must not restate a top margin the bar already
   provides, or every tab opens with a hole above it. */
.pb-scope .pb-pane > .cb-sec:first-child { margin-top: 0; }

@media (max-width: 620px) {
.pb-scope .pb-tabs { padding: 0 12px; }

.pb-scope .pb-tab { padding: 10px 9px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE AUDIENCE, AS TWO BLOCKS — "they need to feel more separated"

   One block addresses the send and can mail the wrong people; the other is
   prose that is never sent. They were two fields in a row, which said they
   were two halves of one answer. See audienceHtml().
   ══════════════════════════════════════════════════════════════════════════ */
.pb-blocks { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: start; }

.pb-block {
  border: 1px solid #e9ebf0; border-radius: 12px; background: #fcfcfd;
  overflow: hidden; min-width: 0;
}

/* A block that has been answered stops looking like an empty slot. */
.pb-block.is-set { border-color: #dfe3ec; background: #fff; }

.pb-block-h {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-bottom: 1px solid #eef0f4; background: #fff;
}

.pb-block.is-set .pb-block-h { background: #fbfbff; }

.pb-block-ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--_b, #6366f1); background: color-mix(in srgb, var(--_b, #6366f1) 12%, #fff);
}

.pb-block-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.pb-block-t b { font-size: 11.5px; font-weight: 800; color: #161616; line-height: 1.3; }

.pb-block-t i {
  font-style: normal; font-size: 10px; color: #8d8d8d; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pb-block-b { padding: 12px; }

.pb-block-b .cb-field { margin: 0; }

/* ════════════════════════════════════════
   GROUPS AND NAMED PEOPLE, SIDE BY SIDE INSIDE ONE BLOCK

   Two labelled halves rather than two blocks: they are two ways of answering
   ONE question, and the note underneath explains both at once. Splitting them
   into separate `.pb-block`s would have restated "who gets it" twice.

   ⚠️ `minmax(0, 1fr)`, not `1fr`. Each half holds a PbSel trigger whose label can
   be a long group name, and a bare `1fr` is `minmax(auto, 1fr)` — the longest
   name sets the column's floor and pushes the other half off the card. Same
   trap `.pb-kinds` documents. */
.pb-aud-two {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}

.pb-aud-half { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.pb-aud-l {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em;
}

.pb-aud-l svg { width: 12px; height: 12px; }

/* One column below the popup's own narrow breakpoint. Two dropdowns at ~150px
   each show "3 groups" and nothing else useful. */
@media (max-width: 720px) {
.pb-aud-two { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 820px) {
.pb-blocks { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE RECIPE — how an automation becomes a piece

   Amber-tinted like `.pb-auto-note`, because it is the same idea: this record
   does not behave like the others, and the screen has to say so before anybody
   wonders why nothing ever went out.
   ══════════════════════════════════════════════════════════════════════════ */
.pb-recipe {
  margin-top: 12px; padding: 13px 14px;
  border: 1px solid #fed7aa; border-radius: 11px; background: #fffbf5;
}

.pb-recipe-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #9a3412; }

.pb-recipe-h b { font-size: 12px; font-weight: 800; color: #7c2d12; flex: 1; }

.pb-recipe-h svg { flex: 0 0 auto; }

.pb-steps {
  margin: 0 0 10px; padding-left: 20px;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11.5px; line-height: 1.55; color: #7c2d12;
}

.pb-steps li::marker { font-weight: 800; color: #c2410c; }

.pb-steps b { color: #7c2d12; font-weight: 800; }

.pb-scope .cb-note.pb-recipe-warn {
  margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
  background: #fff; border: 1px solid #fed7aa; color: #9a3412; font-size: 11px;
}

.pb-scope .cb-note.pb-recipe-warn.is-bad { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }

.pb-scope .cb-note.pb-recipe-warn strong { color: #7c2d12; }

.pb-scope .cb-note.pb-recipe-warn.is-bad strong { color: #991b1b; }

/* ── what the workflow calls, ready to paste ──────────────────────────────
   ⚠️ IT SCROLLS INSIDE ITS OWN BOX. A URL with a long host would otherwise set
   the width of the whole 980px card and put a horizontal scrollbar on the
   popup body (reference_page_scrollbar_convention). */
.pb-wire { border: 1px solid #fed7aa; border-radius: 9px; background: #fff; overflow: hidden; }

.pb-wire-h {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid #ffedd5; background: #fffaf5;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #9a3412;
}

.pb-wire-h span { flex: 1; }

.pb-wire-copy {
  border: 1px solid #fed7aa; background: #fff; border-radius: 6px;
  padding: 3px 9px; font-size: 10px; font-weight: 800; color: #9a3412;
  cursor: pointer; font-family: inherit; letter-spacing: 0; text-transform: none;
}

.pb-wire-copy:hover { border-color: #ea580c; color: #7c2d12; }

.pb-wire-code {
  margin: 0; padding: 10px 12px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; line-height: 1.6; color: #431407; white-space: pre;
}

.pb-wire + .pb-runs { margin-top: 9px; }

.pb-runs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pb-runs-n { flex: 1; min-width: 180px; font-size: 11px; color: #9a3412; line-height: 1.5; }

.pb-runs-n b { color: #7c2d12; font-weight: 800; }

.pb-scope .pb-recipe .cb-note { color: #9a3412; }

.pb-scope .pb-recipe code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 4px; padding: 0 3px;
}

/* Two doors instead of three, for the kinds that have no design to pick. */
.pb-doors.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A Text piece offers one door (Draft with AI) and no upload — there is no such
   thing as a .html you drop into an SMS. Full width rather than a third of a row
   with two gaps after it, which reads as two doors that failed to render. */
.pb-doors.is-1 { grid-template-columns: 1fr; }

/* The STOP notice. A statement, not a field — so it is set apart from the form
   rows above it rather than styled like one more note nobody reads. */
.pb-sms-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  padding: 10px 12px; border: 1px solid #cfe6e2; border-radius: 10px;
  background: #f2faf8; color: #29524c; font-size: 11.5px; line-height: 1.5;
}

.pb-sms-note svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: #0d9488; }

/* ══════════════════════════════════════════════════════════════════════════
   ⓘ — LOOK AT IT WITHOUT CHOOSING IT

   ⚠️ THE TRIGGER'S ⓘ IS A SIBLING, NOT A CHILD. `.pb-trig` is a <button> and
   nested interactive content is invalid — so the pair sits in a flex row and
   the trigger takes `flex:1`. `.pb-trig { width:100% }` still holds, because
   the wrapper is what is being filled now.
   ══════════════════════════════════════════════════════════════════════════ */
.pb-trigwrap { display: flex; align-items: stretch; gap: 6px; }

.pb-trigwrap .pb-trig { flex: 1; min-width: 0; }

.pb-trig-i {
  flex: 0 0 auto; width: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e5e7eb; border-radius: 9px; background: #fff;
  color: #a3a3a3; cursor: pointer; font-family: inherit;
  transition: border-color .12s, color .12s, background .12s;
}

.pb-trig-i:hover { border-color: #6366f1; color: #4f46e5; background: #fafaff; }

.pb-trig-i:focus-visible { outline: 0; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }

/* The row's ⓘ. Visible on hover or focus so a list of eight campaigns is not
   eight competing affordances — but always IN the layout, so nothing shifts
   when it appears. */
.pb-sel-i {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #a3a3a3; cursor: pointer; opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}

.pb-sel-row:hover .pb-sel-i, .pb-sel-row.is-cursor .pb-sel-i, .pb-sel-i:focus-visible { opacity: 1; }

.pb-sel-i:hover { color: #4f46e5; background: #e0e7ff; }

.pb-sel-i:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }

@media (hover: none) {
.pb-sel-i { opacity: 1; }
}

.pb-sel-row.is-off .pb-sel-i { display: none; }

/* ── the read-only card the ⓘ opens ───────────────────────────────────────
   ⚠️ ABOVE the dropdown panel (1000050) and above the builder overlay, because
   it is opened FROM both — an inspector rendering behind the thing that opened
   it is an inspector nobody can read (reference_work_zindex_tiers). */
.pb-info-wrap {
  position: fixed; inset: 0; z-index: 1000060;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 23, 42, .42);
  animation: pbSelIn .12s ease-out both;
}

.pb-info-card {
  width: 100%; max-width: 460px; max-height: 82vh;
  display: flex; flex-direction: column; min-height: 0;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  font-family: var(--f, system-ui, -apple-system, sans-serif);
}

.pb-info-head {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 14px 14px 12px; border-bottom: 1px solid #f3f4f6;
}

.pb-info-headtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.pb-info-headtxt b { font-size: 13.5px; font-weight: 800; color: #161616; line-height: 1.3; }

.pb-info-headtxt span { font-size: 10.5px; color: #8d8d8d; line-height: 1.4; }

.pb-info-x {
  flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 7px;
  background: none; color: #a3a3a3; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.pb-info-x:hover { background: #f3f4f6; color: #525252; }

.pb-info-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 14px; scrollbar-width: thin; }

.pb-info-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid #f6f7f9;
}

.pb-info-row:last-child { border-bottom: 0; }

.pb-info-row > span { flex: 0 0 116px; font-size: 10.5px; color: #8d8d8d; }

.pb-info-row > b { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700; color: #161616; line-height: 1.5; }

/* A description is a paragraph and reads badly in a 300px column beside a
   label, so it stacks and drops the bold. */
.pb-info-row.is-wide { flex-direction: column; gap: 3px; }

.pb-info-row.is-wide > span { flex: none; }

.pb-info-row.is-wide > b { font-weight: 500; }

.pb-info-none { padding: 22px 6px; text-align: center; font-size: 11px; color: #8d8d8d; line-height: 1.6; }

.pb-info-foot {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 10px 12px; border-top: 1px solid #f3f4f6; background: #fbfbfc;
}

.pb-info-note { flex: 1; font-size: 10.5px; color: #8d8d8d; line-height: 1.45; }

.pb-info-note b { color: #525252; }

.pb-info-foot a.pb-sel-act { text-decoration: none; display: inline-block; }

@media (max-width: 520px) {
.pb-info-row { flex-direction: column; gap: 2px; }

.pb-info-row > span { flex: none; }
}

/* ══ NEW CRM GROUP — the little dialog the audience dropdown's foot opens ════
   Tyler, 2026-08-11: *"I should also be able to create a group right from the
   piece area."*

   ⚠️ IT STACKS ON TOP OF THE PIECE POPUP, WHICH STAYS OPEN UNDERNEATH.
   `.cb-overlay` is z-index 1000000 and stacks by document order — this one is
   appended later so it would win anyway, but relying on append order breaks the
   moment something else portals a layer in between. It is stated.
   ⚠️ It must sit BELOW send-kit's design wall, which lifts itself off the
   host's tallest layer (liftStack) — nothing here may out-climb that or the
   picker would open behind its own trigger. */
.pbng-ov { z-index: 1000005; }

.pbng-card { max-width: 520px; }

.pbng-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 12px; border-bottom: 1px solid #e5e7eb;
}

.pbng-h b { font-size: 16px; color: #0f172a; letter-spacing: -.01em; }

.pbng-x {
  border: 0; background: transparent; cursor: pointer; color: #64748b;
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
}

.pbng-x:hover { background: #f1f5f9; color: #0f172a; }

/* min-height:0 for the same reason .cb-card needs it — without it a long
   picked-people list pushes the footer off the bottom of the viewport. */
.pbng-b { padding: 18px 22px; overflow: auto; min-height: 0; }

.pbng-f {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px 18px; border-top: 1px solid #e5e7eb; background: #fafbfc;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE KIND CHOOSER — the question before the form (openKindChooser).

   Tyler, 2026-08-12: *"when you create the piece, it should show email, social
   post, content and paid as a pop-up beforehand, just like when we create the
   report."* So it wears the same family skin as the New-group dialog above,
   and the six tiles inside it are `.pb-kind` — the SAME markup section 1 used
   to draw, moved rather than copied.
   ══════════════════════════════════════════════════════════════════════════ */
.pbkc-ov { z-index: 1000004; }

/* under the group dialog, over the form */
.pbkc-card { max-width: 900px; }

.pbkc-h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 20px 24px 14px; border-bottom: 1px solid #e5e7eb;
}

.pbkc-h b { font-size: 17px; color: #0f172a; letter-spacing: -.015em; }

.pbkc-h p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #6b7280; }

.pbkc-h p b { font-size: inherit; color: #4338ca; }

.pbkc-x {
  border: 0; background: transparent; cursor: pointer; color: #64748b; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
}

.pbkc-x:hover { background: #f1f5f9; color: #0f172a; }

.pbkc-b { padding: 20px 24px; overflow: auto; min-height: 0; }

/* Three-up here, not six: the chooser has the whole card to itself, so each
   tile can carry its sentence on two lines instead of three cramped ones. The
   grid definition is per-context because `.pb-kinds` is one control used at
   two sizes, which is the same reason wkdt-cards is flex rather than auto-fit. */
/* ⚠️ `auto-fit`, NOT A FIXED THREE. The chooser holds two grids of different
   lengths — four live kinds, three shut ones — and a hard column count orphans
   whichever section is not a multiple of it. 190px is the narrowest a tile can
   be and still fit "A text message, to a lot of phones at once." on two lines. */
.pbkc-b .pb-kinds { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

/* Margin, not the grid gap: the rule is a SIBLING of the two grids now, so no
   gap applies between them. */
.pbkc-b .pb-kinds-sep { margin: 20px 0 12px; padding-top: 0; border-top: 0; }

.pbkc-b .pb-kind {
  gap: 5px; padding: 15px 16px 13px; border-radius: 14px; min-height: 108px;
}

.pbkc-b .pb-kind:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .07); }

.pbkc-b .pb-kind-ic { width: 32px; height: 32px; border-radius: 10px; margin-bottom: 3px; }

.pbkc-b .pb-kind-ic svg { width: 17px; height: 17px; }

.pbkc-b .pb-kind-l { font-size: 14px; letter-spacing: -.01em; }

.pbkc-b .pb-kind-d { font-size: 11.5px; line-height: 1.45; color: #6b7280; }

/* The tile IS the Next button, so it says so — but only on the tile the pointer
   is on, or six "Use this →" labels compete with the six answers. */
.pbkc-b .pb-kind-go {
  display: block; margin-top: auto; padding-top: 6px;
  font-size: 11px; font-weight: 700; color: var(--_pk, #6366f1);
  opacity: 0; transform: translateX(-3px);
  transition: opacity .12s, transform .12s;
}

.pbkc-b .pb-kind:hover .pb-kind-go,
.pbkc-b .pb-kind:focus-visible .pb-kind-go { opacity: 1; transform: none; }

/* The UA's default focus ring is a heavy black box on a 14px card. Ours is the
   kind's own colour, so keyboard and mouse agree about what is under the
   cursor. Squared deliberately — a runtime capsule radius would draw this ring
   as an ellipse around the words (reference_runtime_button_radius_beats_classes). */
.pbkc-b .pb-kind:focus-visible {
  outline: 2px solid var(--_pk, #6366f1); outline-offset: 2px; border-radius: 14px;
}

/* ════════════════════════════════════════
   A KIND MRG DOES NOT RUN — DIM, LOCKED, AND STILL LEGIBLE

   Tyler, 2026-08-21, wanted paid ad / event / social post *locked* rather than
   gone. Three rules, and the first two are the ones that get skipped:

     · **The words stay readable.** The usual `opacity: .45` on the whole tile
       takes the label and the reason down with the chrome, so the one sentence
       that explains the lock is the hardest thing on the card to read. The
       chrome is greyed instead — flat background, no shadow, a grey icon
       plate — and the type keeps a real contrast ratio.
     · **`cursor: not-allowed`, and no hover lift.** `.pbkc-b .pb-kind:hover`
       above adds a shadow to every tile; without the override a locked tile
       rises under the pointer and invites the click it will refuse.
     · **The reason is always on**, where `.pb-kind-go` is hover-only. A
       refusal you have to hover to read is a dead button
       (feedback_a_refusal_below_the_fold_reads_as_a_dead_button). */
/* ⚠️ `grid-column: 1 / -1` IS FOR THE FORM'S COPY OF `.pb-kinds`, which is still
   a single grid. In the CHOOSER the rule sits between two sibling grids and the
   property is inert there; anywhere one grid is still rendered, it is what stops
   the heading sharing a row with a tile. */
.pb-kinds-sep {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px;
  margin: 6px 0 -2px; padding-top: 12px; border-top: 1px solid #eceef1;
  /* Overridden inside the chooser -- see `.pbkc-b .pb-kinds-sep` above. */
}

.pb-kinds-sep-l {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .045em;
}

.pb-kinds-sep-l svg { width: 12px; height: 12px; }

.pb-kinds-sep-d { font-size: 11.5px; color: #9aa1ab; line-height: 1.45; }

.pbkc-b .pb-kind.is-off,
.pb-kind.is-off {
  cursor: not-allowed; background: #fbfbfc; border-color: #eceef1; box-shadow: none;
}

.pbkc-b .pb-kind.is-off:hover,
.pb-kind.is-off:hover { box-shadow: none; border-color: #eceef1; background: #fbfbfc; }

/* ⚠️ NOT `var(--_pk)`. The tile keeps its kind colour in the custom property so
   nothing else has to special-case it, but a locked Event drawn in live amber
   reads as available at a glance — which is the whole thing being fixed. */
.pbkc-b .pb-kind.is-off .pb-kind-ic,
.pb-kind.is-off .pb-kind-ic { color: #9aa1ab; background: #f1f2f4; }

.pbkc-b .pb-kind.is-off .pb-kind-l,
.pb-kind.is-off .pb-kind-l { color: #6b7280; display: inline-flex; align-items: center; gap: 5px; }

.pb-kind-lk { display: inline-flex; color: #9aa1ab; }
.pb-kind-lk svg { width: 11px; height: 11px; display: block; }

.pbkc-b .pb-kind.is-off .pb-kind-d,
.pb-kind.is-off .pb-kind-d { color: #9aa1ab; }

/* Overrides the hover-only `.pb-kind-go` above: opacity and transform back to
   resting, and it stays put whether or not the pointer is anywhere near. */
.pbkc-b .pb-kind .pb-kind-off,
.pb-kind .pb-kind-off {
  display: block; opacity: 1; transform: none; margin-top: auto; padding-top: 6px;
  font-size: 10.5px; font-weight: 600; color: #9aa1ab; line-height: 1.35;
}

.pbkc-f {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 24px 18px; border-top: 1px solid #e5e7eb; background: #fafbfc;
}

.pbkc-foot { font-size: 11.5px; color: #8d8d8d; }

@media (max-width: 760px) {
.pbkc-b .pb-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pbkc-f { flex-direction: column-reverse; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════════════════════
   🚨 NOTHING IN THIS POPUP IS A PILL — AND ONE CLASS CANNOT SAY SO.

   Tyler, 2026-08-12, on the New-piece screenshot: *"the pop-up: none of them
   should have the pill round effect."*

   `assets/js/dashboard-meta.js` injects at RUNTIME
     button:not(...5 classes...) { border-radius: var(--wt-theme-btn-radius) !important }
   which scores (0,5,1) and beats a class, two classes, even three classes with
   !important — MEASURED, see reference_runtime_button_radius_beats_classes.
   `--wt-theme-btn-radius` is large on the VisionOne tenant, so every tile,
   tab, chip-add and footer button in this popup renders as a capsule. Only
   `#id .class` + !important wins, which is why the overlays carry ids that
   nothing in JS ever looks up.

   ⚠️ RESTATE THE THINGS THAT REALLY ARE ROUND inside the same scope, or an id
   fix squares off the avatars and the status dots as collateral. The rule of
   thumb: radius ≥ ~45% of height AND wider than tall = pill, square it;
   equally wide and tall = a circle somebody meant.
   ══════════════════════════════════════════════════════════════════════════ */
#mhPbOv .pb-kind,
#mhPbKindChooser .pb-kind { border-radius: 14px !important; }

#mhPbOv .pb-kindstated-lk, #mhPbOv .pb-autowhen-i { border-radius: 8px !important; }

#mhPbOv .cb-btn,
#mhPbKindChooser .cb-btn { border-radius: 10px !important; }

#mhPbOv .cb-tab, #mhPbOv .cb-sec, #mhPbOv .cb-input, #mhPbOv .cb-textarea,
#mhPbOv .cb-select, #mhPbOv .cb-link,
#mhPbOv .pb-sel-trig, #mhPbOv .pb-door, #mhPbOv .pb-trig,
#mhPbOv .pb-media-add, #mhPbOv .gd-sb-row, #mhPbOv .gd-sb-jump {
  border-radius: 10px !important;
}

#mhPbOv .pb-kind-ic, #mhPbOv .pb-sel-trig-ic, #mhPbOv .pb-kindstated .pb-kind-ic {
  border-radius: 9px !important;
}

#mhPbKindChooser .pb-kind-ic { border-radius: 10px !important; }

#mhPbOv .pbkc-x, #mhPbKindChooser .pbkc-x, #mhPbOv .pbng-x { border-radius: 8px !important; }

/* …and the genuinely round ones. Every selector below was read off a LIVE node
   in the pill sweep (~/_pwverify/_pbnopill.cjs), not remembered from markup —
   guessing a chip's class name is how a fix measures as working on every tab
   but the one with the last capsule on it. */
#mhPbOv .cb-chip, #mhPbOv .cb-chip-x, #mhPbOv .cb-chip-add,
#mhPbOv .pb-sel-badge, #mhPbOv .pb-net, #mhPbOv .cb-tog,
#mhPbKindChooser .cb-chip {
  border-radius: 999px !important;
}

#mhPbOv .pb-who-av, #mhPbOv .pb-sel-dot, #mhPbOv .pb-media-x,
#mhPbOv .pbw-task-dot, #mhPbOv .pb-tab-dot {
  border-radius: 50% !important;
}

/* ⚠️ AND ONE OF OUR OWN, which is the half of this that an id fix does not
   touch: `.pb-rail-pill` is a plain <span> carrying 999px in
   marketing-hub-piece-shell.css, so it survived the block above and was the
   last capsule on the screen — measured. A status is a fact, not a tag. */
#mhPbOv .pb-rail-pill { border-radius: 6px !important; }