/* PORTED VERBATIM from vo-app-marketing-hub/apps/Marketing-Hub/marketing-hub-piece-shell.css, minus 0 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-shell.css — THE PIECE POPUP **IS** THE DELIVERABLE
   POPUP.

   Tyler, 2026-08-12: *"the piece needs to literally look exactly like the
   deliverable pop-up in the work.html. It's literally still a deliverable,
   just a different type of deliverable, same thing we're doing with the work
   streams. It needs to look exactly the same, just with its different stuff."*

   🚨 THIS FILE USED TO CLAIM THAT AND WAS WRONG. Its previous version added a
   FACTS STRIP and a 340px right-hand rail "the way the deliverable popup
   does". The deliverable popup has neither. `.ep-deliv-modal` (Work's
   engagement-profile.js, styled in value-tracker.css) is a **720px single
   column**: head, tab strip, body, foot — full stop. The `gd-sb-*` rail that
   was copied in came from the GOAL popup, a different object with a different
   job, and the strip had no counterpart anywhere. So the shell was two
   components from two other screens bolted onto a third and described as a
   port. Both are gone; what they displayed is asked as fields on the first tab.

   ── HOW THIS PORT IS KEPT HONEST ────────────────────────────────────────────
   Every value below is COPIED from value-tracker.css, not eyeballed, and the
   source rule is named in a comment beside each block. When that file changes,
   this is what has to follow it. Anything that has no counterpart there — the
   tab DOT, the doors, the preview frame — keeps the piece builder's own look
   and says so, because inventing a deliverable-popup style for a control the
   deliverable popup does not have is how a port stops being one.

   ⚠️ EVERYTHING IS SCOPED TO `.pb-scope`. `.cb-card` / `.cb-head` / `.cb-body`
   / `.cb-foot` / `.cb-input` belong to marketing-hub-campaign-builder.css and
   are shared with the CAMPAIGN builder and the new-group popup. An unscoped
   rule here would silently redesign two other popups.

   ⚠️ LOADED AFTER marketing-hub-piece-builder.css. Several rules below have the
   same specificity as ones there and win on order alone.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The overlay ── source: .ep-deliv-modal-overlay ──────────────────────────
   `.pb-scope` is set ON the overlay element itself (`cb-overlay pb-scope`), so
   this is one element, not a descendant. */
.cb-overlay.pb-scope {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  padding: 20px;
}

/* ── The card ── source: .ep-deliv-modal ─────────────────────────────────────
   🚨 720px, DOWN FROM 1320. The width existed to hold a rail beside a form.
   With the rail gone and the Schedule tab folded into The piece, a wider card
   just stretches every input across a line nobody's eye tracks. */
.pb-scope .cb-card {
  max-width: 720px;
  max-height: calc(100vh - 40px);
  border-radius: 16px;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, .4);
}

/* ── The head ── source: .ep-deliv-modal-head / -title ───────────────────────
   ONE LINE: the cube, the title, then the actions. The explainer sentence that
   used to sit under the title moved into the body as `.pb-lede` — a two-line
   head cannot be "exactly the same" as a one-line one. */
.pb-scope .cb-head {
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
}

.pb-scope .cb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #064e3b;
  letter-spacing: 0;
}

