/* PLANNING BOARD NEXT. A copy of planning-board.css that the local sandbox
   loads in its place (with planning-board-next.js). */
/* Planning board (group-less): batches of drafts and live ads, each card with
   its composition, inputs and workflows. Builds on the .pg-* board styles in
   styles.css; ported from the planning-v3 playground. */

.main.planning-main {
  position: relative;
}


.pg-batch-head .pg-batch-add {
  flex: 0 0 auto;
  margin-top: 0;
}

.pg-batch-head .pg-batch-add svg {
  animation: none;
}

.pg-batch-head .pg-batch-settings {
  flex: 0 0 auto;
  margin-top: 0;
}

button.pg-batch-name.is-add {
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.pg-draft-row > .pg-draft-ready {
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

.pg-workflow-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  pointer-events: none;
}

.pg-workflow-icon svg {
  width: 13px;
  height: 13px;
}


.pg-live-thumb {
  flex: 0 0 auto;
  width: 20px;
  height: 34px;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.lin-node .pg-draft-creatives {
  margin-top: 0;
}

.pg-draft-creatives > .draft-row {
  position: relative;
}

.draft-row.is-drop-before::before,
.draft-row.is-drop-after::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent, #5B8DEF);
  pointer-events: none;
}

.draft-row.is-drop-before::before {
  top: -3px;
}

.draft-row.is-drop-after::after {
  bottom: -3px;
}

/* Lineage color on drafts: a hint at rest, full on hover and as a drop
   target. Angles show it stronger. */
.pg-board .pg-draft[style*="--gen-line"]:not(.pg-angle):not(:hover):not(.is-drop):not(.is-selected) {
  border-color: color-mix(in srgb, var(--gen-line) 38%, rgba(255, 255, 255, 0.08));
}

.pg-board .pg-draft.pg-angle[style*="--gen-line"]:not(:hover):not(.is-drop):not(.is-selected) {
  border-color: color-mix(in srgb, var(--gen-line) 50%, transparent);
}

/* Angle cards have a solid border (other cards keep the dashed one). */
.pg-board .pg-draft.pg-angle {
  border-style: solid;
}

/* Workflow output preview at the right end of a row, as in the editor library. */
.pg-out {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: -2px -3px -2px 0;
  border-radius: 4px;
  overflow: hidden;
  background: #232324;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.pg-out img,
.pg-out video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.pg-tip-image {
  aspect-ratio: 1;
}

/* Same 9px filled play glyph as the audio button, centred on the still. */
.pg-out.is-video .lucide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  color: #fff;
  fill: currentColor;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

/* A composition's placeholders: a warning with how many ids no workflow
   provides. */
.pg-comp-status.is-missing {
  gap: 4px;
  width: auto;
  min-width: 20px;
  padding: 0 5px;
  color: #e6b84f;
  background: #2e291d;
  box-shadow: inset 0 0 0 1px rgba(230, 184, 79, 0.35);
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* The triangle's drawn height matches the digits' (the glyph sits inside
   lucide's 24-unit box, so 0.9em draws about as tall as a bold digit). */
.pg-comp-status svg {
  width: 0.9em;
  height: 0.9em;
  stroke-width: 2.5;
}

.pg-comp-tip {
  position: fixed;
  z-index: 3200;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #111;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  font-size: 0.75rem;
  pointer-events: none;
}

.pg-comp-tip[hidden] {
  display: none;
}

.pg-comp-tip-head {
  margin-bottom: 6px;
  color: var(--text-muted);
  font-weight: 600;
}

/* A tip that is just its head (blank composition). */
.pg-comp-tip-head.is-only {
  margin-bottom: 0;
}

.pg-comp-tip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 0;
}

.pg-comp-tip-id {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-id);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-comp-tip-count {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.pg-out-count {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pg-out-audio {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
}

.pg-out-audio svg:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pg-out-ring-bg,
.pg-out-ring {
  fill: none;
  stroke-width: 1.8;
}

.pg-out-ring-bg {
  stroke: rgba(255, 255, 255, 0.2);
}

.pg-out-ring {
  stroke: #2ecc71;
  stroke-linecap: round;
}

.pg-out-audio .lucide {
  position: relative;
  width: 9px;
  height: 9px;
  fill: currentColor;
}

.pg-out-audio .lucide-pause,
.pg-out-audio.is-playing .lucide-play {
  display: none;
}

.pg-out-audio.is-playing .lucide-pause {
  display: block;
}

.pg-out-audio.is-playing {
  background: #213b2c;
}

/* Same blue as the composition row in the prod draft popup. */
.pg-draft-creatives .pg-comp-item {
  background: #1a262e;
  border-color: rgba(52, 152, 219, 0.28);
}

.pg-draft-creatives .pg-comp-item:hover {
  background: #1b2d39;
  border-color: rgba(52, 152, 219, 0.45);
}

.pg-draft-creatives .draft-item.pg-comp-item,
.pg-comp-item .pg-workflow-icon {
  cursor: pointer;
}

.pg-comp-item .pg-workflow-icon {
  color: #3498db;
}

.pg-comp-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Workflow rows open on click: pointer everywhere except the name. */
.pg-draft-creatives .draft-item[data-pg-creative],
.pg-draft-creatives .draft-item[data-pg-creative] .pg-workflow-icon,
.pg-draft-creatives .draft-item[data-pg-creative] .pg-out {
  cursor: pointer;
}

.draft-item-open[role="button"] {
  cursor: pointer;
}

.pg-wf-title {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
}


.pg-comp-row + .draft-row {
  margin-top: 2px;
}

/* Inputs: name and publish ID, then the value, edited on the card. */
.pg-draft-creatives .draft-item.pg-input-item {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px 2px 2px;
  overflow: visible;
  cursor: pointer;
}

/* The row's sides are 2px; the head keeps the 8px of other rows so icons line up. */
.pg-input-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 6px;
}

.pg-input-head .pg-wf-title {
  flex: 0 1 auto;
  font-size: 0.78rem;
  font-weight: 600;
}

.pg-input-opts {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: -2px -3px -2px auto;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.pg-input-opts:hover {
  background: #313131;
  color: #fff;
}

.pg-input-opts svg {
  width: 13px;
  height: 13px;
}

.pg-input-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(1.45em + 12px);
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: #0d0d0d;
  color: #fff;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.45;
  white-space: pre-wrap;
  resize: none;
  field-sizing: content;
  overflow: hidden;
  outline: none;
  cursor: text;
}

textarea.pg-input-text:focus {
  border-color: rgba(255, 255, 255, 0.26);
}

.pg-input-text::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.pg-input-text.is-static {
  color: rgba(255, 255, 255, 0.78);
}

.pg-input-text.is-empty {
  color: rgba(255, 255, 255, 0.32);
}

.pg-input-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: #0e0e0e;
}

.pg-input-media.is-drop {
  border-color: #3498db;
  background: #1a262e;
}

.pg-input-media .pg-out {
  width: 30px;
  height: 30px;
  margin: 0;
}

.pg-input-media .pg-out video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.pg-input-media-hint {
  padding: 0 3px;
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.7rem;
}

.pg-media-cell {
  position: relative;
  display: inline-flex;
}

.pg-media-x {
  position: absolute;
  top: -5px;
  right: -5px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2a2a2a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}

.pg-media-x svg {
  width: 9px;
  height: 9px;
}

.pg-media-cell:hover .pg-media-x {
  display: inline-flex;
}


.pg-board .lin-node[data-gen] {
  cursor: grab;
}

.pg-v3-trash {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 6;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: #141414;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 600;
}

.pg-v3-trash svg {
  width: 16px;
  height: 16px;
}

.pg-v3-trash.is-drop {
  border-color: #f07178;
  color: #f07178;
  background: #2b1c1c;
}

.pg-v3-trash[hidden] {
  display: none;
}

.pg-input-media.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

.pg-out-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.62rem;
  font-weight: 700;
}

/* A workflow with Input nodes: its row grows a field per input under the
   name. Sides are 2px like the old input rows; the head keeps the 8px of other
   rows so icons line up. */
.pg-draft-creatives .draft-item.has-inputs,
.pg-ghost-draft .draft-item.has-inputs {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 5px 2px 2px;
  overflow: visible;
}

.pg-wf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 6px;
}

.pg-wf-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pg-wf-input {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pg-wf-input-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.pg-wf-input-kind {
  margin-left: auto;
  font-weight: 500;
  opacity: 0.8;
}

.pg-wf-input .pg-input-media.is-editable {
  cursor: pointer;
}

















/* Values: one section per input. */
.tb-input-value + .tb-input-value {
  margin-top: 20px;
}

.tb-input-value-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tb-input-value-head svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.tb-input-value-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff;
}

.tb-input-value-kind {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.tb-input-text-view {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  /* Solid (2% white over the card): Arc redraws see-through field
     backgrounds lighter while another field has focus. */
  background: #171717;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.tb-input-empty {
  padding: 10px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* The node on the canvas: just its sockets once it has inputs. */
.tb-node.is-input .tb-node-body:empty {
  display: none;
}

.tb-node.is-input .tb-node-out:has(> .tb-node-body:empty) {
  min-height: 8px;
}

/* Separators between workflows: a hairline with an optional label. */
.pg-draft-creatives .draft-item.pg-sep-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 6px 4px 2px;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: grab;
}

.pg-draft-creatives .draft-item.pg-sep-item.is-plain {
  padding: 5px 4px;
}

.pg-draft-creatives .draft-item.pg-sep-item:not(.is-plain) {
  margin-top: 4px;
}

.pg-draft-creatives .draft-item.pg-sep-item:hover {
  background: none;
}

.pg-sep-line {
  flex: 1 1 auto;
  height: 1px;
  background: #323232;
}

[style*="--gen-line"] .pg-sep-line {
  background: color-mix(in srgb, var(--gen-line) 55%, transparent);
}

[style*="--gen-line"] .pg-sep-title {
  color: var(--gen-line);
}

.pg-sep-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 70%;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pg-sep-title .draft-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* The same divider in the draft popup's workflow list. */
.feat-asset-row.is-separator {
  gap: 8px;
  padding: 2px 4px;
  border-color: transparent;
  background: none;
}

.feat-asset-row.is-separator.is-locked {
  padding: 6px 4px;
}

.feat-sep-line {
  flex: 1 1 auto;
  height: 1px;
  background: #333333;
}

[style*="--gen-line"] .feat-sep-line {
  background: color-mix(in srgb, var(--gen-line) 55%, #121212);
}

[style*="--gen-line"] .feat-sep-name:not(.is-empty) {
  color: var(--gen-line);
}

[style*="--gen-line"] button.feat-sep-name:not(.is-empty):hover {
  color: color-mix(in srgb, var(--gen-line) 70%, #fff);
}

.feat-sep-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

button.feat-sep-name {
  cursor: text;
}

button.feat-sep-name:hover {
  color: #fff;
}

.feat-sep-name.is-empty {
  opacity: 0.5;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.feat-sep-input {
  flex: 0 1 180px;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: #0d0d0d;
  color: #fff;
  font: inherit;
  font-size: 0.74rem;
  outline: none;
}

/* Dragging a separator lifts its section: the rows travel as one stack. */
.pg-ghost-draft.is-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 268px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(24, 24, 27, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.pg-ghost-draft.is-section .draft-item {
  width: auto;
  box-shadow: none;
}

.pg-ghost-draft .draft-item.pg-sep-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 260px;
  padding: 4px;
  border: 0;
  background: none;
  box-shadow: none;
}

.pg-ghost-draft.is-section .draft-item.pg-sep-item {
  width: auto;
}

/* Draft popup reorder, like the planning cards: the lifted rows dim, a line
   marks the drop, and a tilted ghost follows the pointer. */
.feat-asset-row.is-lifted {
  opacity: 0.35;
}

.feat-asset-list .feat-asset-row {
  position: relative;
}

.feat-asset-row.is-drop-before::before,
.feat-asset-row.is-drop-after::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--gen-line, #3498db);
  pointer-events: none;
}

.feat-asset-row.is-drop-before::before {
  top: -4px;
}

.feat-asset-row.is-drop-after::after {
  bottom: -4px;
}

.feat-ghost {
  position: fixed;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #18181b;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0.95;
  pointer-events: none;
  transform: rotate(2deg);
}

.feat-ghost .feat-asset-row {
  opacity: 1;
}

.pg-ghost-draft .draft-item-open {
  align-items: stretch;
}

/* A collapsed section drawn as one block: header (label, line, outputs,
   toggle), then its scripts as read-only text. */
.pg-draft-creatives .draft-item.pg-sec,
.pg-ghost-draft .draft-item.pg-sec {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 6px 2px 2px;
  overflow: visible;
}

.pg-ghost-draft .draft-item.pg-sec {
  width: 260px;
  padding: 6px;
  border-radius: 8px;
  background: #18181a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* In the expanded draft, a workflow or composition name renames on click;
   the rest of its row opens it. */
.feat-asset-name[data-asset-rename] {
  display: inline-block;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
  cursor: text;
}

.feat-rename-input {
  flex: 1 1 auto;
  width: 100%;
  font-weight: 600;
}

/* Draft popup: a workflow's outputs in place of its download button, the
   same previews as on the planning cards. */
.feat-asset-btn.feat-asset-outs {
  width: auto;
  min-width: 28px;
  padding: 0 4px;
}

.feat-asset-btn.feat-asset-outs:hover {
  background: none;
}

.feat-asset-outs .pg-out {
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}

.feat-asset-outs .pg-out:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Draft popup with the editor: assets on the left, the script editor on the
   right. */
.creative-preview-sheet.is-draft.has-editor {
  width: min(1040px, calc(100vw - 48px));
  height: min(88vh, 860px);
}

.creative-preview-sheet.is-draft.has-editor .creative-preview-features {
  flex: 0 0 360px;
  width: 360px;
}

.creative-preview-editor {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 0;
  border-left: 1px solid var(--border);
}

.creative-preview-editor[hidden] {
  display: none;
}

.creative-preview-editor > .feat-pane-label {
  padding: 0 36px;
}

.cp-ed-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 36px 48px;
}

.cp-ed-empty {
  padding: 24px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Light by design: no boxes, the text is the editor. */
.cp-ed-section {
  margin: 0 0 30px;
}

.cp-ed-heading {
  margin: 0 0 10px;
  color: var(--gen-line, rgba(255, 255, 255, 0.7));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-ed-field {
  margin: 0 0 14px;
}

.cp-ed-label {
  margin: 0 0 2px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.72rem;
}

.cp-ed-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 1rem;
  line-height: 1.65;
  resize: none;
  field-sizing: content;
  outline: none;
}

.cp-ed-text::placeholder {
  color: rgba(255, 255, 255, 0.22);
}

.cp-ed-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  border-radius: 8px;
}

.cp-ed-media.is-drop {
  outline: 1px dashed color-mix(in srgb, var(--gen-line, #fff) 70%, transparent);
  outline-offset: -1px;
}

.cp-ed-tile {
  position: relative;
  display: inline-flex;
}

.cp-ed-tile .pg-out {
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 6px;
}

.cp-ed-tile .pg-out-audio,
.cp-ed-tile .pg-out-text {
  width: 28px;
  height: 28px;
}

.cp-ed-tile-x {
  position: absolute;
  top: -6px;
  right: -6px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2a2a2e;
  color: #fff;
  cursor: pointer;
}

.cp-ed-tile:hover .cp-ed-tile-x {
  display: inline-flex;
}

.cp-ed-tile-x svg {
  width: 11px;
  height: 11px;
}

.cp-ed-add {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.32);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.cp-ed-add:hover {
  color: #fff;
}

.cp-ed-add[disabled] {
  cursor: default;
}

/* Too narrow for two columns: the popup keeps its single assets column. */
@media (max-width: 760px) {
  .creative-preview-sheet.is-draft.has-editor {
    width: min(420px, calc(100vw - 24px));
  }

  .creative-preview-sheet.is-draft.has-editor .creative-preview-features {
    flex: 1 1 auto;
    width: 100%;
  }

  .creative-preview-editor {
    display: none;
  }
}

/* "Type: instance" workflow names on the cards: the type is grey, the
   instance name after the colon renames in place on drafts. */
.pg-wf-type,
.pg-wf-colon {
  flex: 0 0 auto;
  color: var(--text-muted);
  white-space: nowrap;
}

.pg-wf-colon {
  margin-right: 4px;
}

/* On a card row, the class opens the workflow. */
.draft-item .pg-wf-type {
  cursor: pointer;
}

.pg-gen-title.pg-wf-title {
  flex-direction: row;
  align-items: baseline;
  min-width: 0;
}

.pg-wf-title .draft-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-wf-title[data-pg-rename-wf] {
  cursor: text;
}

/* A composition's class is blue, like its icon. */
.pg-comp-title .pg-wf-type,
.pg-comp-title .pg-wf-colon {
  color: #3498db;
}

/* A composition's name renames in place; the rest of the row opens it. */
.pg-comp-title[data-pg-rename-comp] .draft-item-label {
  cursor: text;
}

.pg-wf-title .pg-gen-title-input {
  width: 140px;
  max-width: 100%;
  font-size: inherit;
}

.pg-ghost-draft.is-group .draft-item {
  width: auto;
  box-shadow: none;
}

/* Workflow editor title: the class (grey) and the name, saved as one
   "Class: name". */
.take-workflow-class {
  appearance: none;
  flex: 0 0 auto;
  min-width: 3ch;
  max-width: 40%;
  padding: 2px 1px 2px 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  outline: none;
  field-sizing: content;
}

.take-workflow-class::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.take-workflow-colon {
  flex: 0 0 auto;
  margin: 0 0 0 -6px;
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 700;
}

.take-workflow:not(.is-popup) .take-workflow-class,
.take-workflow:not(.is-popup) .take-workflow-colon {
  font-size: 0.79rem;
}

.take-workflow-class[readonly] {
  cursor: default;
}

/* A card the workspace tabs jumped to. */
@keyframes pg-flash {
  0%, 60% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gen-line, #3498db) 80%, transparent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}

.pg-draft.is-flash {
  animation: pg-flash 1.4s ease-out;
}

/* Shift-click selection and its Group bar. */
.pg-draft-creatives .draft-item.is-selected {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gen-line, #3498db) 85%, transparent);
}

.pg-select-bar {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #141416;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  font-size: 0.8rem;
}

.pg-select-bar[hidden] {
  display: none;
}

.pg-select-count {
  color: var(--text-muted);
}

.pg-select-group,
.pg-select-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  background: #2c2c2d;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.pg-select-group:hover {
  background: #3a3a3b;
}

.pg-select-group.is-danger {
  color: #f07178;
}

.pg-select-group.is-danger:hover {
  background: #372326;
}

/* A shift-clicked draft. */
.pg-angle-draft.is-selected {
  box-shadow: inset 0 0 0 1.5px #3498db;
  background: #101c25;
}

.pg-select-clear {
  padding: 5px;
  background: none;
  color: var(--text-muted);
}

.pg-select-clear:hover {
  color: #fff;
}

.pg-select-bar svg {
  width: 14px;
  height: 14px;
}

/* A shift-clicked angle: its border goes solid in a brighter persona color,
   and the card takes a faint tint of it (as a selected draft does). */
.pg-board .pg-draft.pg-angle.is-selected {
  border-style: solid;
  border-color: color-mix(in srgb, var(--gen-line, #fff) 70%, #fff);
  background-color: color-mix(in srgb, var(--gen-line, #fff) 12%, #0d0d0d);
}

/* Shift-clicked rows in the draft screen's list, and their bar at the
   bottom of the list. */
.creative-preview.is-drawer .feat-asset-row.is-selected,
.creative-preview.is-drawer.is-split .feat-asset-row.is-selected {
  box-shadow: inset 0 0 0 1.5px #3498db;
  background: rgba(52, 152, 219, 0.12);
}

.cp-select-bar {
  z-index: 20;
  white-space: nowrap;
}

/* An angle's whiteboard as a screen: right of the gutter and under the
   tabs, like the draft screen, and only on Planning. */
.pb-full.pg-wb-screen {
  top: var(--pg-drawer-top, 0px);
  left: var(--pg-drawer-left, 0px);
  /* Under the ad popup (1000) its cards open. */
  z-index: 999;
}

.pb-full.pg-wb-screen {
  animation: pg-gx-enter 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pb-full.pg-wb-screen.is-closing {
  pointer-events: none;
  animation: pg-gx-exit 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
}

body[data-tab]:not([data-tab="planning"]) .pb-full.pg-wb-screen {
  display: none;
}

/* The bar steps aside while dragging. */
.pg-canvas.is-dragging ~ .pg-select-bar {
  display: none;
}

/* Input node inspector rows (restored with the multi-input node). */
/* Workflow editor: the Input node. Inputs on the left as rows (like the
   Switch node's choices): grip, type button, name, id, remove. Values on the
   right, one section per input. */
.tb-input-row {
  gap: 6px;
}

.tb-input-kind-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #292929;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.tb-input-kind-btn:hover:not(:disabled) {
  background: #363636;
  color: #fff;
}

.tb-input-kind-btn svg {
  width: 14px;
  height: 14px;
}

.tb-input-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  outline: none;
}

.tb-input-name:hover:not([readonly]) {
  background: #242424;
}

.tb-input-name:focus {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.25);
}

.tb-input-add {
  margin-top: 2px;
}

/* The row's type menu. */
.tb-input-menu {
  position: fixed;
  z-index: 3400;
  min-width: 184px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #1a1a1a;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.tb-input-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.tb-input-menu-item:hover {
  background: #2a2a2a;
  color: #fff;
}

.tb-input-menu-item svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.tb-input-menu-item.is-on {
  color: #fff;
}

.tb-input-menu-item .tb-input-menu-check {
  margin-left: auto;
  color: #fff;
}

.tb-input-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: #2c2c2c;
}

/* The fixed Input node is blue, as Output is green. */
.tb-node.is-input .tb-node-head {
  color: #5b9cf2;
}

.wf-thumb-node.is-input rect {
  stroke: #5b9cf2;
}

/* Upload queue preview, bottom right (FYPRadar's collection card, small):
   the newest three queued videos as covers over the name and count. */
.pg-queue {
  position: absolute;
  right: 16px;
  bottom: 20px;
  z-index: 7;
  display: block;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #141416;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.pg-queue:hover {
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.pg-queue-covers {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 3px;
  overflow: hidden;
  border-radius: 8px;
}

.pg-queue-cover {
  display: block;
  aspect-ratio: 9 / 14;
  background: #181818;
}

.pg-queue-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-queue-cover {
  position: relative;
}

/* "+N" over the dimmed third cover when more are queued. */
.pg-queue-more,
.pg-queue-busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pg-queue-more {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.pg-queue .mono,
.pg-queue-screen .mono {
  font-family: var(--font-id);
}

/* A spinner, in place of Upload while the draft's video renders. */
.pg-spinner {
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: pg-spin 0.8s linear infinite;
}

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

.pg-angle-draft .pg-draft-rendering {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 0 0 auto;
}

/* Locked while it renders: no open, rename or drag. */
.pg-angle-draft.is-rendering {
  cursor: default;
}

.pg-angle-draft.is-rendering .pg-angle-draft-title {
  opacity: 0.55;
  pointer-events: none;
}

/* The upload queue screen (placeholder). */
.pg-queue-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  animation: pg-drawer-fade-in 160ms ease;
}

.pg-queue-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(1040px, 100%);
  max-height: 100%;
  padding: 14px 16px 18px;
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: #141416 var(--tile-queue) repeat;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: pg-queue-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pg-queue-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
}

/* Title and count on the left; schedule, cadence and Upload now on the
   right. */
.pg-queue-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.pg-queue-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pg-queue-title h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pg-queue-head-count {
  padding: 1px 7px;
  border-radius: 7px;
  background: #272729;
  color: var(--text-muted);
  font-size: 12px;
}

.pg-queue-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* When the next batch goes up, with how far along the cadence is. */
.pg-queue-next {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 10px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 9px;
  background: #1d1d1f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  white-space: nowrap;
}

.pg-queue-next > svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #5dade2;
}

.pg-queue-next-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pg-queue-next-label {
  color: var(--text-muted);
}

.pg-queue-next-value {
  color: #fff;
  font-weight: 650;
}

.pg-queue-next-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #2b2b2c;
}

.pg-queue-next-bar span {
  display: block;
  height: 100%;
  background: #3498db;
}

.pg-queue-next.is-due > svg,
.pg-queue-next.is-due .pg-queue-next-value {
  color: #f5b041;
}

.pg-queue-next.is-due .pg-queue-next-bar span {
  background: #f5b041;
}

.pg-queue-next.is-idle {
  color: var(--text-muted);
}

.pg-queue-next.is-idle > svg {
  color: var(--text-muted);
}

.pg-queue-now {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: #3498db;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease;
}

.pg-queue-now:hover:not(:disabled) {
  background: #2e86c1;
}

.pg-queue-now:disabled {
  background: #272729;
  color: var(--text-muted);
  cursor: default;
}

.pg-queue-now svg {
  width: 15px;
  height: 15px;
}

.pg-queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 20px 16px;
}

.pg-queue-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pg-queue-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: #181818;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pg-queue-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-queue-back {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity 140ms ease, background 140ms ease;
}

.pg-queue-media:hover .pg-queue-back {
  opacity: 1;
}

.pg-queue-back:hover {
  background: rgba(0, 0, 0, 0.75);
}

.pg-queue-back svg {
  width: 14px;
  height: 14px;
}

.pg-queue-card-name {
  padding: 0 2px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-queue-info {
  min-width: 0;
}

.pg-queue-where {
  margin-top: 2px;
  padding: 0 2px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Where a queued video goes, or how its upload went. */
.pg-queue-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 0 2px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-queue-status.is-error,
.pg-queue-status.is-dry.has-issues {
  color: #f07178;
}

.pg-queue-status.is-dry {
  color: #e5c07b;
}

.pg-queue-status .pg-spinner {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
}

/* Upload now while Dry run is on: amber, not the blue of a real upload. */
.pg-queue-now.is-dry {
  background: #312c24;
  color: #e5c07b;
}

.pg-queue-now.is-dry:hover:not(:disabled) {
  background: #423a2c;
}


.pg-queue-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px 0 36px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.pg-queue-empty svg {
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
  opacity: 0.6;
}

.pg-queue-empty strong {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* Script view: a draft card reads like one document. */
.pg-script {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  padding: 0 2px 4px;
}

/* Headed like a workflow row: icon, then "Class: name" (class in grey). */
.pg-script-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.pg-script-head .pg-workflow-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.pg-script-head[data-pg-open-wf],
.pg-script-head[data-pg-open-wf] .pg-workflow-icon,
.pg-script-head[data-pg-open-wf] .pg-wf-title,
.pg-script-head[data-pg-open-wf] .pg-wf-type,
.pg-script-head[data-pg-open-wf] .pg-wf-colon {
  cursor: pointer;
}

.pg-script-head .pg-wf-title[data-pg-rename-wf] .draft-item-label {
  cursor: text;
}



/* Space between inputs sits above each input's header, not under text
   (the first one takes the workflow header's own 12px instead). */
.pg-script-caption {
  margin: 12px 0 1px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.64rem;
}

.pg-script-head + .pg-script-caption {
  margin-top: 0;
}

/* Text is just text: no box, no border; a faint wash while editing. */
textarea.pg-script-text,
.pg-script-text {
  display: block;
  box-sizing: border-box;
  width: calc(100% + 8px);
  margin: 0 0 0 -4px;
  min-height: 0;
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  resize: none;
  field-sizing: content;
  outline: none;
  cursor: text;
}

textarea.pg-script-text:focus {
  background: #1b1b1b;
}

textarea.pg-script-text::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.pg-script-text.is-empty {
  color: rgba(255, 255, 255, 0.3);
}

.pg-script-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: none;
}

.pg-script-media .pg-media-cell .pg-out {
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 6px;
}

.pg-script-add {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.74rem;
  cursor: pointer;
}

.pg-script-media.is-editable:hover .pg-script-add {
  color: #fff;
}

.pg-script-media.is-drop {
  outline: 1px dashed color-mix(in srgb, var(--gen-line, #ffffff) 70%, transparent);
  outline-offset: -1px;
  border-radius: 6px;
}

.pg-script-empty {
  color: var(--text-muted);
  font-size: 0.74rem;
}

/* A section's fields line up with the class name in its header (after the
   14px icon and 8px gap). */
.pg-script-section > :not(.pg-script-head) {
  margin-left: 22px;
}

/* Text keeps its 4px editing wash on both sides, so its box starts 4px
   before the text. */
.pg-script-section > textarea.pg-script-text,
.pg-script-section > .pg-script-text {
  width: calc(100% - 14px);
  margin-left: 18px;
}

/* Workflows listed in the replace dialog, styled like their card rows. */
.pg-replace-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 12px;
}

.pg-replace-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: #1d1d1d;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.pg-replace-row .pg-wf-title {
  display: flex;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* Ad cards are 25% wider than the shared board's (388px columns, was 310px). */
.pg-batch-col {
  grid-template-columns: minmax(369px, 388px);
  /* Name, details, then the angles. */
  grid-template-rows: auto auto 1fr;
}

/* Notes about the persona, under its name: grows with its text. */
.pg-batch-details {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 10px 10px;
  border: 0;
  background: transparent;
  color: #8e8e93;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.45;
  resize: none;
  outline: none;
  field-sizing: content;
  overflow: hidden;
  cursor: text;
}

.pg-batch-details::placeholder {
  color: #4a4a4c;
}

.pg-batch-details:focus {
  color: #fff;
}

.pg-ghost .lin-node,
.pg-ghost .pg-draft {
  width: 369px;
}

/* Script view on drafts: one grid per ad. Workflow headers span it, over a
   faint divider; under them each field's name sits in the left column and
   its value in the right, so values line up across the ad. */
.pg-script.is-grid {
  display: grid;
  grid-template-columns: fit-content(50%) minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 8px;
  align-items: start;
}

.pg-script.is-grid > .pg-script-empty {
  grid-column: 1 / -1;
}

.pg-script.is-grid .pg-script-section {
  display: contents;
}

.pg-script.is-grid .pg-script-head {
  grid-column: 1 / -1;
  margin: 8px 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pg-script.is-grid .pg-script-section:first-child .pg-script-head {
  margin-top: 0;
}

.pg-script.is-grid .pg-script-section > :not(.pg-script-head) {
  margin-left: 0;
}

.pg-script.is-grid .pg-script-section > .pg-script-text {
  width: calc(100% + 4px);
  margin-left: -4px;
}

.pg-script-label {
  min-width: 0;
  padding: 1px 0 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The ad's creative id, in grey under its name. */
.pg-gen-title .pg-card-id {
  margin-top: 4px;
  color: var(--text-muted);
  font-family: var(--font-id);
  font-weight: 700;
}

/* A workflow's only input has no name: it starts at the left edge. */
.pg-script.is-grid .pg-script-section > .is-full {
  grid-column: 1 / -1;
}

/* Script view: open a multi-field workflow in the full-screen editor. */
.pg-script-expand {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.pg-script-expand:hover {
  background: #292929;
  color: #fff;
}

.pg-script-expand svg {
  width: 13px;
  height: 13px;
}

/* Focus editor: one workflow's inputs, full screen. With a phone keyboard
   open, the body gets bottom room for it (--pg-focus-kb, fitFocusViewport)
   so the field being written scrolls above it; 16px text keeps iOS from
   zooming in. */
html.pg-focus-open,
html.pg-focus-open body {
  overflow: hidden;
}

.pg-focus {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: #111;
  /* When the sheet follows the visual viewport down (phone keyboard), the
     page above it stays covered. */
  box-shadow: 0 -100vh 0 100vh #111;
  color: #fff;
}

.pg-focus-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pg-focus-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.pg-focus-title .pg-workflow-icon,
.pg-focus-title .pg-workflow-icon svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.pg-focus-title .pg-wf-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pg-focus-back {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.pg-focus-back:hover {
  background: #242424;
}

.pg-focus-back svg {
  width: 20px;
  height: 20px;
}

.pg-focus-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 16px calc(48px + env(safe-area-inset-bottom) + var(--pg-focus-kb, 0px));
}

/* Two columns: field names left, values right, lined up. */
.pg-focus-col {
  display: grid;
  grid-template-columns: fit-content(35%) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 22px;
  align-items: start;
  max-width: 760px;
  margin: 0 auto;
}

.pg-focus-field {
  display: contents;
}

.pg-focus-label {
  min-width: 0;
  padding-top: 8px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pg-focus-text {
  display: block;
  box-sizing: border-box;
  width: calc(100% + 10px);
  min-height: calc(1.6em + 16px);
  margin: 0 0 0 -10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  resize: none;
  outline: none;
  field-sizing: content;
}


.pg-focus-text::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.pg-focus-media {
  padding-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pg-focus-media .pg-media-cell .pg-out {
  width: 72px;
  height: 72px;
}

.pg-focus-add {
  appearance: none;
  min-height: 44px;
  padding: 0 16px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.pg-focus-add:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

/* In the focus editor the remove button is always there (no hover on
   phones) and big enough to tap. */
.pg-focus-media .pg-media-x {
  display: inline-flex;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
}

.pg-focus-media .pg-media-x svg {
  width: 12px;
  height: 12px;
}

@media (pointer: coarse) {
  .pg-script-expand {
    width: 36px;
    height: 36px;
    margin: -6px -6px -6px auto;
  }

  .pg-script-expand svg {
    width: 16px;
    height: 16px;
  }
}

/* Something feeding the Output is running: a spinner in the output's place,
   and "Loading…" for a name set by the Output's Name input. */
.pg-out.is-loading {
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
}

.pg-out.is-loading svg {
  width: 14px;
  height: 14px;
  animation: feat-spin 0.8s linear infinite;
}

.draft-item-label.is-loading {
  color: var(--text-muted);
  font-weight: 500;
}

/* Workflows gutter (left of the board): every workflow on the board's ads,
   grouped by class, one row per name + content. Desktop only. */
.pg-wf-rail .pg-wfr-list {
  gap: 0;
  padding: 2px 8px 14px;
}

.pg-wfr-headrow {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pg-wfr-more {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.38);
  cursor: pointer;
}

.pg-wfr-more:hover,
.pg-wfr-more[aria-expanded="true"] {
  background: #1e1e1e;
  color: #fff;
}

.pg-wfr-more svg {
  width: 14px;
  height: 14px;
}

/* Class color: the board's palette, plus Automatic (by list position). */
.pg-wfr-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}

.pg-wfr-swatch {
  appearance: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sw, transparent);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.pg-wfr-swatch.is-auto {
  background: conic-gradient(#5B8DEF, #7BC67E, #E6B84F, #F07178, #C792EA, #5B8DEF);
  opacity: 0.55;
}

.pg-wfr-swatch[aria-checked="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 3.5px #fff;
}

/* The class settings popup, styled like the workflow editor's Auto-run. */
.tb-autorun-pop.pg-wfr-pop {
  position: fixed;
  top: auto;
  right: auto;
  z-index: 3200;
  width: 260px;
}

.pg-wfr-head {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 6px 4px 2px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

/* Each class is marked by a colored line down its left side, as workflow
   tab groups are; headers read as section labels (small caps). */
.pg-wfr-group {
  padding-left: 8px;
  border-left: 2px solid var(--wfr-color, rgba(255, 255, 255, 0.2));
}

.pg-wfr-headrow {
  margin-bottom: 4px;
}

/* Rearranging classes: headers only, the dragged one lifted. */
.pg-wfr-list.is-sorting .pg-wfr-items,
.pg-wfr-list.is-sorting .pg-wfr-empty {
  display: none;
}

/* Padding (not margin) between classes, so the color lines run on
   unbroken; the insert line sits in that space. */
.pg-wfr-list.is-sorting .pg-wfr-group {
  padding-top: 3px;
  padding-bottom: 3px;
}

.pg-wfr-group.is-sorting-drag {
  opacity: 0.45;
}

/* Insert line, as for workflow rows in an ad. */
.pg-wfr-group {
  position: relative;
}

.pg-wfr-group.is-drop-before::before,
.pg-wfr-group.is-drop-after::after {
  content: "";
  position: absolute;
  left: -2px;
  right: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent, #5B8DEF);
  pointer-events: none;
}

.pg-wfr-group.is-drop-before::before {
  top: 2px;
}

.pg-wfr-group.is-drop-after::after {
  bottom: -4px;
}

body.is-rail-sorting,
body.is-rail-sorting * {
  cursor: grabbing !important;
  user-select: none;
}

/* Space around each class split evenly above and below it, so the color
   line runs the class's full height. */
.pg-wfr-group {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Between classes: a short black break in the color line only. */
.pg-wfr-divider {
  /* Don't let the list's flex column squeeze it to nothing when the gutter
     overflows (expanded classes). */
  flex: 0 0 3px;
  width: 2px;
  height: 3px;
  background: #000;
}

.pg-wfr-list.is-sorting .pg-wfr-divider {
  display: none;
}

.pg-wfr-head:hover {
  color: #fff;
}

.pg-wfr-head svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.pg-wfr-head .pg-wfr-chevron {
  width: 12px;
  height: 12px;
  margin-right: 2px;
  transition: transform 0.12s ease;
}

.pg-wfr-group.is-folded .pg-wfr-chevron {
  transform: rotate(-90deg);
}

.pg-wfr-head .pg-workflow-icon {
  margin-right: 4px;
}

.pg-wfr-head-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rows sit a little in from the class headers. */
.pg-wfr-items.pg-draft-creatives {
  margin-top: 0;
  padding-bottom: 6px;
  padding-left: 4px;
}

/* Rows as on the cards: drag onto a draft, click to open. */
.pg-wfr-item {
  cursor: grab;
  user-select: none;
}

/* Live workflows get the stronger border; never-live ones are dashed in the
   rows' usual faint color, without a badge. */
.pg-wfr-item.is-live {
  border-color: rgba(255, 255, 255, 0.2);
}

.pg-wfr-item.is-unlaunched {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.06);
}

.pg-wfr-comp .pg-wf-type,
.pg-wfr-comp .pg-wf-colon {
  display: none;
}

.pg-wfr-item.is-lifted {
  opacity: 0.5;
}

/* Compact pill at the start of a gutter row: average live fitness, then
   the number of ads using the workflow. */
.pg-wfr-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* The card's leftmost section: flush with its left, top and bottom edges
     (the card's padding is 5px 8px; its rounded corners clip the chip). */
  align-self: stretch;
  min-width: 22px;
  margin: -5px 0 -5px -8px;
  padding: 0 6px;
  border-radius: 0;
  /* Light chip, dark text and divider. */
  background: #dfdfdf;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  justify-content: center;
}

.pg-wfr-fit {
  color: #111;
}

/* The divider runs the pill's full height. */
.pg-wfr-badge > span {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}


/* Other versions of a name nest under the main one, with the Docs arrow. */
.pg-wfr-row.is-child {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 6px;
}

.pg-wfr-row.is-child > .draft-item {
  flex: 1 1 auto;
  min-width: 0;
}

.pg-wfr-branch {
  flex: 0 0 auto;
  display: inline-flex;
  color: rgba(255, 255, 255, 0.4);
}

.pg-wfr-branch svg {
  width: 14px;
  height: 14px;
}

.pg-wfr-empty {
  padding: 8px 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.pg-ghost .pg-wfr-item {
  background: var(--surface-solid);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

@media (max-width: 760px) {
  #pgRail,
  #pgRailResize {
    display: none;
  }
}

/* Workflows / Compositions switch at the top of the gutter (SegToggle),
   set off from the list by a black line like the one under the nav bar. */
.pg-rail-seg {
  flex: 1 1 auto;
  min-width: 0;
}

/* Stops 1px short of the gutter's right edge line (its inset shadow), so
   that line and the resize handle stay on top. */
#pgRailTitle {
  margin-right: 1px;
  border-bottom: 1px solid #000;
}

.pg-wf-rail .pg-wfr-list {
  padding-top: 0;
}

/* A nested version's row: what it changes against its parent, git-style. */
.draft-item-label.pg-diff {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-id);
  font-size: 0.7rem;
  font-weight: 700;
}

.pg-diff-del,
.pg-diff-ins {
  min-width: 0;
  overflow: hidden;
  padding: 0 3px;
  border-radius: 3px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-diff-del {
  flex: 0 1 auto;
  color: #ff8a84;
  background: #352021;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 138, 132, 0.6);
}

.pg-diff-ins {
  flex: 0 1 auto;
  color: #8fe0a0;
  background: #222e22;
}

.pg-diff-more,
.pg-diff-take {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 600;
}

/* A workflow version's row: how it differs from its parent, in one word. */
.draft-item-label.pg-change-label {
  display: flex;
  align-items: center;
  min-width: 0;
}

.pg-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* A step brighter than the usual muted grey (#8e8e93). */
  color: #b8b8bd;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.pg-change svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}


/* Hover tooltip on a workflow version's change: each change, git-style. */
.pg-change[data-wfr-change] {
  cursor: help;
}

.pg-change-tip {
  max-width: 340px;
}

.pg-change-tip-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 0;
}

.pg-change-tip-row + .pg-change-tip-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pg-change-tip-where {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.pg-change-tip-diff {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--font-id);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
}

.pg-change-tip-diff .pg-diff-del,
.pg-change-tip-diff .pg-diff-ins {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A composition version's row: git-style counts of what it changes. */
.pg-comp-stat {
  gap: 10px;
  font-family: var(--font-id);
  font-weight: 700;
}

.pg-stat-type {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pg-stat-type svg {
  margin-right: 1px;
}

.pg-stat-plus {
  color: #8fe0a0;
}

.pg-stat-minus {
  color: #ff8a84;
}

/* The score tooltip: each live ad behind the average, with its own score. */
.pg-fit-tip-ad {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-wfr-badge[data-wfr-fit] {
  cursor: help;
}

/* Parent rows' icon, left of the name (comp rows in the card's blue). */
.pg-wfr-item > .pg-workflow-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.pg-wfr-item > .pg-comp-icon {
  color: #3498db;
}

/* Compact view: a header above each format's ads in a batch. */
.pg-format-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 2px -2px;
  color: #3498db;
  font-size: 0.72rem;
  font-weight: 650;
}

.pg-format-head:first-child {
  margin-top: 0;
}

.pg-format-head.is-none {
  color: var(--text-muted);
}

.pg-format-head svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

/* Class headers show their icon only while folded (the rows carry it when
   the class is open). */
.pg-wfr-group:not(.is-folded) .pg-wfr-head .pg-workflow-icon {
  display: none;
}

/* Angles: cards that hold drafts. */
.pg-angle-drafts {
  flex: 1 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}

.pg-angle-draft {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  /* Drafts are dashed (not out yet); their angle's card is solid. */
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: #151516;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
}

.pg-angle-draft:hover {
  background: #1f1f1f;
}

/* The draft's id, greyed out in Space Mono, before its name. */
.pg-angle-draft-id {
  flex: 0 0 auto;
  font-family: var(--font-id);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* Only the name itself renames; the rest of the row opens the draft. */
.pg-angle-draft .pg-angle-draft-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.pg-angle-draft .pg-draft-upload {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 0 0 auto;
}

/* No destination ads on the angle yet. */
.pg-angle-draft .pg-draft-upload.is-off {
  opacity: 0.35;
  cursor: not-allowed;
}

.pg-angle-draft .pg-draft-upload.is-off:hover {
  background: none;
  color: rgba(255, 255, 255, 0.55);
}

/* Lines up with Upload: same right edge, same width when it is just the icon. */
.pg-angle-draft .pg-comp-status {
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  min-width: 22px;
  justify-content: center;
  margin: 0 0 0 auto;
}

.pg-angle-draft .pg-angle-draft-title.is-editing {
  flex: 1 1 auto;
}

.pg-angle-empty {
  padding: 4px 2px;
  font-size: 11px;
  color: var(--text-muted);
}

/* The gear on a persona's head: no border. */
.pg-batch-head .pg-batch-settings {
  border: 0;
  background: none;
}

.pg-batch-head .pg-batch-settings:hover {
  background: #1c1c1c;
  color: #fff;
}

/* Persona options, styled like the gutter's filter popover. */
.pg-persona-pop {
  position: fixed;
  z-index: 3200;
  width: 240px;
  padding: 6px;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
  border-radius: 12px;
  background: #1a1a1a var(--tile-menu) repeat;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.pg-persona-pop[hidden] {
  display: none;
}

.pg-persona-pop-head {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 4px;
  padding: 0 8px;
  border-left: 2px solid var(--persona);
  border-radius: 2px;
}

.pg-persona-pop-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.pg-persona-pop-label {
  padding: 6px 8px 4px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pg-persona-pop-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 8px 8px;
}

.pg-persona-pop-sep {
  height: 1px;
  margin: 2px 0 4px;
  background: #282828;
}

.pg-persona-pop .pg-persona-delete {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #f07178;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.pg-persona-pop .pg-persona-delete:hover {
  background: #342425;
}

.pg-persona-pop .pg-persona-delete svg {
  width: 14px;
  height: 14px;
}

/* The angle's gear, borderless like the persona's. */
.pg-angle .pg-gen-actions {
  gap: 2px;
}

.pg-angle .pg-angle-settings {
  border: 0;
  background: none;
}

.pg-angle .pg-angle-settings:hover {
  background: #222222;
  color: #fff;
}

/* Angle options: the ad groups its ads land in. */
.pg-angle-pop {
  display: flex;
  flex-direction: column;
  width: 300px;
  max-height: min(70vh, 480px);
}

.pg-angle-pop[hidden] {
  display: none;
}

.pg-angle-pop-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pg-angle-pop-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #5dade2;
  font-weight: 600;
  letter-spacing: 0;
}

.pg-angle-pop-count .mono {
  font-family: var(--font-id);
}

.pg-angle-pop-clear {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}

.pg-angle-pop-clear:hover {
  color: #fff;
}

.pg-angle-pop-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 2px 6px;
  padding: 0 8px;
  border-radius: 8px;
  background: #0b0b0c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pg-angle-pop-search:focus-within {
  box-shadow: inset 0 0 0 1px rgba(52, 152, 219, 0.55);
}

.pg-angle-pop-search svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--text-muted);
}

.pg-angle-pop-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
}

.pg-angle-pop-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Campaign, then its ad groups, then their ads (the picks). */
.pg-angle-camp + .pg-angle-camp {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Campaign and ad group headers fold their contents. */
.pg-angle-camp-name,
.pg-angle-group-name {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pg-angle-camp-name:hover,
.pg-angle-group-name:hover {
  background: #232323;
}

.pg-angle-camp-name {
  min-height: 28px;
  padding: 0 8px 0 4px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
  font-weight: 700;
}

.pg-angle-group-name {
  min-height: 26px;
  padding: 0 8px 0 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  font-weight: 600;
}

.pg-angle-camp-name span:not(.pg-angle-fold-count),
.pg-angle-group-name span:not(.pg-angle-fold-count) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-angle-camp-name svg,
.pg-angle-group-name svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

.pg-angle-camp-name .pg-angle-camp-icon {
  width: 13px;
  height: 13px;
  color: #5dade2;
}

.pg-angle-chev {
  transition: transform 140ms ease;
}

.pg-angle-camp-name[aria-expanded="false"] .pg-angle-chev,
.pg-angle-group-name[aria-expanded="false"] .pg-angle-chev {
  transform: rotate(-90deg);
}

/* How many of the folded ads are picked. */
.pg-angle-fold-count {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 6px;
  background: #1f313d;
  color: #5dade2;
  font-family: var(--font-id);
  font-size: 0.66rem;
  font-weight: 400;
}

.pg-angle-ad {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 28px;
  padding: 0 8px 0 40px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.pg-angle-group.is-bare .pg-angle-ad {
  padding-left: 22px;
}

.pg-angle-ad:hover {
  background: #282828;
  color: #fff;
}

.pg-angle-ad.is-on {
  color: #fff;
  font-weight: 600;
}

.pg-angle-ad.is-paused:not(.is-on) {
  color: rgba(255, 255, 255, 0.45);
}

.pg-angle-ad-box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  color: #fff;
}

.pg-angle-ad-box svg {
  width: 11px;
  height: 11px;
  stroke-width: 3;
  visibility: hidden;
}

.pg-angle-ad.is-on .pg-angle-ad-box {
  border-color: #3498db;
  background: #3498db;
}

.pg-angle-ad.is-on .pg-angle-ad-box svg {
  visibility: visible;
}

.pg-angle-ad-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-angle-ad-state {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 500;
}

.pg-angle-pop-empty {
  padding: 16px 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
}

/* Where a dragged angle lands in its persona. */
.pg-unit.is-drop-before,
.pg-unit.is-drop-after {
  position: relative;
}

.pg-unit.is-drop-before::before,
.pg-unit.is-drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--persona, #fff);
  pointer-events: none;
}

.pg-unit.is-drop-before::before {
  top: -4px;
}

.pg-unit.is-drop-after::after {
  bottom: -4px;
}

/* A little more room around an angle's title. */
.pg-angle > .pg-draft-row {
  margin-top: 3px;
  padding-left: 3px;
}

/* The draft popup as a drawer from the right: just the asset list (no
   header, no editor column, no "Assets" label). Click outside or Escape
   closes it. */
.creative-preview.is-drawer {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}

.creative-preview.is-drawer .creative-preview-backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.creative-preview.is-drawer .creative-preview-sheet {
  width: 720px;
  max-width: calc(100vw - 48px);
  height: 100%;
  max-height: none;
  border-width: 0 0 0 1px;
  border-radius: 0;
  animation: pg-drawer-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pg-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Closing: slide back out (creative-preview.js waits 200ms, then hides). */
.creative-preview.is-drawer.is-closing .creative-preview-sheet {
  animation: pg-drawer-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.creative-preview.is-drawer .creative-preview-backdrop {
  animation: pg-drawer-fade-in 0.22s ease;
}

.creative-preview.is-drawer.is-closing .creative-preview-backdrop {
  animation: pg-drawer-fade-out 0.2s ease forwards;
}

@keyframes pg-drawer-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes pg-drawer-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pg-drawer-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.creative-preview.is-drawer .creative-preview-head,
.creative-preview.is-drawer .creative-preview-editor,
.creative-preview.is-drawer .creative-preview-workflows > .feat-pane-label {
  display: none !important;
}

.creative-preview.is-drawer .creative-preview-cols {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* The live popup fixes this column at 360px; the drawer gives it all the width. */
.creative-preview.is-drawer .creative-preview-sheet .creative-preview-features {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0;
  max-width: none;
}

/* The draft screen belongs to Planning: other tabs don't show it (it's
   back when Planning is). */
body[data-tab]:not([data-tab="planning"]) .creative-preview.is-drawer.is-split {
  display: none !important;
}

/* The draft as a screen (planning-board-next): right of the gutter, the
   draft's list (its width dragged at the handle) and the workflow editor,
   always there. No slide or backdrop. */
.creative-preview.is-drawer.is-split .creative-preview-backdrop {
  display: none;
}

.creative-preview.is-drawer.is-split .creative-preview-sheet {
  width: 100%;
  max-width: none;
  border-left: none;
  box-shadow: none;
  /* Comes in like a gutter view change. */
  animation: pg-gx-enter 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.creative-preview.is-drawer.is-split.is-closing .creative-preview-sheet {
  animation: pg-gx-exit 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.creative-preview.is-drawer.is-split .creative-preview-cols {
  display: flex;
  flex-direction: row;
}

.creative-preview.is-drawer.is-split .creative-preview-sheet .creative-preview-features {
  flex: 0 0 var(--cp-list-w, 460px) !important;
  width: var(--cp-list-w, 460px) !important;
  max-width: calc(100% - 360px);
  min-width: 300px;
}

/* The drafts section's head: back to the board, the id (grey Space Mono, as
   on the board) and the name, which renames in place. */
.cp-split-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 10px 12px 6px 8px;
}

.cp-split-head[hidden] {
  display: none;
}

.cp-split-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.cp-split-back:hover {
  background: #252525;
  color: #fff;
}

.cp-split-back svg {
  width: 18px;
  height: 18px;
}

.cp-split-cid {
  flex: 0 0 auto;
  font-family: var(--font-id);
  font-size: 0.76rem;
  color: var(--text-muted);
}

.cp-split-cid[hidden] {
  display: none;
}

.cp-split-name {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-split-name .creative-preview-draft-name {
  height: 30px;
  margin: 0;
  padding: 0 6px;
  border-color: transparent;
  background: none;
  font-size: 1rem;
  font-weight: 650;
}

.cp-split-name .creative-preview-draft-name:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.cp-split-name .creative-preview-draft-name:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background: #1b1b1b;
}

/* Add Asset in the head: a + like the board's (.ag-group-add), its menu
   dropping down from the right. */
.cp-split-head .creative-preview-add-workflow {
  flex: 0 0 auto;
  width: auto;
}

.cp-split-head .creative-preview-add-workflow .creative-preview-draft-btn {
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
}

.cp-split-head .creative-preview-add-workflow .creative-preview-draft-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: #202020;
}

.cp-split-head .creative-preview-add-workflow .creative-preview-draft-btn span {
  display: none;
}

.cp-split-head .creative-preview-add-workflow .creative-preview-draft-btn svg {
  width: 14px;
  height: 14px;
}

.cp-split-head .creative-preview-add-workflow .feat-import-menu {
  top: calc(100% + 6px);
  right: 0;
  bottom: auto;
  left: auto;
  width: 300px;
}

/* With Add Asset gone, the list's foot only shows when it has something. */
.creative-preview.is-split .creative-preview-assets-foot:not(:has(> :not([hidden]))) {
  display: none;
}

/* Between the list and the editor; drawn like the gutter's handle. */
.cp-split-resize {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 12px;
  margin: 0 -6px;
  cursor: col-resize;
  touch-action: none;
}

.cp-split-resize[hidden] {
  display: none;
}

.cp-split-resize::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  border-radius: 1px;
  background: transparent;
}

.cp-split-resize:hover::after,
body.is-rail-resizing .cp-split-resize::after {
  background: #656565;
}

.creative-preview-detail {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--surface-solid) var(--tile-panel) repeat;
}

.creative-preview-detail[hidden],
.creative-preview-detail > [hidden] {
  display: none !important;
}

.cp-detail-wf {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* The canvas scrolls itself; the pane doesn't. */
.cp-detail-wf:not(.is-inputs) {
  overflow: hidden;
}

/* Inputs: the workflow's header (like the canvas's), then the form. */
.cp-detail-wf.is-inputs {
  padding: 0;
}

/* (Beats the drawer's own zero padding on .feat-asset-inputs.) */
.creative-preview.is-drawer .cp-detail-wf.is-inputs > .feat-asset-inputs {
  padding: 16px 20px 20px;
}

/* The draft screen's input form: more room between the labels and what
   they hold, and a slightly larger text. Labels share the text's line
   height so each sits on its value's first line. */
.creative-preview.is-drawer .cp-detail-wf.is-inputs > .feat-asset-inputs.is-grid {
  column-gap: 18px;
}

.creative-preview.is-drawer .cp-detail-wf.is-inputs > .feat-asset-inputs .pg-script-text {
  font-size: 0.9rem;
}

.creative-preview.is-drawer .cp-detail-wf.is-inputs > .feat-asset-inputs .pg-script-label {
  font-size: 0.82rem;
  line-height: calc(0.9rem * 1.55);
}

.cp-inputs-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 8px 6px 12px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
}

/* Like the workflow editor's header: the class's icon (not a button) and the
   workflow's own name (the class's name is in workflow settings). */
.cp-inputs-head .cp-inputs-class,
.cp-inputs-head .cp-inputs-colon {
  display: none;
}

.cp-inputs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.cp-inputs-icon svg {
  width: 18px;
  height: 18px;
}

.cp-inputs-class,
.cp-inputs-colon {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.cp-inputs-class {
  margin-left: 4px;
}

.cp-inputs-name {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  outline: none;
}

.cp-inputs-name:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.cp-inputs-name:focus {
  border-color: rgba(255, 255, 255, 0.28);
  background: #1b1b1b;
}

.cp-inputs-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #fff;
  cursor: pointer;
}

.cp-inputs-expand:hover {
  background: #252525;
}

.cp-inputs-expand svg {
  width: 16px;
  height: 16px;
}

/* The angle's whiteboard (whiteboard.js) while no workflow is open. */
.cp-detail-board {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* A workflow's inputs over the board: the form takes what it needs (up to
   about half the pane, then scrolls) and the board the rest. */
.creative-preview-detail.is-stacked > .cp-detail-wf {
  flex: 0 1 auto;
  max-height: 55%;
}

/* Dragged to a height: exactly that (applyInputsHeight keeps it in the
   pane). */
.creative-preview-detail.is-stacked > .cp-detail-wf.is-sized {
  flex-grow: 0;
  flex-shrink: 0;
  max-height: none;
}

.creative-preview-detail.is-stacked > .cp-detail-board {
  border-top: 1px solid var(--border);
}

/* The handle sits on the board's top border. */
.cp-stack-resize {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: 12px;
  margin: 0 0 -12px;
  top: -6px;
  cursor: row-resize;
  touch-action: none;
}

.cp-stack-resize::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  border-radius: 1px;
  background: transparent;
}

.cp-stack-resize:hover::after,
body.is-stack-resizing .cp-stack-resize::after {
  background: #656565;
}

body.is-stack-resizing,
body.is-stack-resizing * {
  cursor: row-resize !important;
  user-select: none !important;
}

.cp-detail-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.cp-detail-empty svg {
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
  opacity: 0.6;
}

.cp-detail-empty strong {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* The gutter's width handle, repeated on the screen's left edge (the
   gutter's own sits under it). */
.pg-drawer-rail-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  z-index: 3;
  width: 12px;
  cursor: col-resize;
  touch-action: none;
}

.pg-drawer-rail-resize::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  border-radius: 1px;
  background: transparent;
}

.pg-drawer-rail-resize:hover::after,
body.is-rail-resizing .pg-drawer-rail-resize::after {
  background: #656565;
}

/* Split, the chevron points at the pane and doesn't turn. */
.creative-preview.is-drawer.is-split .feat-asset-row.is-expanded .feat-asset-expand svg {
  transform: none;
}

/* The picked workflow: marked instead of opening under itself. */
.creative-preview.is-drawer.is-split .feat-asset-row.is-expanded {
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.55);
  background: #252525;
}

@media (prefers-reduced-motion: reduce) {
  .creative-preview.is-drawer .creative-preview-sheet,
  .creative-preview.is-drawer .creative-preview-backdrop {
    animation: none;
  }
}

/* Delete while a row drags in the draft screen: above it, centred under the
   draft's list (the board sets left). */
.pg-v3-trash.is-over-drawer {
  position: fixed;
  z-index: 1900;
}

/* A draft row while it drags: the ghost follows the pointer, the row dims. */
.pg-ghost-angle-draft .pg-angle-draft {
  background: #232327;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Several drafts dragged together: a stacked card with how many. */
.pg-ghost-angle-draft.is-stack .pg-angle-draft {
  box-shadow: 4px 4px 0 -1px rgba(36, 36, 40, 0.96), 4px 4px 0 0 rgba(255, 255, 255, 0.12), 0 10px 28px rgba(0, 0, 0, 0.45);
}

.pg-ghost-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #3498db;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.pg-angle-draft.is-lifted {
  opacity: 0.35;
}

/* Drawer rows: "Type: name", type in grey (as on the old planning cards). */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-title {
  display: flex;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  /* The board's text size and weight (its draft rows). */
  font-size: 0.86rem;
  font-weight: 500;
}

/* The class opens the workflow (not renamed here). */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-title .feat-asset-type {
  flex: 0 0 auto;
  width: auto;
  color: var(--text-muted);
  cursor: pointer;
}

/* A little less room between the icon and the class. */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row .feat-asset-kind {
  width: 22px;
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-colon {
  flex: 0 0 auto;
  margin-right: 5px;
  color: var(--text-muted);
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-label.is-empty {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Drawer rows: 30% taller (42px → 55px). */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row:not(.is-separator) {
  min-height: 40px;
  box-sizing: border-box;
}

/* The chevron at the end of a drawer row; it flips while expanded. */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-expand {
  margin-left: auto;
  color: var(--text-muted);
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-expand svg {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row.is-expanded .feat-asset-expand svg {
  transform: rotate(180deg);
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row.is-expanded {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* The expanded workflow: the workflow editor's canvas, embedded under its row
   (take-workflow.js .is-embedded). */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-canvas {
  flex: 0 0 auto;
  margin-top: -4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

/* Embedded, the workflow fits the width and its height follows the graph
   (take-workflow.js sizes .tb-canvas); nothing scrolls. */
.take-workflow.is-embedded {
  position: relative !important;
  inset: auto !important;
  z-index: auto;
  width: 100%;
  height: auto;
  padding: 0;
}

.take-workflow.is-embedded .take-workflow-sheet,
.take-workflow.is-embedded .take-workflow-body {
  height: auto;
}

.take-workflow.is-embedded .tb-canvas {
  overflow: hidden;
}

.take-workflow.is-embedded .tb-zoom-space {
  min-width: 0;
  min-height: 0;
}

.take-workflow.is-embedded .take-workflow-head,
.take-workflow.is-embedded .take-workflow-backdrop {
  display: none !important;
}

.take-workflow.is-embedded .take-workflow-sheet {
  width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Filling the draft screen's pane (take-workflow.js opts.fill): the whole
   pane, and the canvas scrolls like the full editor's. */
.take-workflow.is-embedded.is-fill {
  height: 100%;
}

.take-workflow.is-embedded.is-fill .take-workflow-sheet,
.take-workflow.is-embedded.is-fill .take-workflow-body {
  height: 100%;
  min-height: 0;
}

.take-workflow.is-embedded.is-fill .take-workflow-body {
  display: flex;
  flex-direction: column;
}

.take-workflow.is-embedded.is-fill .tb-canvas {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: auto;
}

/* Filling the pane, the editor keeps its header (icon, "Class: name" to
   rename, settings, close) above the lanes and canvas. */
.take-workflow.is-embedded.is-fill .take-workflow-head {
  display: flex !important;
  flex: 0 0 auto;
  /* In place, not pinned over the app's top bar like the full editor's. */
  position: static;
  height: auto;
  min-height: 42px;
  padding: 6px 8px 6px 12px;
  border-bottom: 1px solid var(--border);
}

.take-workflow.is-embedded.is-fill .take-workflow-sheet {
  display: flex;
  flex-direction: column;
}

.take-workflow.is-embedded.is-fill .take-workflow-body {
  flex: 1 1 auto;
  height: auto;
}

/* There, Expand (full screen) replaces settings and close. */
.take-workflow.is-embedded.is-fill .take-workflow-head [data-tb-close] {
  display: none;
}

/* The draft screen's rows pick their workflow anywhere on the row. */
.creative-preview.is-drawer.is-split .feat-asset-row.is-workflow,
.creative-preview.is-drawer.is-split .feat-asset-row.is-workflow .feat-asset-label {
  cursor: pointer;
}

/* The lanes get their own strip above the canvas instead of floating over
   the nodes. */
.take-workflow.is-embedded.is-fill .tb-lanes {
  position: static;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-solid);
  pointer-events: auto;
}

.take-workflow.is-embedded.is-fill .tb-zoom-space {
  min-width: 100%;
  min-height: 100%;
}

/* A workflow with inputs expands to its fields instead of the canvas. */
/* Near black, so it reads as the place to write. */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-canvas.is-inputs {
  padding: 12px 14px 14px;
  background: #0b0b0c var(--tile-well) repeat;
}

/* Laid out like the old board's inputs mode (.pg-script.is-grid). */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-inputs {
  margin: 0;
  padding: 0;
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-inputs button.pg-script-add {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.74rem;
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-inputs .pg-media-cell {
  position: relative;
}

/* Workflow settings (gear left of minimise, take-workflow.js): the popup
   hangs under the gear, right-aligned. */
.tb-wf-settings {
  position: relative;
  display: inline-flex;
}

.tb-wf-settings[hidden] {
  display: none;
}

.tb-wf-settings-pop {
  z-index: 20;
  text-align: left;
}

/* Node details in the drawer: the popup takes the whole expanded area (the
   canvas and lanes hide) and grows with its content; × returns to the
   canvas. One line: the node's name, then its options (no model id). */
.take-workflow.is-embedded .tb-pop-head {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 8px;
}

.take-workflow.is-embedded .tb-pop-title {
  grid-column: 1;
  grid-row: 1;
}

.take-workflow.is-embedded .tb-pop-kicker {
  display: none;
}

.take-workflow.is-embedded .tb-pop-head-actions {
  grid-column: 2;
  grid-row: 1;
}

.take-workflow.is-embedded:has(.tb-pop:not([hidden])) .take-workflow-body,
.take-workflow.is-embedded:has(.tb-pop:not([hidden])) .take-workflow-status {
  display: none;
}

.take-workflow.is-embedded .tb-pop {
  position: static;
  display: block;
  padding: 0;
}

.take-workflow.is-embedded .tb-pop-scrim {
  display: none;
}

.take-workflow.is-embedded .tb-pop-card {
  width: 100%;
  height: auto;
  min-height: 480px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Filling the draft screen's pane, node details take exactly the pane's
   height; their columns scroll inside, as in the full editor. */
.take-workflow.is-embedded.is-fill .tb-pop {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.take-workflow.is-embedded.is-fill .tb-pop-card {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
}

/* The composition's warning on the drawer's Composition row, at the row's
   end (lined up with the workflow rows' chevrons). */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row.is-composition .feat-asset-warn {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 22px;
  justify-content: center;
  margin: 0 3px 0 auto;
}

/* A draft without a composition: the compositions to pick from
   (creative-preview.js noCompositionHtml), as rows like the one they make. */
.creative-preview .feat-asset-row.is-composition.is-pick {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
}

.creative-preview .feat-asset-list.is-picking .feat-asset-row.is-pick {
  opacity: 0.6;
  pointer-events: none;
}

/* No composition class yet: "Composition" in grey, as on the old cards. */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row.is-composition .feat-asset-name.is-empty {
  color: var(--text-muted);
}

/* As on the old cards: a composition's class (and its colon) is blue, like
   its icon. */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row.is-composition .feat-asset-type,
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row.is-composition .feat-asset-colon {
  color: #3498db;
}

/* The class's icon and name live in workflow settings (take-workflow.js
   placeClassControls); the header keeps the workflow's own name. */
.take-workflow.has-class-settings .take-workflow-head .take-workflow-colon {
  display: none;
}

/* Just the glyph in muted grey, like the draft list's row icons (a size up
   for the header); no box. */
.take-workflow .take-workflow-head .take-workflow-head-icon {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}

.take-workflow .take-workflow-head .take-workflow-head-icon svg {
  width: 18px;
  height: 18px;
}

.tb-wf-class-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
}

.tb-wf-class-row .take-workflow-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.tb-wf-class-row .take-workflow-icon svg {
  width: 15px;
  height: 15px;
}

.take-workflow .tb-wf-class-row .take-workflow-class {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  field-sizing: fixed;
  height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #232323;
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  outline: none;
}

.take-workflow .tb-wf-class-row .take-workflow-class:focus {
  border-color: rgba(255, 255, 255, 0.28);
}

/* Workflow settings: class id and compatible compositions. */
.tb-wf-settings-pop {
  width: 300px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.tb-wf-settings-sep {
  height: 1px;
  margin: 10px 0;
  background: #2c2c2c;
}

.tb-wf-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

.tb-wf-settings-field .take-workflow-field {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-id);
  font-weight: 400;
}

.tb-wf-settings-label {
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

/* Compatible compositions: one field ("Any composition" or the picked
   classes as tags) that opens a short list with a check per class. */
.tb-wf-comps-field {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #232323;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}

.tb-wf-comps-field:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.22);
}

.tb-wf-comps-field[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.tb-wf-comps-field svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.tb-wf-comps-any {
  color: var(--text-muted);
}

.tb-wf-comps-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.tb-wf-comps-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 1px 7px 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip) 20%, #1a1a1a);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-wf-comp-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip);
}

.tb-wf-comps-menu {
  display: flex;
  flex-direction: column;
  max-height: 180px;
  margin-top: 4px;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #141414;
}

.tb-wf-comps-menu[hidden] {
  display: none;
}

.tb-wf-comps-opt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}

.tb-wf-comps-opt:hover {
  background: #222222;
}

.tb-wf-comps-opt.is-any {
  color: var(--text-muted);
}

.tb-wf-comps-opt-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-wf-comps-opt svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-left: auto;
  stroke-width: 3;
  visibility: hidden;
}

.tb-wf-comps-opt.is-on svg {
  visibility: visible;
}

/* "Doesn't fit this composition" (workflow settings, a red warning): before the outputs in
   the drawer, before the slot warning / upload on draft rows. */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row .feat-asset-fit {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 22px;
  justify-content: center;
  margin-left: auto;
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row .feat-asset-fit + .feat-asset-btn {
  margin-left: 0;
}

.pg-angle-draft .pg-fit-warn {
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  min-width: 22px;
  justify-content: center;
  margin-left: auto;
}

.pg-angle-draft .pg-fit-warn + .pg-comp-status,
.pg-angle-draft .pg-fit-warn + .pg-draft-upload {
  margin-left: 4px;
}

/* Doesn't fit this composition: the same warning, in red. */
.pg-comp-status.is-missing.pg-fit-warn,
.pg-comp-status.is-missing.feat-asset-fit {
  color: #f07178;
  background: #2f2022;
  box-shadow: inset 0 0 0 1px rgba(240, 113, 120, 0.4);
}

.tb-wf-settings-error {
  margin-top: 6px;
  color: #f07178;
  font-size: 0.72rem;
  font-weight: 600;
}

.tb-wf-settings-error[hidden] {
  display: none;
}

/* Ids a workflow reads that no other workflow provides: yellow, with a count,
   before the outputs (after the red "doesn't fit"). */
:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row .feat-asset-needs {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 22px;
  justify-content: center;
  margin-left: auto;
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row .feat-asset-fit + .feat-asset-needs {
  margin-left: 4px;
}

:is(.creative-preview.is-drawer, .feat-ghost.is-drawer-ghost) .feat-asset-row .feat-asset-needs + .feat-asset-btn {
  margin-left: 0;
}

/* ---- Gutter (planning-board-next) ---------------------------------------
   Live ads (thumbnail, format in blue, sort metric) when no draft is open;
   compositions or workflows for the open draft otherwise. */

/* The draft drawer starts after the gutter, so the gutter stays usable. */
.creative-preview.is-drawer {
  left: var(--pg-drawer-left, 0px) !important;
}

/* The gutter's header: the sort dropdown (FeatDropdown), a filter button on
   its right. */
/* The persona tracks sit near black (like the well behind an angle's
   drafts); the gutter keeps the lighter panel grey. */
#viewPlanning {
  --pg-draft-fill: #0d0d0d;
  --pg-live-fill: #0d0d0d;
}

#viewPlanning .pg-canvas-wrap,
#viewPlanning #pgCanvas,
#viewPlanning .pg-batch-col,
#viewPlanning .pg-board-loading {
  background: #0d0d0d;
}

/* Tiled, so Arc draws them evenly (see --tile-surface in styles.css). */
#viewPlanning .pg-canvas-wrap,
#viewPlanning #pgCanvas,
#viewPlanning .pg-batch-col,
#viewPlanning .pg-board-loading {
  background: #0d0d0d var(--tile-board) repeat;
}

/* Lines up with the ads under it (8px in from the rail's edges; the
   title already sits 1px in on the right). */
#pgRail .pg-rail-title {
  padding-right: 7px;
  padding-left: 8px;
}

#pgRail .pg-rail-title[hidden] {
  display: none;
}

/* Each view's list starts a little below the divider above it. */
#pgRail #pgRailList {
  padding-top: 10px;
}

.pg-gutter-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.pg-gutter-drop {
  flex: 1 1 auto;
  min-width: 0;
}

.pg-gutter-drop .feat-dropdown-btn {
  width: 100%;
  height: 32px;
  font-size: 0.82rem;
}

.pg-gutter-filter {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #1a1a1a;
  color: var(--text-muted);
  cursor: pointer;
}

.pg-gutter-filter:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}

.pg-gutter-filter svg {
  width: 15px;
  height: 15px;
}

/* A filter is on. */
.pg-gutter-filter.is-on {
  color: #3498db;
  border-color: rgba(52, 152, 219, 0.5);
  background: #142028;
}

/* The filter popover: All, then each persona (its color) with its angles
   indented under it; the pick is tinted blue with a check. */
.pg-gx-filter-pop {
  position: fixed;
  z-index: 3200;
  width: 240px;
  max-height: min(60vh, 440px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
  border-radius: 12px;
  background: #1a1a1a var(--tile-menu) repeat;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.pg-gx-filter-pop[hidden] {
  display: none;
}

.pg-gx-filter-title {
  padding: 4px 8px 6px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Each persona's group (its row and angles) has a colored left edge, as
   on the live ad cards. */
.pg-gx-filter-group {
  margin-top: 6px;
  padding-left: 4px;
  border-left: 2px solid var(--persona);
  border-radius: 2px;
}

.pg-gx-filter-opt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.pg-gx-filter-opt:hover {
  background: #282828;
}

.pg-gx-filter-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-gx-filter-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--text-muted);
}

/* Angles sit under their persona, slightly indented and lighter. */
.pg-gx-filter-opt.is-angle {
  min-height: 26px;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 500;
}

.pg-gx-filter-check {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-left: auto;
  visibility: hidden;
  color: #3498db;
}

.pg-gx-filter-opt.is-active {
  background: #1e2c35;
  color: #fff;
}

.pg-gx-filter-opt.is-active .pg-gx-filter-check {
  visibility: visible;
}

.pg-persona-swatch {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--persona);
}

.pg-gutter-drop .feat-dropdown-btn > svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.pg-gx-caption {
  margin: 10px 4px 6px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pg-gx-caption:first-child {
  margin-top: 4px;
}

.pg-gx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 8px 6px 6px;
  /* Solid (what the old 6% / 3% white came to on the gutter's #101010), so
     cards look the same on a whiteboard. */
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  background: #171717;
  color: #fff;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.pg-gx-item:hover {
  border-color: #363636;
  background: #1c1c1c;
}

/* Ad cards round like the drafts on the board. */
.pg-gx-item.pg-gx-live {
  border-radius: 6px;
}

/* Another version of the workflow above it: the Docs arrow outside, left of
   its pill; its title the change against the main one. */
.pg-gx-child-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding-left: 6px;
}

/* Its change ("Changed Workflow" and icon) reads quieter than a name. */
.pg-gx-child-row .pg-change {
  color: var(--text-muted);
}

.pg-gx-child-row > .pg-gx-item {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

/* A workflow a composition comes with: a plain workflow card under it,
   there to show, not to drag on its own. */
.pg-gx-item.pg-gx-comp-wf,
.pg-gx-item.pg-gx-comp-wf:hover {
  border-color: #1e1e1e;
  background: #171717;
  cursor: default;
}

.pg-gx-item.pg-gx-comp-wf .pg-workflow-icon {
  color: #fff;
}

.pg-gx-item.is-child .pg-gx-title {
  display: flex;
  min-width: 0;
}

.pg-gx-item.is-lifted {
  opacity: 0.35;
}

/* A live ad's video thumbnail, as on the collapsed cards. */
/* As on the collapsed cards: as tall as the title and format. */
.pg-gx-thumb {
  flex: 0 0 auto;
  width: 20px;
  height: 34px;
  overflow: hidden;
  border-radius: 4px;
  background: #252525;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.pg-gx-thumb img,
.pg-gx-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-gx-body {
  flex: 1 1 auto;
  min-width: 0;
}

.pg-gx-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
}

/* The format (composition class): blue, with the clapperboard. */
.pg-gx-format {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  overflow: hidden;
  color: #3498db;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.pg-gx-format span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-gx-format.is-none {
  color: var(--text-muted);
}

.pg-gx-format svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.pg-gx-sub {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.pg-gx-sub.is-fills {
  color: #7bc67e;
}

/* A composition only drafts use (no live ad yet). */
.pg-gx-comp-src {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 4px;
  background: #222d35;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.pg-gx-comp-icon,
.pg-gx-comp-class {
  color: #3498db;
}

/* The clapperboard sits a little closer to the class name. Blue like a
   draft's composition row (creative-preview's .is-composition), in solid
   colours: the draft row's 12% / 28% blue over the gutter's ground. */
.pg-gx-item.pg-gx-comp {
  gap: 8px;
  padding-left: 11px;
  padding-right: 12px;
  border-color: #1a3649;
  background: #142028;
}

.pg-gx-item.pg-gx-comp:hover {
  border-color: #204d6b;
  background: #162835;
}

.pg-gx-comp .pg-gx-title {
  color: #3498db;
}

/* A configuration's change against the format's most used one, after its
   name. */
.pg-gx-comp-diff {
  margin-left: 8px;
  color: var(--text-muted);
}

.pg-gx-comp-diff .pg-change {
  color: var(--text-muted);
}

.pg-gx-wf-class {
  color: var(--text-muted);
}

/* The sort metric, at the row's end. */
.pg-gx-metric {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: #252525;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pg-gx-metric.is-empty {
  color: var(--text-muted);
  font-weight: 400;
}

.pg-gx-ghost {
  z-index: 2000;
}

.pg-gx-ghost .pg-gx-item {
  margin: 0;
  background: #1d1d21;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* A composition's ghost brings the workflows under it, spaced as in the
   gutter. */
.pg-gx-ghost .pg-gx-item + .pg-gx-child-row,
.pg-gx-ghost .pg-gx-child-row + .pg-gx-child-row {
  margin-top: 6px;
}

.pg-gx-ghost .pg-gx-child-row {
  margin-bottom: 0;
}

.pg-gx-child-row.is-lifted {
  opacity: 0.35;
}

/* Drop targets while a gutter row drags. */
.pg-angle.pg-gx-drop {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: -1px;
  background: #1e1e1e;
}

.creative-preview-sheet.pg-gx-drop {
  box-shadow: inset 0 0 0 2px rgba(52, 152, 219, 0.6);
}

/* A live ad's persona: a colored left edge, as on the workflow tabs. */
.pg-gx-live.has-persona {
  border-left: 2px solid var(--persona);
}

/* Workflows grouped by class: a header that folds the class (chevron, icon,
   name, how many), its rows indented under it. Classes the draft already
   has (one per draft) sit last, darker. */
.pg-gx-group {
  margin-bottom: 8px;
}

.pg-gx-group-head {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 2px 0 6px;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

/* A class header in the gutter. */
.pg-gx-group-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 2px 0 6px;
}

.pg-gx-group-row > .pg-gx-group-head {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.pg-gx-group-head:hover {
  color: #fff;
  background: #1a1a1a;
}

.pg-gx-group-head svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.pg-gx-chevron {
  transition: transform 0.15s ease;
}

.pg-gx-group.is-folded .pg-gx-chevron {
  transform: rotate(-90deg);
}

.pg-gx-group-items {
  margin-left: 10px;
}

.pg-gx-group.is-filled .pg-gx-group-head {
  color: rgba(255, 255, 255, 0.32);
}

.pg-gx-group.is-filled .pg-gx-group-head:hover {
  color: rgba(255, 255, 255, 0.6);
}

.pg-gx-group.is-filled .pg-gx-group-items {
  opacity: 0.45;
}

/* Workflow rows: "Type: name", outputs on the right. How it performs
   is the left edge's color, like a live ad's persona edge (planning-board-
   next.js perfTier); grey before it has a number. */
.pg-gx-wf {
  overflow: hidden;
  padding-left: 8px;
  border-left: 2px solid var(--perf, #4a4a4a);
}

.pg-gx-wf.is-perf-great { --perf: #7bc67e; }
.pg-gx-wf.is-perf-good { --perf: #e6b84f; }
.pg-gx-wf.is-perf-fair { --perf: #e0894f; }
.pg-gx-wf.is-perf-poor { --perf: #f07178; }
.pg-gx-wf.is-perf-none { --perf: #4a4a4a; }

.pg-gx-wf:hover {
  border-left-color: var(--perf, #4a4a4a);
}

/* Switching gutter views (live ads, compositions, workflows) fades the new
   one in. */
#pgRailList.is-entering {
  animation: pg-gx-enter 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pg-gx-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* The way out: the same move, reversed. */
@keyframes pg-gx-exit {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  #pgRailList.is-entering,
  .creative-preview.is-drawer.is-split .creative-preview-sheet,
  .creative-preview.is-drawer.is-split.is-closing .creative-preview-sheet,
  .pb-full.pg-wb-screen,
  .pb-full.pg-wb-screen.is-closing {
    animation: none;
  }
}

/* "+ Persona" is a button (the shared styles leave the old "+ Batch" header
   unclickable, a drop target only). */
.pg-batch-col.is-add-batch .pg-batch-name.is-add {
  pointer-events: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 5px 12px 5px 9px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.pg-batch-col.is-add-batch .pg-batch-name.is-add:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: #171717;
  color: #fff;
}

.pg-batch-col.is-add-batch .pg-batch-name.is-add svg {
  width: 14px;
  height: 14px;
}

/* An angle's drafts sit in a near-black, rounded well (a 10px strip when
   the angle is empty). */
.pg-angle .pg-angle-drafts {
  padding: 4px;
  border-radius: 8px;
  background: #0b0b0c;
}

.pg-angle .pg-angle-drafts.is-empty {
  min-height: 5px;
  padding: 0;
  box-sizing: border-box;
}


/* Notes about an angle, under its title row (like a persona's details). */
.pg-angle .pg-angle-details {
  flex: 1 0 100%;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0 0 6px;
  /* In line with the title (its row sits 3px in). */
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: #8e8e93;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.45;
  resize: none;
  outline: none;
  field-sizing: content;
  overflow: hidden;
  cursor: text;
}

.pg-angle .pg-angle-details::placeholder {
  color: #4a4a4c;
}

.pg-angle .pg-angle-details:focus {
  color: #fff;
}

/* Reordering personas: drag a header; a line marks where it lands. */
.pg-batch-col:not(.is-add-batch) > .pg-batch-head {
  cursor: grab;
}

.pg-batch-group.is-draft {
  position: relative;
}

.pg-batch-col.is-col-dragging {
  opacity: 0.45;
}

.pg-col-drop-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  pointer-events: none;
  z-index: 30;
}

body.is-pg-col-dragging,
body.is-pg-col-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

/* A live ad's rows (locked, outside the drawer): "Class: name" like a
   draft's, the class grey; its composition's format in blue. */
.creative-preview .feat-asset-row.is-locked .feat-asset-title {
  display: flex;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.creative-preview .feat-asset-row.is-locked .feat-asset-title .feat-asset-type {
  flex: 0 0 auto;
  width: auto;
  color: var(--text-muted);
}

.creative-preview .feat-asset-row.is-locked .feat-asset-colon {
  flex: 0 0 auto;
  margin-right: 5px;
  color: var(--text-muted);
}

.creative-preview .feat-asset-row.is-locked .feat-asset-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creative-preview .feat-asset-row.is-composition .feat-asset-name.feat-asset-type {
  color: #3498db;
}