/* PORTED VERBATIM from vo-app-marketing-hub/apps/Marketing-Hub/marketing-hub-campaign-builder.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-campaign-builder.css — the coded-UI campaign popup.

   Matches the Work app's builder skin (same rhythm, same 11–12.5px type ramp,
   same 9–11px radii) rather than inventing a Marketing look, because Tyler's
   instruction was literally "look at how we create this stuff in work.html".
   The coded <select> and date controls are wk-form-controls.css — vendored, not
   restyled here, or the two apps drift.
   ══════════════════════════════════════════════════════════════════════════ */

.cb-overlay {
  position: fixed; inset: 0; z-index: 1000000;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}

.cb-card {
  background: #fff; border-radius: 16px; width: 100%; max-width: 700px;
  /* min-height:0 on the flex child is what stops the body growing past the
     viewport and pushing the footer off screen. */
  max-height: min(92vh, 900px); display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .3); overflow: hidden;
  font-family: var(--f, system-ui, -apple-system, sans-serif);
}

/* ── head ─────────────────────────────────────────────────────────────── */
.cb-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 22px 14px; border-bottom: 1px solid #eef0f4;
  background: linear-gradient(180deg, #fbfbff, #fff);
}

.cb-headtxt { flex: 1; min-width: 0; }

.cb-title { font-size: 17px; font-weight: 800; color: #161616; letter-spacing: -.3px; }

.cb-sub { font-size: 11.5px; color: #8d8d8d; margin-top: 3px; line-height: 1.45; }

.cb-sub strong { color: #4f46e5; font-weight: 700; }

.cb-headact { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.cb-x { border: 0; background: none; padding: 5px; border-radius: 7px; cursor: pointer; color: #8d8d8d; line-height: 0; }

.cb-x:hover { background: #f3f4f6; color: #161616; }

/* ── body ─────────────────────────────────────────────────────────────── */
.cb-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 18px; scrollbar-width: thin; }

.cb-sec { padding: 16px 0; border-bottom: 1px solid #f3f4f6; }

.cb-sec:last-child { border-bottom: 0; }

.cb-sec-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: #8d8d8d; margin-bottom: 12px;
}

.cb-sec-n {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  background: #eef2ff; color: #4f46e5; font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; letter-spacing: 0;
}

.cb-field { margin-bottom: 13px; }

.cb-field:last-child { margin-bottom: 0; }

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

.cb-lblrow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; min-height: 20px; }

.cb-lbl { font-size: 11px; font-weight: 700; color: #525252; flex: 1; }

.cb-input, .cb-textarea, .cb-select {
  width: 100%; border: 1px solid #e5e7eb; border-radius: 9px;
  padding: 9px 11px; font-size: 12.5px; font-family: inherit; color: #161616;
  background: #fff; outline: 0; transition: border-color .12s, box-shadow .12s;
}

.cb-textarea { resize: vertical; min-height: 62px; line-height: 1.5; }

.cb-input:focus, .cb-textarea:focus, .cb-select:focus {
  border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

.cb-input::placeholder, .cb-textarea::placeholder { color: #c6c6c6; }

.cb-money { position: relative; display: flex; align-items: center; }

.cb-money > span {
  position: absolute; left: 11px; font-size: 12.5px; font-weight: 700; color: #8d8d8d; pointer-events: none;
}

.cb-money .cb-input { padding-left: 24px; }

.cb-slrow { display: flex; gap: 8px; align-items: stretch; }

.cb-slrow > *:first-child { flex: 1; min-width: 0; }

.cb-mini {
  flex: 0 0 auto; border: 1px dashed #d5d9e0; background: #fff; border-radius: 9px;
  padding: 0 12px; font-size: 11px; font-weight: 700; color: #525252; cursor: pointer; font-family: inherit;
}

.cb-mini:hover { border-color: #6366f1; color: #4f46e5; background: #fafaff; }

.cb-note { font-size: 10.5px; color: #8d8d8d; line-height: 1.5; margin-top: 6px; }

.cb-note strong { color: #525252; font-weight: 700; }

/* ── link rows: the connection, never a text box ──────────────────────── */
.cb-link {
  display: flex; align-items: stretch; gap: 0; width: 100%;
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}

.cb-link:hover { border-color: #c7d2fe; }

.cb-link.is-empty {
  border-style: dashed; border-color: #d5d9e0; cursor: pointer;
  align-items: center; gap: 10px; padding: 10px 12px; text-align: left; font-family: inherit;
}

.cb-link.is-empty:hover { border-color: #6366f1; background: #fafaff; }

.cb-link.is-loading { opacity: .6; pointer-events: none; }

.cb-link-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  border: 0; background: none; padding: 10px 12px; cursor: pointer; text-align: left; font-family: inherit;
}

.cb-link-main:hover { background: #fafaff; }

.cb-link-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  background: #f3f4f6; color: #8d8d8d; display: flex; align-items: center; justify-content: center;
}

.cb-link-ic.is-on { background: #eef2ff; color: #6366f1; }

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

.cb-link-name { font-size: 12.5px; font-weight: 700; color: #161616; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cb-link-sub, .cb-link-ph { font-size: 11px; color: #8d8d8d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cb-link-cta { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #6366f1; text-transform: uppercase; letter-spacing: .3px; }

.cb-link-x {
  flex: 0 0 auto; border: 0; border-left: 1px solid #f3f4f6; background: none;
  padding: 0 11px; cursor: pointer; color: #c6c6c6; line-height: 0;
}

.cb-link-x:hover { background: #fef2f2; color: #dc2626; }

/* ── chips ────────────────────────────────────────────────────────────── */
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.cb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #e5e7eb; background: #fff; border-radius: 999px;
  padding: 5px 10px; font-size: 11px; font-weight: 700; color: #525252;
  font-family: inherit; cursor: default; line-height: 1.3;
}

.cb-chip.is-link { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; padding-right: 4px; }

.cb-chip.is-link svg { flex: 0 0 auto; }

.cb-chip-n {
  font-size: 9.5px; font-weight: 800; background: rgba(67, 56, 202, .12);
  border-radius: 999px; padding: 1px 6px;
}

.cb-chip-x {
  border: 0; background: none; padding: 3px; border-radius: 50%; cursor: pointer;
  color: #6366f1; line-height: 0; display: flex;
}

.cb-chip-x:hover { background: rgba(67, 56, 202, .14); }

.cb-chip-tog { cursor: pointer; transition: all .12s; }

.cb-chip-tog:hover { border-color: #c7d2fe; color: #4f46e5; }

.cb-chip-tog.is-on { background: #6366f1; border-color: #6366f1; color: #fff; }

.cb-chip-add {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px dashed #d5d9e0; background: #fff; border-radius: 999px;
  padding: 5px 11px; font-size: 11px; font-weight: 700; color: #525252;
  cursor: pointer; font-family: inherit; line-height: 1.3;
}

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

/* ── the plan: one row per piece ──────────────────────────────────────── */
.cb-plan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }

.cb-plan-empty {
  border: 1px dashed #e5e7eb; border-radius: 10px; padding: 14px;
  font-size: 11.5px; color: var(--ink2, #525252); line-height: 1.55; background: #fbfbfc;
}

.cb-plan-empty em { color: #4f46e5; font-style: normal; font-weight: 700; }

.cb-piece {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #eef0f4; border-radius: 10px; padding: 7px 9px; background: #fff;
}

.cb-piece:hover { border-color: #c7d2fe; }

/* ── THE NUMBER IS THE DRAG GRIP ───────────────────────────────────
   A plan is a running order, so the rows have to be movable — and the row is
   full of live inputs, so the drag has to start from ONE place. The number is
   that place: it already means "position", and it becomes a grip on hover,
   which is what says so without adding a seventh control to the row.
   ⚠️ THE TWO FACES ARE STACKED, NOT SWAPPED BY WIDTH. Both children are
   absolutely positioned over the same 17px circle, so the row's layout cannot
   shift by a pixel when the grip appears. See campaign-builder.js's
   movePlanRow(). */
.cb-piece-n {
  position: relative;
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; background: #f3f4f6;
  color: #8d8d8d; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  /* !important, because marketing-hub.css line 40 wins over every button
     cursor in the estate (`a, button, [role="button"] { cursor: pointer
     !important }`) — measured: this read `pointer` until it was matched. */
  border: 0; padding: 0; font-family: inherit; cursor: grab !important;
  transition: background .12s, color .12s;
}

.cb-piece-n:active { cursor: grabbing !important; }

.cb-piece-nn, .cb-piece-g {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  line-height: 0; transition: opacity .12s;
}

.cb-piece-g { opacity: 0; }

.cb-piece:hover .cb-piece-n, .cb-piece-n:focus-visible { background: #e0e7ff; color: #4f46e5; }

.cb-piece:hover .cb-piece-nn, .cb-piece-n:focus-visible .cb-piece-nn { opacity: 0; }

.cb-piece:hover .cb-piece-g, .cb-piece-n:focus-visible .cb-piece-g { opacity: 1; }

.cb-piece-n:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }

/* Where it will land. An inset shadow rather than a border, because a border
   would change the row's height and push every row below it by 3px. */
.cb-piece.is-dragging { opacity: .45; border-color: #6366f1; }

.cb-piece.is-drop-before { box-shadow: inset 0 3px 0 -1px #6366f1; }

.cb-piece.is-drop-after { box-shadow: inset 0 -3px 0 -1px #6366f1; }

.cb-piece-kind {
  flex: 0 0 auto; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  color: var(--_pk, #6366f1); background: color-mix(in srgb, var(--_pk, #6366f1) 12%, #fff);
  border-radius: 5px; padding: 3px 6px; min-width: 62px; text-align: center;
}

.cb-piece-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }

.cb-piece-name {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: 12px; font-family: inherit; color: #161616; padding: 4px 2px;
  border-bottom: 1px solid transparent;
}

.cb-piece-name:focus { border-bottom-color: #6366f1; }

.cb-piece-name::placeholder { color: #c6c6c6; }

.cb-piece-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  border: 1px dashed #d5d9e0; border-radius: 7px; background: #fff;
  padding: 5px 8px; font-size: 11.5px; font-weight: 600; color: #ea580c;
  cursor: pointer; font-family: inherit; text-align: left;
}

.cb-piece-link:hover { border-color: #ea580c; background: #fff7ed; }

.cb-piece-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cb-piece-net, .cb-piece-date {
  flex: 0 0 auto; border: 1px solid #eef0f4; border-radius: 7px;
  padding: 4px 7px; font-size: 11px; font-family: inherit; color: var(--ink2, #525252); background: #fff;
}

.cb-piece-date { width: 128px; }

.cb-piece-x {
  flex: 0 0 auto; border: 0; background: none; padding: 4px; border-radius: 5px;
  cursor: pointer; color: #c6c6c6; line-height: 0;
}

.cb-piece-x:hover { background: #fef2f2; color: #dc2626; }

.cb-plan-add { display: flex; flex-wrap: wrap; gap: 6px; }

/* Derived channels read as FACTS, not controls — no hover, no cursor. */
.cb-chip.is-derived {
  border-color: #c7d2fe; background: #eef2ff; color: #4338ca; cursor: default;
}

.cb-chan-none { margin-top: 0; }

/* ── a locked kind: on the list, wearing a padlock, still pressable ─────────
   Tyler, 2026-08-21: "lock all the other options … don't delete the other
   options". So it dims and it KEEPS its cursor — a chip with `cursor:default`
   reads as decoration, and this one answers when you press it. */
.cb-chip-add.is-locked { border-style: solid; border-color: #eef0f4; color: #a3a3a3; background: #fafafa; }

.cb-chip-add.is-locked:hover { border-color: #d5d9e0; color: #737373; background: #f6f6f7; }

.cb-chip-add.is-locked svg { opacity: .8; }

.cb-piece.is-locked { background: #fcfcfd; }

.cb-piece.is-locked .cb-piece-kind { display: inline-flex; align-items: center; gap: 3px; justify-content: center; }

/* ══ 🚨 THE CODED DATE WAS EATING THE NAME BOX ═══════════════════════════════
   Measured on a real plan row at 1400px: `.cb-piece-mid` was **4px wide** and
   the coded date button was **670px**. The name was sitting in the input's
   `value` and nowhere on screen — which is exactly why the row read as "a kind
   and a date" and nothing else.

   wk-form-controls turns `input[type=date]` into `type=hidden` and inserts a
   `<button class="wk-cd-btn">` beside it. That button carries `width:100%`, and
   as a flex item in `.cb-piece` it takes every spare pixel; `.cb-piece-mid` is
   `flex:1;min-width:0`, so it collapses rather than fighting back. Neither
   `.cb-piece-date{width:128px}` nor a flex-basis reaches the button: the class
   is on the hidden input, and the upgrade copies only INLINE width/min/max onto
   the button it makes.
   ⚠️ SO THE ROW CONSTRAINS IT BY POSITION, and so does every other coded control
   that lands in one of these flex rows. Add a rule here for any new one, or it
   will do the same thing again. */
.cb-piece > .wk-cd-btn {
  flex: 0 0 auto; width: 152px; min-height: 30px; padding: 0 9px; font-size: 11.5px;
}

/* 🚫 THE SAME RULE FOR `.wk-cs-btn` CANNOT LIVE HERE, and writing one is how this
   gets quietly half-fixed. mrg-crm's porter drops any rule naming a class crm.css
   mentions, and crm.css mentions `.wk-cs-btn` in one id-scoped override — so a
   `.cb-budg-row > .wk-cs-btn` rule lands on VisionOne and is DELETED on MRG.
   (Measured: 773px there against 232px here, name box 4px.) The coded selects in
   these rows therefore carry an INLINE width on the <select>, which is the seam
   wk-form-controls provides for exactly this — upgradeSelect copies inline
   width/min-width/max-width onto the button it builds. See marketing-hub-
   campaign-builder.js, `cb-piece-net` and `cb-budg-piece`. */

/* ── the money against one plan row. Read-only here; set on Financials. ───── */
.cb-piece-amt {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 800; color: #15803d;
  background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 6px; padding: 3px 6px;
}

/* ── THE SLOT: which real piece is filling this plan row ─────────────────────
   The row is the plan; the slot is the record in it. Three states — empty (one
   dashed button), filled (state pill + Send + unlink), sent (pill, no Send). */
.cb-slot { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }

.cb-slot.is-quiet { font-size: 10px; color: #c6c6c6; padding: 0 4px; }

.cb-slot-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  border: 1px dashed #d5d9e0; background: #fff; border-radius: 7px;
  padding: 4px 8px; font-size: 10.5px; font-weight: 800; color: #525252;
  cursor: pointer; font-family: inherit; line-height: 1.3; white-space: nowrap;
}

.cb-slot-btn:hover { border-color: #6366f1; color: #4f46e5; background: #fafaff; }

.cb-slot-btn.is-send { border-style: solid; border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }

.cb-slot-btn.is-send:hover { border-color: #6366f1; background: #e0e7ff; }

/* Locked, not dead — same rule as the kind chip above. */
.cb-slot-btn.is-send.is-locked { border-color: #eef0f4; background: #fafafa; color: #a3a3a3; }

.cb-slot-btn.is-send.is-locked:hover { border-color: #d5d9e0; color: #737373; background: #f6f6f7; }

.cb-slot-pill {
  flex: 0 0 auto; border: 0; font-family: inherit; cursor: pointer;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  border-radius: 5px; padding: 4px 7px; white-space: nowrap;
  color: var(--_ps, #8d8d8d); background: color-mix(in srgb, var(--_ps, #8d8d8d) 13%, #fff);
}

.cb-slot-pill:hover { background: color-mix(in srgb, var(--_ps, #8d8d8d) 22%, #fff); }

.cb-slot-x {
  flex: 0 0 auto; border: 0; background: none; padding: 3px; border-radius: 5px;
  cursor: pointer; color: #d4d4d4; line-height: 0;
}

.cb-slot-x:hover { background: #f5f5f5; color: #737373; }

/* ── the budget: lines, and the three numbers they add up to ──────────────── */
.cb-budg-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }

.cb-budg-cell {
  border: 1px solid #eef0f4; border-radius: 10px; padding: 10px 12px; background: #fbfbfc;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}

.cb-budg-cell > span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #8d8d8d; }

.cb-budg-cell > strong { font-size: 19px; font-weight: 800; color: #161616; letter-spacing: -.02em; }

.cb-budg-cell > i { font-size: 10px; font-style: normal; color: #a3a3a3; }

.cb-budg-cell.is-over { border-color: #fecaca; background: #fef2f2; }

.cb-budg-cell.is-over > strong { color: #dc2626; }

.cb-budg-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }

.cb-budg-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #eef0f4; border-radius: 10px; padding: 7px 9px; background: #fff;
}

.cb-budg-row:hover { border-color: #c7d2fe; }

.cb-budg-name {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: 12px; font-family: inherit; color: #161616; padding: 4px 2px;
  border-bottom: 1px solid transparent;
}

.cb-budg-name:focus { border-bottom-color: #6366f1; }

.cb-budg-name::placeholder { color: #c6c6c6; }

.cb-budg-piece {
  flex: 0 0 auto; max-width: 230px; border: 1px solid #eef0f4; border-radius: 7px;
  padding: 4px 7px; font-size: 11px; font-family: inherit; color: var(--ink2, #525252); background: #fff;
}

.cb-budg-amt { flex: 0 0 auto; width: 116px; }

.cb-budg-amt .cb-input { padding: 6px 9px 6px 22px; font-size: 12px; }

@media (max-width: 640px) {
.cb-piece { flex-wrap: wrap; }

.cb-piece-mid { flex-basis: 100%; order: 3; }

.cb-piece-date { width: auto; flex: 1; }

.cb-budg-tot { grid-template-columns: 1fr; }

.cb-budg-row { flex-wrap: wrap; }

.cb-budg-name { flex-basis: 100%; order: 1; }

.cb-budg-piece { max-width: none; flex: 1; order: 2; }
}

/* ── segmented run mode ───────────────────────────────────────────────── */
.cb-seg { display: flex; gap: 0; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #f8f9fa; }

.cb-seg-b {
  flex: 1; border: 0; background: none; padding: 9px 8px;
  font-size: 11.5px; font-weight: 700; color: #525252; cursor: pointer; font-family: inherit;
  border-right: 1px solid #e5e7eb; transition: background .12s, color .12s;
}

.cb-seg-b:last-child { border-right: 0; }

.cb-seg-b:hover { background: #eef2ff; color: #4f46e5; }

.cb-seg-b.is-on { background: #6366f1; color: #fff; }

.cb-seg-b.is-on:hover { background: #6366f1; color: #fff; }

/* ── toggle ───────────────────────────────────────────────────────────── */
.cb-toggle {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
  padding: 11px 12px; cursor: pointer; font-family: inherit; transition: all .12s;
}

.cb-toggle:hover { border-color: #c7d2fe; }

.cb-toggle.is-on { border-color: #c7d2fe; background: #fafaff; }

.cb-toggle-sw {
  flex: 0 0 auto; width: 32px; height: 18px; border-radius: 999px;
  background: #d5d9e0; position: relative; transition: background .15s; margin-top: 1px;
}

.cb-toggle-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .15s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
}

.cb-toggle.is-on .cb-toggle-sw { background: #6366f1; }

.cb-toggle.is-on .cb-toggle-sw::after { transform: translateX(14px); }

.cb-toggle-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.cb-toggle-t { font-size: 12px; font-weight: 700; color: #161616; }

.cb-toggle-d { font-size: 10.5px; color: #8d8d8d; line-height: 1.45; }

/* ── foot ─────────────────────────────────────────────────────────────── */
.cb-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-top: 1px solid #eef0f4; background: #fbfbfc;
}

.cb-btn {
  border: 1px solid #e5e7eb; background: #fff; border-radius: 9px;
  padding: 9px 16px; font-size: 12px; font-weight: 700; color: #161616;
  cursor: pointer; font-family: inherit; transition: all .12s;
}

.cb-btn:hover { border-color: #6366f1; color: #4f46e5; }

.cb-btn:disabled { opacity: .6; cursor: default; }

.cb-btn.is-primary { background: #6366f1; border-color: #6366f1; color: #fff; }

.cb-btn.is-primary:hover { opacity: .9; color: #fff; }

.cb-btn.is-danger { color: #dc2626; border-color: #fecaca; }

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

/* The shared AI chrome sits on label rows that already own their spacing. */
.cb-lblrow .wk-aifill-field { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   AI BUTTON SIZE — restoring the size wk-ai-fill.js ALREADY INTENDED.

   Tyler, 2026-08-07: "the Draft with AI button and all the AI buttons are way
   too big. You need to match the style that we had before."

   Measured: 16px/400 here, against the 12.5px/600 and 10.5px/600 the shared
   file asks for. Two things multiply:

   1. wk-ai-fill.js writes `font:600 12.5px/1 inherit`. That is an INVALID
      `font` shorthand — `inherit` is not a legal font-family component inside
      it — so the browser discards the WHOLE declaration, size and weight with
      it. The bug is in the shared file and it is silent everywhere.
   2. In the Work app the fallback is the UA's ~13.3px button font, so the bug
      is nearly invisible. This app's `marketing-hub.css` line 39 sets
      `button { font-size: inherit }`, so the fallback is the body's **16px** —
      about 28% too big, which is exactly what got noticed.

   Fixed HERE rather than in the vendored file, so apps/Work/wk-ai-fill.js stays
   byte-identical to upstream and re-portable (feedback_ported_file_features_go_
   upstream). `.wk-aifill-*` (0,1,0) outranks `button` (0,0,1), so order does not
   matter. ⚠️ The shorthand should still be fixed upstream in vo-app-work — do
   that and these two rules become harmless no-ops, not a conflict.
   ══════════════════════════════════════════════════════════════════════════ */
.wk-aifill-top   { font-size: 12.5px; font-weight: 600; line-height: 1; }

.wk-aifill-field { font-size: 10.5px; font-weight: 600; line-height: 1; }

@media (max-width: 640px) {
.cb-overlay { padding: 0; }

.cb-card { max-width: 100%; max-height: 100vh; border-radius: 0; }

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

.cb-seg { flex-direction: column; }

.cb-seg-b { border-right: 0; border-bottom: 1px solid #e5e7eb; }

.cb-seg-b:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STEP 1 — WHERE THIS LIVES, AND THE GATE OVER EVERYTHING BELOW IT
   ══════════════════════════════════════════════════════════════════════════
   Tyler, 2026-08-11: *"Selecting that work stream has to be one of the first
   things you do, and then it opens up the rest."* So step 1 is visually the
   heaviest thing on the form and the rest is quiet until it is answered. */

/* 🚨 CHROME IS WORK'S BLUE, NOT MARKETING'S VIOLET. Tyler, 2026-08-12:
   *"Those are work streams, same colors and everything."* Every colour in this
   popup that is not the kind's own chip now comes from Work's `--c-blue`
   (#3b82f6 / #eff6ff / #1d4ed8) — the palette `.gp-tab.is-active` and
   `#projectDetailOverlay` wear. The ONLY violet left is the kind mark
   (`.cb-kind` / `.cb-tb-kind` / `.cb-kindonly` / `.cb-tab-kind`), which is fed
   by STREAM_KINDS' `accent` and is the one thing that says this is a campaign.
   ⚠️ So: a violet you add here has to be a kind mark or it is a regression. */
.cb-sec--where {
  background: linear-gradient(180deg, #f7fbff, #fff);
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 4px;
}

.cb-req {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #1d4ed8; background: #eff6ff; border-radius: 4px;
  padding: 2px 7px; margin-left: 8px;
}

.cb-note--lead { font-size: 11.5px; color: #6b7280; margin: 0 0 12px; }

/* The kind's own contribution, marked. The sections WITHOUT this chip are the
   base every work stream in every department has; the ones with it are what
   "campaign" adds. That line is the whole model, so it is drawn. */
.cb-kindonly {
  margin-left: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #7c3aed; background: #f5f1fe; border: 1px solid #e9defc;
  border-radius: 4px; padding: 2px 7px;
}

.cb-sec--kind .cb-sec-h { display: flex; align-items: center; }

.cb-kind {
  display: inline-block;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--_k, #7c3aed);
  background: color-mix(in srgb, var(--_k, #7c3aed) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--_k, #7c3aed) 24%, #fff);
  border-radius: 4px; padding: 1px 6px;
}

/* The create field. One row, so naming a stream and making it is one gesture. */
.cb-newstream { margin-top: 8px; }

.cb-newstream[disabled] { opacity: .5; cursor: not-allowed; }

.cb-newrow { display: flex; gap: 8px; margin-top: 8px; align-items: center; }

.cb-newrow .cb-input { flex: 1 1 auto; min-width: 0; }

.cb-newrow .cb-mini { flex: 0 0 auto; white-space: nowrap; }

/* ── THE GATE ────────────────────────────────────────────────────────────
   🚫 NOT `disabled` ON THIRTY INPUTS. A form of greyed-out controls reads as
   broken rather than as sequenced, and it also loses the AI draft button, the
   pickers and the tab order in one go. One dimmed inert block with one
   sentence instead — and `pointer-events:none` on the sections, so nothing
   below can be clicked while it is up.
   ⚠️ THE GATE IS A HINT, NOT THE ENFORCEMENT. save() checks the stream itself:
   Enter in a text field and the AI draft path both reach Save without a click
   ever landing here. */
/* 🚩 THIS USED TO BE `.cb-body.is-gated > .cb-sec`. The sections are wrapped in
   `.cb-pane` now that the popup is tabbed, so the old child selector matched
   NOTHING and the gate was cosmetic-only for one commit. The live rules are at
   the bottom of this file, under the work-stream shell. Kept as one line so a
   flat-section layout still gates if the panes are ever unwound. */
.cb-body.is-gated > .cb-sec { opacity: .38; pointer-events: none; user-select: none; filter: saturate(.4); }

.cb-gate {
  margin: 10px 0 2px;
  border: 1px dashed #c7dcfa;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px 14px;
}

.cb-gate-txt { font-size: 11.5px; color: #1d4ed8; font-weight: 600; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
.cb-body.is-gated > .cb-sec { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CREATE POPUP **IS** THE WORK STREAM POPUP
   ══════════════════════════════════════════════════════════════════════════
   Tyler, 2026-08-11: *"if you made the campaign match the work stream and just
   be a different kind, I expect the creation process to be like the creation
   pop-up to be exactly like a work stream, just obviously with the unique
   things that the campaign has."*

   Same shell the campaign PROFILE wears (`.mc-cp-*` in marketing-hub-campaigns.css),
   which is `#projectDetailOverlay`'s in vo-app-work: 1240 / 96vw wide, 92vh /
   1040 tall, 20px radius, the same two-layer shadow, a 16px/24px topbar with a
   38px icon, and a tab bar over a scrolling body.

   🚨 EVERYTHING HANGS OFF `--ws`, AND IT HAS TO. `.cb-overlay` / `.cb-card` are
   SHARED — marketing-hub-piece-builder.css styles `.pb-scope .cb-card` and its
   New-group sheet builds a bare `.cb-overlay` of its own. Restyling the plain
   classes here would silently turn the piece builder into a 1240px popup too.
   ⚠️ So do NOT "simplify" these selectors by dropping the modifier.
   ══════════════════════════════════════════════════════════════════════════ */

.cb-overlay--ws { padding: 0; }

.cb-card--ws {
  /* 🚨 1240 WAS THE ONE-COLUMN WIDTH AND THE POPUP HAS TWO COLUMNS NOW.
     Tyler, 2026-08-12: *"Make it wider … it should be the exact same."* The
     form was tuned to 1240; the rail is the same 340 the piece popup and
     Work's own `.pdp-overview-side` use. Squeezing the rail out of the
     existing width would have shrunk the form to pay for it. */
  width: 1580px; max-width: 96vw;
  height: 92vh; max-height: 1040px;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
}

/* ── topbar ─────────────────────────────────────────────────────────────── */
.cb-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0; background: #fff;
}

/* 🚨 WORK'S TEAL BULLSEYE. THIS USED TO BE A VIOLET MEGAPHONE.
   Tyler, 2026-08-12, choosing the full work-stream palette: the icon is the
   loudest thing in the topbar, and a different icon in a different colour is
   what made the popup read as a marketing object rather than a work stream.
   The gradient and the glyph are both `#gdHeaderIcon`'s, byte for byte, from
   vo-app-work `apps/Work/Work.html`. The CAMPAIGN chip one line below is what
   says which kind it is — that is the mark, not the icon. */
.cb-tb-icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #059669, #0d9488);
  display: flex; align-items: center; justify-content: center;
}

.cb-tb-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 52vw; }

.cb-tb-title {
  font-size: 16px; font-weight: 800; color: #111; line-height: 1.25;
  outline: none; border-radius: 6px; padding: 1px 4px; margin-left: -4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cb-tb-title:hover { background: #f6f7f9; }

.cb-tb-title:focus { background: #eff6ff; box-shadow: 0 0 0 2px #bfdbfe; }

/* The placeholder for a contenteditable — `:empty` is the only hook, and it
   only holds while the node has NO child nodes at all, which is why the title
   is written with textContent and never innerHTML. */
.cb-tb-title:empty::before {
  content: attr(data-placeholder);
  color: #b6bcc6; font-weight: 600;
}

/* 🚨 THE EYEBROW NAMES THE OBJECT; THE CHIP NAMES THE KIND.
   It used to read "CAMPAIGN · NEW" — the layer, standing where Work writes
   "Work Stream details". Same two facts the stream card carries, same order. */
/* ⚠️ THE TYPE IS `.gp-topbar-subtitle`'S, NOT AN EYEBROW'S. Work writes
   "Work Stream details" here at 11px/500/#9ca3af, plain case. This was 700,
   #64748b, uppercase and letterspaced — louder than the line it is copying,
   which is exactly the kind of difference "look exactly like a work stream"
   is about. The chips keep their own weight; the words do not. */
.cb-tb-sub {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 500; color: #9ca3af; line-height: 1.2;
}

.cb-tb-kind {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(124,58,237,.11); color: #7c3aed;
}

.cb-tb-new {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 6px;
  background: #f1f5f9; color: #64748b;
}

.cb-tb-status {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 12px; border-radius: 10px; flex-shrink: 0;
  background: #f1f5f9; color: #475569;
}

.cb-tb-status--active   { background: #defbe6; color: #198038; }

.cb-tb-status--complete { background: #defbe6; color: #198038; }

.cb-tb-status--behind   { background: #fff1f1; color: #da1e28; }

.cb-tb-status--planning { background: #f1f5f9; color: #475569; }

/* ── tab bar ────────────────────────────────────────────────────────────── */
.cb-tabs {
  display: flex; gap: 4px; padding: 10px 24px;
  background: #f9fafb; border-bottom: 1px solid #f3f4f6; flex-shrink: 0;
}

.cb-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px; border: none;
  background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #9ca3af; transition: all .2s ease;
}

.cb-tab:hover { color: #374151; background: rgba(255,255,255,.6); }

/* 🚨 A WORK TAB HAS A GLYPH. Every `.gp-tab` in `#projectDetailOverlay` is
   icon + word; these four were words alone, which is why the bar read as a
   segmented control and Work's reads as a tab strip. Same 16px, same
   currentColor stroke, so the icon takes the active blue with the label. */
.cb-tab svg {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Work's blue, and Work's exact shadow pair — `.gp-tab.is-active`. */
.cb-tab.is-active {
  color: #3b82f6; background: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(59,130,246,.12);
}

/* ⚠️ SHUT, NOT HIDDEN. A tab that vanishes until you satisfy step 1 makes the
   popup change shape under you; a dimmed one that says why when pressed teaches
   the sequence instead. */
.cb-tab.is-off { opacity: .38; cursor: not-allowed; }

.cb-tab.is-off:hover { background: transparent; color: #9ca3af; }

/* The kind's mark on the tabs the Campaign layer adds. Overview and Money are
   the base every work stream in every department has. */
.cb-tab-kind { color: #a855f7; font-size: 8px; line-height: 1; }

/* ── panes ──────────────────────────────────────────────────────────────── */
.cb-card--ws .cb-body { padding: 4px 24px 20px; }

.cb-pane { display: none; }

.cb-pane.is-active { display: block; }

/* ── footer, Work's shape: the hint on the left ─────────────────────────── */
.cb-foot-hint {
  flex: 1; font-size: 12.5px; color: #dc2626; font-weight: 600;
  padding-right: 12px; line-height: 1.4;
}

/* The primary stays PRESSABLE while incomplete — save() answers with the same
   sentence the hint shows. A dead button gives no reason. */
.cb-btn.is-primary.is-waiting { opacity: .55; }

/* 🚨 `.gp-footer-btn--primary`'S BLUE, AND SCOPED TO `--ws` BECAUSE IT HAS TO BE.
   Bare `.cb-btn.is-primary` is #6366f1 indigo and it is ALSO the piece builder's
   button — `marketing-hub-piece-builder.css` styles `.pb-scope .cb-card`, and the
   New-group sheet builds a bare `.cb-overlay`. Re-tinting the plain class here
   would silently repaint two other popups Tyler did not ask about.
   Work: #3b82f6, hover #2563eb with the lift and the blue shadow. */
.cb-card--ws .cb-btn.is-primary {
  background: #3b82f6; border-color: #3b82f6; color: #fff;
}

.cb-card--ws .cb-btn.is-primary:hover {
  background: #2563eb; border-color: #2563eb; color: #fff; opacity: 1;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .3);
}

/* The secondary's hover borrowed the same indigo. */
.cb-card--ws .cb-btn:not(.is-primary):not(.is-danger):hover {
  border-color: #3b82f6; color: #2563eb;
}

/* The gate covers the panes now, not a flat list of sections. */
.cb-body.is-gated > .cb-pane > .cb-sec {
  opacity: .38; pointer-events: none; user-select: none; filter: saturate(.4);
}

.cb-body.is-gated > .cb-pane > [data-cb-streamhost] > .cb-sec--where,
.cb-body.is-gated > .cb-pane > .cb-sec--where {
  opacity: 1; pointer-events: auto; filter: none; user-select: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE RIGHT-HAND RAIL — `gd-sb-*`, VENDORED FROM WORK
   ══════════════════════════════════════════════════════════════════════════
   Tyler, 2026-08-12: *"It should literally look the exact same on the right
   side of the project."*

   🚨 THESE ARE WORK'S CLASSES, NOT NEW ONES. Copied from
   vo-app-work/apps/Work/project-detail.css (`.pdp-overview-side` and every
   `.gd-sb-*` under it), exactly as marketing-hub-piece-shell.css already
   copies them for the piece popup. Kept byte-comparable on purpose: if that
   file changes, these two copies are what have to follow it. The ring is 64×64
   with r=30 in both — change one number and a campaign's ring stops being the
   same object as a work stream's.

   ⚠️ SCOPED TO `.cb-card--ws`, AND IT HAS TO BE. `.pb-scope .gd-sb-*` in
   marketing-hub-piece-shell.css is the SAME specificity (0,2,0), so a bare
   `.gd-sb-field` rule here would fight it on load order and re-skin the piece
   popup's rail from a file that has nothing to do with pieces.
   ══════════════════════════════════════════════════════════════════════════ */
.cb-card--ws .cb-split {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
}

/* Each column scrolls on its own — a long Plan tab must never push the facts
   off the screen, which is how Work's own two columns behave. */
.cb-card--ws .cb-split > .cb-body { min-width: 0; min-height: 0; overflow-y: auto; }

.cb-card--ws .cb-rail {
  min-width: 0; min-height: 0; overflow-y: auto;
  padding: 20px 18px;
  border-left: 1px solid #e2e8f0; background: #f8fafc;
}

.cb-card--ws .gd-sb-progress {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; margin-bottom: 18px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
}

.cb-card--ws .gd-sb-ring-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }

.cb-card--ws .gd-sb-ring { width: 64px; height: 64px; transform: rotate(-90deg); }

.cb-card--ws .gd-sb-ring-bg { fill: none; stroke: #e2e8f0; stroke-width: 5; stroke-linecap: round; }

.cb-card--ws .gd-sb-ring-fill {
  fill: none; stroke: #16a34a; stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset .5s ease;
}

.cb-card--ws .gd-sb-ring-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #16a34a;
}

.cb-card--ws .gd-sb-progress-info { flex: 1; min-width: 0; }

.cb-card--ws .gd-sb-progress-label { font-size: 12px; font-weight: 700; color: #161616; display: block; margin-bottom: 2px; }

.cb-card--ws .gd-sb-progress-detail { font-size: 11px; color: #8d8d8d; display: block; }

.cb-card--ws .gd-sb-progress[data-status="good"] .gd-sb-ring-fill { stroke: #16a34a; }

.cb-card--ws .gd-sb-progress[data-status="good"] .gd-sb-ring-pct  { color: #16a34a; }

.cb-card--ws .gd-sb-progress[data-status="ok"]   .gd-sb-ring-fill { stroke: #ca8a04; }

.cb-card--ws .gd-sb-progress[data-status="ok"]   .gd-sb-ring-pct  { color: #ca8a04; }

.cb-card--ws .gd-sb-progress[data-status="bad"]  .gd-sb-ring-fill { stroke: #dc2626; }

.cb-card--ws .gd-sb-progress[data-status="bad"]  .gd-sb-ring-pct  { color: #dc2626; }

.cb-card--ws .gd-sb-progress[data-status="done"] .gd-sb-ring-fill { stroke: #16a34a; }

.cb-card--ws .gd-sb-progress[data-status="done"] .gd-sb-ring-pct  { color: #16a34a; }

.cb-card--ws .gd-sb-section { margin-bottom: 18px; }

.cb-card--ws .gd-sb-heading {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #a3a3a3; padding: 0 4px 8px;
}

.cb-card--ws .gd-sb-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 9px; min-height: 38px;
}

.cb-card--ws .gd-sb-field-label {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; color: #8d8d8d;
}

.cb-card--ws .gd-sb-field-label svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2;
}

.cb-card--ws .gd-sb-field-value {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  font-size: 12.5px; font-weight: 600; color: #161616;
  min-width: 0; text-align: right;
}

.cb-card--ws .gd-sb-field-value--clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cb-card--ws .gd-sb-field-value.is-empty { color: #94a3b8; font-weight: 600; }

.cb-card--ws .gd-sb-field-av {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .02em;
}

.cb-card--ws .gd-sb-field.is-overdue .gd-sb-field-value { color: #dc2626; }

.cb-card--ws .gd-sb-audit {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px; border-radius: 9px; background: #fff; border: 1px solid #e2e8f0;
  font-size: 11.5px; color: #64748b; line-height: 1.45;
}

/* A row that mirrors a control is a shortcut TO it; a row that mirrors a fact
   with no editor stays inert. The CSS reads that straight off the attribute,
   so a row can never advertise a jump the JS does not have. */
.cb-card--ws .gd-sb-field { cursor: default; }

.cb-card--ws .gd-sb-field[data-cb-jump] { cursor: pointer; }

.cb-card--ws .gd-sb-field[data-cb-jump]:hover { background: rgba(59,130,246,.07); }

.cb-card--ws .gd-sb-field[data-cb-jump]::after {
  content: "›"; font-size: 15px; line-height: 1; color: #3b82f6; flex: 0 0 auto;
  opacity: 0; transform: translateX(-3px); transition: opacity .16s ease, transform .16s ease;
}

.cb-card--ws .gd-sb-field[data-cb-jump]:hover::after { opacity: 1; transform: none; }

.cb-rail-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  background: #f1f5f9; color: #475569;
}

.cb-rail-pill--active   { background: #defbe6; color: #198038; }

.cb-rail-pill--complete { background: #defbe6; color: #198038; }

.cb-rail-pill--behind   { background: #fff1f1; color: #da1e28; }

.cb-rail-pill--planning { background: #f1f5f9; color: #475569; }

/* The landing flash. Without it, a jump into a long pane looks like nothing
   happened at all. */
.cb-jump-hit { animation: cbJumpHit 1.1s ease; border-radius: 10px; }

@keyframes cbJumpHit {
  0%, 55% { box-shadow: 0 0 0 2px rgba(124,58,237,.45); background: rgba(124,58,237,.06); }
  100%    { box-shadow: 0 0 0 2px rgba(124,58,237,0); background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
.cb-jump-hit { animation: none; }

.cb-card--ws .gd-sb-ring-fill { transition: none; }
}

@media (max-width: 1180px) {
.cb-card--ws { width: 1240px; }

.cb-card--ws .cb-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }

.cb-card--ws .cb-rail {
    border-left: 0; border-top: 1px solid #e2e8f0;
    max-height: 240px; padding: 14px 18px;
  }
}

@media (max-width: 1000px) {
.cb-card--ws { width: 100vw; max-width: 100vw; height: 100vh; max-height: none; border-radius: 0; }

.cb-tabs { overflow-x: auto; }

.cb-tab { flex: 0 0 auto; }
}