.pb-scope .cb-title svg { color: #10b981; flex: 0 0 auto; }

.pb-scope .cb-sub { display: none; }

.pb-scope .cb-x { color: #64748b; border-radius: 8px; }

.pb-scope .cb-x:hover { background: rgba(15, 23, 42, .06); color: #0f172a; }

/* The lede — the head's old second line, now the first thing in the body.
   Sized as prose rather than as a form note, because it is one. */
.pb-scope .pb-lede {
  margin: -2px 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.pb-scope .pb-lede strong { color: #0f766e; font-weight: 700; }

/* ── The tab strip ── source: .ep-deliv-modal-tabs / .ep-deliv-modal-tab ─────
   🚨 FOLDER TABS, NOT AN UNDERLINE. The piece builder's own bar was an indigo
   underline; the deliverable popup's tab is a rounded-top card that joins the
   body by hiding the strip's border under itself. That join is the whole look,
   and it needs `margin-bottom:-1px` on the tab plus a matching
   `border-bottom-color` — reproduce one without the other and the active tab
   floats above a line instead of sitting in it. */
.pb-scope .pb-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 14px 0;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.pb-scope .pb-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  margin: 0 0 -1px 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: 9px 9px 0 0;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
  line-height: 1.2;
  outline: none;
  white-space: nowrap;
}

.pb-scope .pb-tab:hover { color: #0f172a; background: #f8fafc; }

.pb-scope .pb-tab.is-on {
  color: #047857;
  background: #ffffff;
  border-color: #e2e8f0;
  border-bottom-color: #ffffff;
}

/* 🚨 THE RUNTIME THEME RULE BEATS THE CLASS ABOVE, AND IT MEASURED 8px/8px.
   dashboard-meta.js injects `button{border-radius:var(--wt-theme-btn-radius)
   !important}` at runtime, which reaches every `<button>` on the page — so a
   `.pb-tab` rule with three classes still loses and the folder tab renders as a
   rounded rectangle floating above the strip instead of joining it.
   reference_runtime_button_radius_beats_classes records the same fight, and the
   fix that works is the one already used for this popup's overlay: an **ID**
   selector, which outranks the injected rule. `#mhPbOv` is the piece popup's
   overlay id (nothing in JS looks it up — it exists for exactly this).
   ⚠️ `!important` is required as well: the injected rule carries one, and
   specificity alone does not beat `!important`. */
#mhPbOv .pb-tab { border-radius: 9px 9px 0 0 !important; }

.pb-scope .pb-tab:focus-visible { box-shadow: 0 0 0 2px rgba(16, 185, 129, .35); }

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

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

/* ⚠️ THE DOT HAS NO COUNTERPART AND KEEPS ITS OWN MEANING. The deliverable's
   tab badge counts things ("3", "$4k/yr"); this dot means "there is something
   on this tab that will STOP THE SAVE" (tabProblem). Recolouring it green to
   match the badge would make a refusal look like a tally. */
.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 body ── source: .ep-deliv-modal-body / -section ─────────────────────
   🚫 NO SECTION RULES. `.cb-sec` carried a bottom border because six numbered
   sections shared one scrolling column; three sections on the widest tab do
   not need dividing. The deliverable popup separates with space alone. */
.pb-scope .cb-body {
  padding: 16px 18px;
}

.pb-scope .cb-sec {
  padding: 0;
  border-bottom: 0;
  margin-bottom: 18px;
}

.pb-scope .cb-sec:last-child { margin-bottom: 0; }

/* source: .ep-deliv-modal-section-head — 11px uppercase, green mark. */
.pb-scope .cb-sec-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #475569;
}

.pb-scope .cb-sec-h svg { color: #10b981; }

.pb-scope .cb-sec-opt {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  color: #0f766e;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Fields ── source: .ep-deliv-modal-field / -lbl / -row ───────────────────
   ⚠️ THE FOCUS RING IS EMERALD, NOT INDIGO, and it is the one change people
   actually feel. `.cb-input:focus` is indigo everywhere else in the campaign
   builder; leaving it would put a purple ring inside a green popup on every
   single keystroke. */
.pb-scope .cb-field { margin-bottom: 12px; }

.pb-scope .cb-lblrow { margin-bottom: 4px; min-height: 18px; }

.pb-scope .cb-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

.pb-scope .cb-input,
.pb-scope .cb-textarea,
.pb-scope .cb-select {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
}

.pb-scope .cb-input:focus,
.pb-scope .cb-textarea:focus,
.pb-scope .cb-select:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

.pb-scope .cb-row { gap: 10px; }

/* 🚨 THE PILL-DEFEAT BLOCK PINS THESE AT 10px, SO THE PORT HAS TO SAY 8px AT
   THE SAME WEIGHT. marketing-hub-piece-builder.css ends with a run of
   `#mhPbOv .cb-input { border-radius: 10px !important }` rules that exist to
   beat the runtime theme capsule (see its header). They are `#id .class` +
   `!important`, so every plain `.pb-scope` rule above loses to them — measured
   10px where the deliverable popup is 8px.

   ⚠️ THIS IS A RESTATEMENT, NOT A SECOND OPINION. The pill-defeat block's job
   is "not a capsule"; 8px satisfies that as completely as 10px did, and the
   value now comes from the popup being ported instead of from a round number.
   ⚠️ THE TRIGGERS COME WITH THEM. `.pb-trig` / `.pb-sel-trig` are this form's
   dropdowns — they stand in for the `<select>` the deliverable popup styles at
   8px, and leaving them at 10px puts a visibly rounder box beside every input
   in the same row. */
#mhPbOv .cb-input,
#mhPbOv .cb-textarea,
#mhPbOv .cb-select,
#mhPbOv .pb-trig,
#mhPbOv .pb-sel-trig,
#mhPbOv .cb-btn { border-radius: 8px !important; }

/* ── The foot ── source: .ep-deliv-modal-foot + .ep-deliv-btn--primary ───────
   The primary is the emerald gradient, not the indigo pill: it is the one
   control that has to read as "this is the button" and the only one people
   look for by colour. */
.pb-scope .cb-foot {
  padding: 12px 18px;
  border-top: 1px solid #f1f5f9;
  background: #fafafa;
}

.pb-scope .cb-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.pb-scope .cb-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }

.pb-scope .cb-btn.is-primary {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: #fff;
}

.pb-scope .cb-btn.is-primary:hover {
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  opacity: 1;
}

.pb-scope .cb-btn.is-danger {
  background: #fff;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.pb-scope .cb-btn.is-danger:hover { background: #fef2f2; border-color: #f87171; color: #dc2626; }

@media (max-width: 620px) {
.cb-overlay.pb-scope { padding: 10px; }

.pb-scope .cb-body { padding: 14px; }

.pb-scope .pb-tabs { padding: 8px 10px 0; }

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

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