/* Campaign builder: new campaign, wizard shell, stepper use and every step (owner: WP2).

   Prefix ts-wz-. Colours, type, space, radii and shadows come from tokens.css only. Shared components
   (cards, callouts, tags, status pills, the stepper, code blocks, buttons, fields) are used as they are;
   this file lays them out for the builder and adds the few pieces it alone needs: section heads, choice
   tiles, the variation card, the sticky action bar and the review. */

/* Focus never hides under the sticky action bar (WCAG 2.4.11) */
html:has(body.ts-wz-page) { scroll-padding-bottom: 104px; }

/* Header: the stepper sits under the title, actions and tabs ------------------------------------- */
.ts-wz-stepper { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--ts-border-subtle); }
.ts-wz-stepper--tabs { margin-top: 0; padding-top: 20px; border-top: 0; }
.ts-wz-stepper .ts-stepper { margin: 0; }
.ts-wz-stepper .ts-step__label { white-space: normal; overflow: visible; line-height: 16px; padding-right: 8px; }
.ts-wz-stepper .ts-stepper a { min-height: 24px; }
.ts-wz-stepper .ts-stepper .is-todo .ts-step__label { font-weight: 500; }

/* Request approval in the header, with its reason when it can't be used yet */
.ts-wz-request { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 12px; }
.ts-wz-request__reason { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-muted); font-weight: 500; text-align: right; }
.ts-wz-request__reason--fix { color: var(--ts-amber-700); font-weight: 600; text-decoration: none; }
.ts-wz-request__reason--fix .bi { color: var(--ts-amber-600); }
.ts-wz-request__reason--fix:hover { color: var(--ts-amber-700); text-decoration: underline; text-underline-offset: 3px; }
.ts-wz-request .btn:disabled { opacity: 0.4; }

/* Above the step: read-only banner and this step's things to fix */
.ts-wz-readonly, .ts-wz-problems { margin-bottom: 24px; max-width: var(--ts-page-narrow); }
.ts-wz-readonly > form { align-self: center; }
@media (max-width: 575.98px) {
  .ts-wz-readonly > form { grid-column: 2; justify-self: start; }
}
.ts-wz-fixlist { margin: 4px 0 0; padding-left: 18px; }
.ts-wz-fixlist li + li { margin-top: 2px; }
.ts-wz-fixlist:has(> li:only-child) { list-style: none; padding-left: 0; }

/* Step layout ------------------------------------------------------------------------------------ */
.ts-wz-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; max-width: var(--ts-page-narrow); margin-bottom: 20px; }
.ts-wz-head__text { flex: 1 1 360px; min-width: 0; }
.ts-wz-head__title { margin: 0; font-size: var(--ts-fs-section); line-height: var(--ts-lh-section); font-weight: 600; letter-spacing: var(--ts-ls-section); }
.ts-wz-head__lede { margin: 4px 0 0; color: var(--ts-text-secondary); max-width: 68ch; }
.ts-wz-head__action { margin: 0; }
.ts-wz-small-screen { display: flex; align-items: center; gap: 8px; margin: -8px 0 16px; font-size: var(--ts-fs-small); color: var(--ts-text-muted); }

.ts-wz-form { max-width: var(--ts-page-narrow); }
.ts-wz-form > fieldset, .ts-wz-main { min-width: 0; }
.ts-wz-stack { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1200px) {
  .ts-wz-form--aside { max-width: none; display: grid; grid-template-columns: minmax(0, var(--ts-page-narrow)) minmax(280px, 320px); gap: 24px; align-items: start; }
  .ts-wz-form--aside > .ts-wz-main { grid-column: 1; grid-row: 1; }
  .ts-wz-form--aside > .ts-wz-dock { grid-column: 1; grid-row: 2; }
  .ts-wz-aside { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--ts-header-h) + 24px); }
}
@media (max-width: 1199.98px) {
  .ts-wz-aside { margin-top: 20px; }
}

/* Section cards ----------------------------------------------------------------------------------- */
.ts-wz-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; padding: 0; border: 0; width: 100%; }
.ts-wz-card__head > div { flex: 1 1 auto; min-width: 0; }
.ts-wz-card__head--icon:not(:has(.ts-wz-card__text)) { align-items: center; }
.ts-wz-card__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--ts-radius-md); background: var(--ts-surface-muted); color: var(--ts-blue-700); font-size: 17px; }
.ts-wz-card__title { display: block; margin: 0; font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; letter-spacing: var(--ts-ls-card); color: var(--ts-text); }
.ts-wz-card__title .ts-count { margin-left: 6px; min-width: 24px; padding: 1px 8px; border-radius: var(--ts-radius-pill); background: var(--ts-blue-900); color: var(--ts-white); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0; vertical-align: 2px; }
.ts-wz-card__text { display: block; margin: 2px 0 0; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
legend.ts-wz-card__head { float: none; display: block; font-size: inherit; }

/* Fields: 20px apart; nothing adds space at the foot of a card, a disclosure or a group */
.ts-wz-field { margin-bottom: 20px; }
/* (Edge-to-edge blocks keep their negative margins: the checklist, the request area and the MVT matrix.) */
:is(.ts-wz, .ts-wz-new) :is(.card-body, .ts-wz-exp, .ts-wz-more__body, .ts-wz-sub__body, .ts-wz-panel__body) > :last-child:not(.ts-wz-checklist, .ts-wz-request-form, .ts-wz-matrix-wrap),
:is(.ts-wz, .ts-wz-new) :is(.card-body, .ts-wz-exp, .ts-wz-more__body, .ts-wz-sub__body, .ts-wz-panel__body) > .ts-wz-row:last-child > :last-child { margin-bottom: 0 !important; }
@media (min-width: 768px) {
  .ts-wz :is(.card-body, .ts-wz-exp, .ts-wz-more__body, .ts-wz-sub__body, .ts-wz-panel__body) > .ts-wz-row:last-child:not(.ts-wz-row--3) > * { margin-bottom: 0 !important; }
}
@media (min-width: 992px) {
  .ts-wz :is(.card-body, .ts-wz-exp, .ts-wz-more__body, .ts-wz-sub__body, .ts-wz-panel__body) > .ts-wz-row--3:last-child > * { margin-bottom: 0 !important; }
}
.ts-wz-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.ts-wz-inline__input { width: 120px; flex: none; }
.ts-wz-inline .form-text { margin: 0; flex: 1 1 220px; }
.ts-wz-field--half { max-width: 420px; }
.ts-wz-field--name { max-width: 420px; margin-bottom: 16px; }
.ts-wz-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.ts-wz-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts-wz-row + .ts-wz-row, .ts-wz-row + .ts-code-field, .ts-wz-row + .form-check { margin-top: 4px; }
.ts-wz-optional { font-weight: 400; color: var(--ts-text-muted); }
.ts-wz-legend-help { margin: -2px 0 12px; }
:is(.ts-wz, .ts-wz-new) fieldset > legend.form-label { float: none; width: auto; padding: 0; margin-bottom: 6px; font-size: var(--ts-fs-body); }
.ts-wz-mono { font-family: var(--ts-font-mono); font-size: 0.93em; }
.ts-wz-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-muted); }
.ts-wz-note .bi { margin-top: 1px; color: var(--ts-slate-400); }
.ts-wz-switch { margin-bottom: 20px; }
.ts-wz-switch .form-text { margin-left: 46px; margin-top: 2px; }
@media (max-width: 767.98px) {
  .ts-wz-row, .ts-wz-row--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .ts-wz-row--3 { grid-template-columns: minmax(0, 1fr); }
}

/* The sticky action bar ------------------------------------------------------------------------------ */
.ts-wz-dock {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 24px; padding: 10px 10px 10px 12px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border-subtle);
  border-radius: var(--ts-radius-md);
  box-shadow: var(--ts-shadow-xs);
  transition: box-shadow var(--ts-dur-2) var(--ts-ease);
}
/* Floating once the person scrolls or edits (wizard-dock controller) */
.ts-wz-dock.is-floating { position: sticky; bottom: 16px; z-index: 20; box-shadow: var(--ts-shadow-lg); }
.ts-wz-dock__spacer { flex: 1 1 auto; }
.ts-wz-dock__back .bi { font-size: 14px; }
.ts-wz-dock--static { position: static; padding: 0; background: transparent; border: 0; box-shadow: none; }
@media (max-width: 575.98px) {
  .ts-wz-dock.is-floating { bottom: 8px; }
  .ts-wz-dock > .btn:not(.ts-wz-dock__back) { flex: 1 1 auto; }
  .ts-wz-dock__spacer { display: none; }
}

/* Open the visual editor: the dialog behind every "Open visual editor" button (_editor_open_modal) -- */
.ts-wz-editor__intro { margin: 0 0 16px; color: var(--ts-text-secondary); }
.ts-wz-editor__problem { margin-bottom: 16px; }

/* Disclosures ------------------------------------------------------------------------------------- */
.ts-wz-more, .ts-wz-sub, .ts-wz-panel, .ts-wz-level__changes, .ts-wz-goal__code { --_chev: var(--ts-text-muted); }
.ts-wz-more > summary, .ts-wz-sub > summary, .ts-wz-panel > summary, .ts-wz-level__changes > summary, .ts-wz-goal__code > summary, .ts-wz-site-pick > summary { list-style: none; cursor: pointer; }
.ts-wz-more > summary::-webkit-details-marker, .ts-wz-sub > summary::-webkit-details-marker, .ts-wz-panel > summary::-webkit-details-marker,
.ts-wz-level__changes > summary::-webkit-details-marker, .ts-wz-goal__code > summary::-webkit-details-marker, .ts-wz-site-pick > summary::-webkit-details-marker { display: none; }
.ts-wz-more__chevron { flex: none; font-size: 11px; color: var(--_chev); transition: transform var(--ts-dur-1) var(--ts-ease); }
details[open] > summary > .ts-wz-more__chevron { transform: rotate(90deg); }
.ts-wz-more__flag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--ts-radius-pill); background: var(--ts-blue-100); color: var(--ts-blue-700); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Rows at the foot of a card (variation Code and Advanced) */
.ts-wz-more { border-top: 1px solid var(--ts-border-subtle); }
.ts-wz-more > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 12px 24px; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-wz-more > summary:hover { background: var(--ts-hover); }
.ts-wz-more:last-child:not([open]) > summary { border-radius: 0 0 var(--ts-radius-lg) var(--ts-radius-lg); }
.ts-wz-more__label { font-weight: 600; color: var(--ts-text); }
.ts-wz-more__hint { color: var(--ts-text-muted); }
.ts-wz-more > summary .ts-wz-more__flag { margin-left: auto; }
.ts-wz-more__body { padding: 8px 24px 20px; }
.ts-wz-more__danger { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--ts-border); }
.ts-wz-more__danger-text { font-size: var(--ts-fs-small); color: var(--ts-text-muted); }

/* Inline disclosures inside a card (custom rules, advanced code) */
.ts-wz-sub { margin-top: 16px; border-radius: var(--ts-radius-md); border: 1px solid var(--ts-border-subtle); background: var(--ts-surface-sunken); }
.ts-wz-sub > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 14px; font-size: var(--ts-fs-small); font-weight: 600; border-radius: var(--ts-radius-md); }
.ts-wz-sub > summary:hover { background: var(--ts-hover); }
.ts-wz-sub > summary .ts-wz-more__flag { margin-left: auto; }
.ts-wz-sub__hint { font-weight: 400; color: var(--ts-text-muted); }
.ts-wz-sub__body { padding: 4px 14px 14px; }
.ts-wz-sub .ts-code-field .form-control.code-editor { background-color: var(--ts-surface); }

/* A whole card that opens (campaign-wide JavaScript, advanced, code to review) */
.ts-wz-panel { overflow: visible; }
.ts-wz-panel > summary { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: var(--ts-radius-lg); }
.ts-wz-panel > summary:hover { background: var(--ts-hover); }
.ts-wz-panel[open] > summary { border-radius: var(--ts-radius-lg) var(--ts-radius-lg) 0 0; }
.ts-wz-panel__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--ts-radius-md); background: var(--ts-surface-muted); color: var(--ts-blue-700); font-size: 17px; }
.ts-wz-panel__titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ts-wz-panel__title { font-weight: 600; font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); letter-spacing: var(--ts-ls-card); }
.ts-wz-panel__text { font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-secondary); }
.ts-wz-panel__chevron { flex: none; color: var(--ts-text-muted); transition: transform var(--ts-dur-1) var(--ts-ease); }
.ts-wz-panel[open] > summary .ts-wz-panel__chevron { transform: rotate(180deg); }
.ts-wz-panel__body { padding: 4px 24px 24px 74px; }
@media (max-width: 575.98px) {
  .ts-wz-panel > summary { padding: 16px; gap: 12px; }
  .ts-wz-panel__body { padding: 4px 16px 20px; }
  .ts-wz-panel > summary > .ts-wz-chip, .ts-wz-panel > summary > .ts-wz-more__flag { display: none; }
}

/* Chips (what a variation changes, review state) ------------------------------------------------ */
.ts-wz-changes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ts-wz-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; white-space: nowrap; padding: 2px 10px; border-radius: var(--ts-radius-pill); background: var(--ts-surface-muted); color: var(--ts-text); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); font-weight: 500; }
.ts-wz-chip .bi { font-size: 13px; color: var(--ts-text-secondary); }
.ts-wz-chip--warn { background: var(--ts-amber-100); color: var(--ts-amber-700); }
.ts-wz-chip--warn .bi { color: var(--ts-amber-600); }
.ts-wz-chip--ok { background: var(--ts-green-50); color: var(--ts-green-700); box-shadow: inset 0 0 0 1px var(--ts-green-200); }
.ts-wz-chip--ok .bi { color: var(--ts-green-600); }
.ts-wz-changes__none { font-size: var(--ts-fs-small); color: var(--ts-text-muted); }

/* Variations --------------------------------------------------------------------------------------- */
.ts-wz-var__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 14px; }
.ts-wz-var__title { margin: 0; font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; letter-spacing: var(--ts-ls-card); min-width: 0; }
.ts-wz-var__title .ts-var { gap: 10px; }
.ts-wz-var__title .ts-var::before { width: 12px; height: 12px; }
.ts-wz-var__share { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-secondary); font-weight: 500; white-space: nowrap; }
.ts-wz-var__share .bi { color: var(--ts-slate-400); }
.ts-wz-var__lede { margin: 0; color: var(--ts-text-secondary); }
.ts-wz-var__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.ts-wz-var__label { font-size: var(--ts-fs-micro); line-height: var(--ts-lh-micro); font-weight: 600; color: var(--ts-text-muted); }
.ts-wz-var__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* A link styled as a button stays usable inside a read-only (disabled) fieldset */
fieldset:disabled a.btn.ts-wz-keep-active { pointer-events: auto; opacity: 1; }
.ts-wz-var--control { background: var(--ts-surface-sunken); }
.ts-wz-var .ts-wz-field + .ts-code-field { margin-top: 4px; }
.ts-wz-control { margin-top: 4px; }
.ts-wz-exp { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ts-border-subtle); }

/* Choice tiles: library pages, audiences, an experience's audiences ------------------------------- */
.ts-wz-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ts-wz-choice { position: relative; min-width: 0; }
.ts-wz-choice__input { position: absolute; top: 14px; left: 14px; margin: 0; z-index: 1; }
.form-check-input.ts-wz-choice__input { margin: 0; }
.ts-wz-choice__label {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  padding: 12px 14px 12px 42px; border: 1px solid var(--ts-border); border-radius: var(--ts-radius-md);
  background: var(--ts-surface); cursor: pointer;
  transition: border-color var(--ts-dur-1) var(--ts-ease), background-color var(--ts-dur-1) var(--ts-ease), box-shadow var(--ts-dur-1) var(--ts-ease);
}
.ts-wz-choice__label:hover { border-color: var(--ts-slate-400); }
.ts-wz-choice__input:checked + .ts-wz-choice__label { border-color: var(--ts-pink-600); background: var(--ts-pink-50); box-shadow: inset 0 0 0 1px var(--ts-pink-600); }
.ts-wz-choice__input:focus-visible + .ts-wz-choice__label { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
.ts-wz-choice__title { font-weight: 600; color: var(--ts-text); overflow-wrap: anywhere; }
.ts-wz-choice__text { font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-secondary); overflow-wrap: anywhere; }
fieldset:disabled .ts-wz-choice__label { cursor: default; background: var(--ts-surface-sunken); }
fieldset:disabled .ts-wz-choice__label:hover { border-color: var(--ts-border); }

/* Radio tiles (allocation) */
.ts-wz-options { display: flex; flex-direction: column; gap: 10px; }
.ts-wz-option { position: relative; }
.ts-wz-option__input.form-check-input { position: absolute; top: 16px; left: 16px; margin: 0; z-index: 1; }
.ts-wz-option__label {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 46px;
  border: 1px solid var(--ts-border); border-radius: var(--ts-radius-md); background: var(--ts-surface); cursor: pointer;
  transition: border-color var(--ts-dur-1) var(--ts-ease), background-color var(--ts-dur-1) var(--ts-ease), box-shadow var(--ts-dur-1) var(--ts-ease);
}
.ts-wz-option__label:hover { border-color: var(--ts-slate-400); }
.ts-wz-option__input:checked + .ts-wz-option__label { border-color: var(--ts-pink-600); background: var(--ts-pink-50); box-shadow: inset 0 0 0 1px var(--ts-pink-600); }
.ts-wz-option__input:focus-visible + .ts-wz-option__label { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
.ts-wz-option__title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-weight: 600; color: var(--ts-text); }
.ts-wz-option__badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--ts-radius-pill); background: var(--ts-blue-900); color: var(--ts-white); font-size: 11px; font-weight: 600; }
.ts-wz-option__text { font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-secondary); max-width: 70ch; }
fieldset:disabled .ts-wz-option__label { cursor: default; background: var(--ts-surface-sunken); }
.ts-wz-bandit { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--ts-radius-md); background: var(--ts-surface-muted); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-wz-bandit p { margin: 0; }
.ts-wz-bandit .bi { color: var(--ts-blue-700); margin-top: 1px; }

/* Pages and audience -------------------------------------------------------------------------- */
.ts-wz-summary { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--ts-radius-md); background: var(--ts-surface-muted); border: 1px solid var(--ts-info-border); }
.ts-wz-summary__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ts-surface); color: var(--ts-blue-700); font-size: 16px; }
.ts-wz-summary__text { flex: 1 1 auto; margin: 5px 0 0; font-size: 15px; line-height: 22px; color: var(--ts-text); }
.ts-wz-summary__text strong { font-weight: 600; }
.ts-wz-summary__tag { flex: none; margin-top: 6px; font-size: var(--ts-fs-micro); line-height: var(--ts-lh-micro); font-weight: 600; color: var(--ts-text-muted); }
.ts-wz-rules { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 4px 0 16px; padding: 0; font-size: var(--ts-fs-small); }
.ts-wz-rules li { display: flex; align-items: baseline; gap: 10px; }
.ts-wz-rules__kind { flex: none; min-width: 64px; font-weight: 600; color: var(--ts-green-700); }
.ts-wz-rules__never .ts-wz-rules__kind { color: var(--ts-red-700); }

/* Goals ---------------------------------------------------------------------------------------- */
.ts-wz-goals { display: flex; flex-direction: column; gap: 10px; }
.ts-wz-goals:has(> :not([hidden])) { margin-bottom: 14px; }
.ts-wz-goal, .ts-wz-goal__main { display: flex; align-items: center; gap: 8px; }
.ts-wz-goal__pick { flex: 1 1 auto; max-width: 480px; min-width: 0; }
.ts-wz-goal__remove { flex: none; color: var(--ts-text-muted); }
.ts-wz-goal__remove:hover { color: var(--ts-text); }
.ts-wz-goal--guardrail { display: block; padding: 14px 16px; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-md); background: var(--ts-surface-sunken); }
.ts-wz-goal__rule { margin: 10px 0 0; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-secondary); max-width: 72ch; }
.ts-wz-goal__rule strong { color: var(--ts-text); font-weight: 600; }
.ts-wz-goal__code { margin-top: 8px; }
.ts-wz-goal__code > summary { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ts-fs-small); font-weight: 600; color: var(--ts-text); border-radius: var(--ts-radius-sm); }
.ts-wz-goal__code > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.ts-wz-goal__code[open] > summary { margin-bottom: 10px; }
.ts-wz-goal__code .form-control { background-color: var(--ts-surface); }
.ts-wz-goals__empty { margin: 0 0 14px; font-size: var(--ts-fs-small); color: var(--ts-text-muted); }

/* Factors (multivariate) ------------------------------------------------------------------------ */
.ts-wz-factor__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ts-wz-factor__num { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ts-blue-900); color: var(--ts-white); font-size: 13px; font-weight: 600; }
.ts-wz-factor__title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; overflow-wrap: anywhere; }
.ts-wz-factor__remove { margin: 0; font-size: var(--ts-fs-small); }
.ts-wz-factor__hint { margin: -6px 0 16px; font-size: var(--ts-fs-small); color: var(--ts-text-secondary); }
.ts-wz-factor--new { background: transparent; border-style: dashed; border-color: var(--ts-sand-400); box-shadow: none; }
.ts-wz-factor--new .ts-wz-factor__num { background: var(--ts-surface-muted); color: var(--ts-blue-700); }
.ts-wz-levels { margin-top: 4px; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-md); overflow: hidden; }
.ts-wz-levels__title { margin: 0; padding: 8px 14px; background: var(--ts-surface-sunken); border-bottom: 1px solid var(--ts-border-subtle); font-size: var(--ts-fs-micro); line-height: var(--ts-lh-micro); font-weight: 600; color: var(--ts-text-secondary); }
.ts-wz-level { padding: 10px 14px; }
.ts-wz-level + .ts-wz-level { border-top: 1px solid var(--ts-border-subtle); }
.ts-wz-level__row { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 170px) 84px; align-items: center; gap: 10px; }
.ts-wz-level__badge { justify-self: start; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--ts-radius-pill); background: var(--ts-surface-muted); color: var(--ts-text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ts-wz-level--base .ts-wz-level__badge { background: var(--ts-blue-100); color: var(--ts-blue-700); }
.ts-wz-level--new { background: var(--ts-surface-sunken); }
.ts-wz-level--new .ts-wz-level__badge { background: transparent; box-shadow: inset 0 0 0 1px var(--ts-border); }
.ts-wz-level__remove { margin: 0; font-size: var(--ts-fs-small); white-space: nowrap; }
.ts-wz-level__note { margin: 6px 0 0 86px; font-size: var(--ts-fs-small); color: var(--ts-text-muted); }
.ts-wz-level__changes { margin: 8px 0 0 86px; }
.ts-wz-level__changes > summary { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ts-fs-small); font-weight: 600; color: var(--ts-text); border-radius: var(--ts-radius-sm); }
.ts-wz-level__changes > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.ts-wz-level__changes[open] > summary { margin-bottom: 10px; }
@media (max-width: 767.98px) {
  .ts-wz-level__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ts-wz-level__badge { grid-column: 1 / -1; }
  .ts-wz-level__note, .ts-wz-level__changes { margin-left: 0; }
}
.ts-wz-combos { margin-top: 24px; max-width: var(--ts-page-narrow); }
.ts-wz-combos__warn { margin-bottom: 16px; }
.ts-wz-matrix-wrap { margin: 0 -24px -20px; border-top: 1px solid var(--ts-border-subtle); }
.ts-wz-matrix { margin: 0; }
.ts-wz-matrix th[scope="row"] { font-weight: 600; white-space: nowrap; }
.ts-wz-matrix__control > * { background: var(--ts-surface-sunken); }
.ts-wz-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--ts-radius-pill); background: var(--ts-pink-50); box-shadow: inset 0 0 0 1px var(--ts-pink-200); font-size: var(--ts-fs-small); font-weight: 500; white-space: nowrap; }
.ts-wz-pill--base { background: transparent; box-shadow: inset 0 0 0 1px var(--ts-border); color: var(--ts-text-secondary); }

/* Traffic and schedule ------------------------------------------------------------------------- */
.ts-wz-traffic { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.ts-wz-traffic__input { width: 148px; flex: none; }
.ts-wz-traffic__input .form-control { font-size: 18px; font-weight: 600; text-align: right; }
.ts-wz-traffic__text { flex: 1 1 280px; margin: 0; color: var(--ts-text-secondary); }
.ts-wz-split { margin: 0; }
.ts-wz-card .ts-wz-split > :not(caption) > * > *:first-child { padding-left: 0; }
.ts-wz-card .ts-wz-split > :not(caption) > * > *:last-child { padding-right: 0; }
.ts-wz-split > thead > tr > th { background: transparent; }
.ts-wz-split th[scope="row"] { font-weight: 600; }
.ts-wz-split th[scope="row"] .ts-tag { margin-left: 6px; }
.ts-wz-split__weight { width: 110px; }
.ts-wz-split td.num { color: var(--ts-text-secondary); font-weight: 500; }

/* Preview -------------------------------------------------------------------------------------------- */
.ts-wz-previews { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-md); }
.ts-wz-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
.ts-wz-preview + .ts-wz-preview { border-top: 1px solid var(--ts-border-subtle); }
.ts-wz-preview__name { flex: 1 1 200px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.ts-wz-preview__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-wz-qa { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.ts-wz-qa > .ts-wz-card__head { flex: 1 1 360px; margin-bottom: 0; }

/* Review and launch -------------------------------------------------------------------------------- */
.ts-wz-state { --_accent: var(--ts-slate-300); box-shadow: inset 4px 0 0 var(--_accent), var(--ts-shadow-xs); }
.ts-wz-state--live { --_accent: var(--ts-green-600); }
.ts-wz-state--scheduled { --_accent: var(--ts-sky-600); }
.ts-wz-state--paused { --_accent: var(--ts-amber-600); }
.ts-wz-state--pending { --_accent: var(--ts-pink-600); }
.ts-wz-state--ended { --_accent: var(--ts-slate-400); }
.ts-wz-state__main { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.ts-wz-state__titles { flex: 1 1 380px; min-width: 0; }
.ts-wz-state__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.2px; }
.ts-wz-state__text { margin: 4px 0 0; color: var(--ts-text-secondary); max-width: 72ch; }
.ts-wz-state__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-wz-quote { margin: 12px 0 0; padding: 8px 14px; border-left: 3px solid var(--ts-pink-200); background: var(--ts-surface-sunken); border-radius: 0 var(--ts-radius-sm) var(--ts-radius-sm) 0; color: var(--ts-text); font-style: italic; }

.ts-wz-check__count { flex: none; align-self: center; min-width: 52px; padding: 4px 10px; border-radius: var(--ts-radius-pill); background: var(--ts-amber-100); color: var(--ts-amber-700); font-family: var(--ts-font-figures); font-weight: 600; text-align: center; }
.ts-wz-check__count.is-ready { background: var(--ts-green-50); color: var(--ts-green-700); box-shadow: inset 0 0 0 1px var(--ts-green-200); }
.ts-wz-checklist { list-style: none; margin: 0 -24px -20px; padding: 0; border-top: 1px solid var(--ts-border-subtle); }
.ts-wz-checkrow { display: grid; grid-template-columns: 20px minmax(120px, 190px) minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 14px 24px; }
.ts-wz-checkrow + .ts-wz-checkrow { border-top: 1px solid var(--ts-border-subtle); }
.ts-wz-checkrow__icon { font-size: 17px; line-height: 20px; }
.ts-wz-checkrow.is-ready .ts-wz-checkrow__icon { color: var(--ts-green-600); }
.ts-wz-checkrow.is-attention { background: var(--ts-amber-50); }
.ts-wz-checkrow.is-attention .ts-wz-checkrow__icon { color: var(--ts-amber-600); }
.ts-wz-checkrow:last-child { border-radius: 0 0 var(--ts-radius-lg) var(--ts-radius-lg); }
.ts-wz-checkrow__step { font-weight: 600; color: var(--ts-text); text-decoration: none; }
.ts-wz-checkrow__step:hover { color: var(--ts-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.ts-wz-checkrow__detail { min-width: 0; color: var(--ts-text-secondary); overflow-wrap: anywhere; }
.ts-wz-checkrow__issues { margin: 0; padding-left: 18px; color: var(--ts-text); }
.ts-wz-checkrow__issues li + li { margin-top: 4px; }
.ts-wz-checkrow__issues:has(> li:only-child) { list-style: none; padding-left: 0; }
.ts-wz-checkrow__fix { align-self: center; }
@media (max-width: 767.98px) {
  .ts-wz-checkrow { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .ts-wz-checkrow__detail { grid-column: 2 / -1; }
  .ts-wz-checkrow__fix { grid-row: 1; grid-column: 3; }
}

.ts-wz-plan__sentence { margin: 0; font-size: 16px; line-height: 26px; color: var(--ts-text-secondary); max-width: 72ch; }
.ts-wz-plan__sentence strong { color: var(--ts-text); font-weight: 600; }
.ts-wz-request-form { margin: 20px -24px -20px; padding: 20px 24px; border-top: 1px solid var(--ts-border-subtle); background: var(--ts-surface-sunken); border-radius: 0 0 var(--ts-radius-lg) var(--ts-radius-lg); }
.ts-wz-request-form .ts-wz-field { max-width: 640px; margin-bottom: 14px; }
.ts-wz-request-form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.ts-wz-request-form .form-text { margin-top: 10px; }
.ts-wz-role { margin-top: 20px; }
.ts-wz-role > .btn { align-self: center; }

.ts-wz-code { margin: 0 0 14px; }
.ts-wz-code pre { max-height: 360px; }
.ts-wz-review-js { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.ts-wz-review-js .form-text { margin: 0; flex: 1 1 260px; }

.ts-wz-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.ts-wz-history { list-style: none; margin: 0; padding: 0; }
.ts-wz-history__item { position: relative; padding: 0 0 16px 20px; }
.ts-wz-history__item::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: -8px; width: 2px; background: var(--ts-border-subtle); }
.ts-wz-history__item::after { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ts-surface); box-shadow: inset 0 0 0 2px var(--ts-slate-300); }
.ts-wz-history__item:last-child { padding-bottom: 0; }
.ts-wz-history__item:last-child::before { display: none; }
.ts-wz-history__item--approved::after { box-shadow: inset 0 0 0 5px var(--ts-green-600); }
.ts-wz-history__item--rejected::after { box-shadow: inset 0 0 0 5px var(--ts-red-600); }
.ts-wz-history__item--pending::after { box-shadow: inset 0 0 0 5px var(--ts-pink-600); }
.ts-wz-history__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
.ts-wz-history__when { font-size: var(--ts-fs-small); color: var(--ts-text-muted); }
.ts-wz-history__text { margin: 0; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-secondary); overflow-wrap: anywhere; }
.ts-wz-history__text + .ts-wz-history__text { margin-top: 2px; }
.ts-wz-decision { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--ts-radius-pill); font-size: 12px; font-weight: 600; background: var(--ts-slate-100); color: var(--ts-slate-700); }
.ts-wz-decision--approved { background: var(--ts-green-50); color: var(--ts-green-700); box-shadow: inset 0 0 0 1px var(--ts-green-200); }
.ts-wz-decision--rejected { background: var(--ts-red-50); color: var(--ts-red-700); box-shadow: inset 0 0 0 1px var(--ts-red-200); }
.ts-wz-decision--pending { background: var(--ts-pink-100); color: var(--ts-pink-650); }

.ts-wz-set { margin: -6px 0 14px; font-size: var(--ts-fs-small); color: var(--ts-text-secondary); }
.ts-wz-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 16px; margin-bottom: 16px; }
.ts-wz-sites__item { display: flex; align-items: center; gap: .5rem; min-height: 32px; margin: 0; padding-left: 0; }
/* Bootstrap floats the box into the left padding; in this flex row it sat on top of the site badge. */
.ts-wz-sites__item .form-check-input { float: none; flex: none; margin: 0; }
.ts-wz-sites__item .form-check-label { cursor: pointer; }

.ts-wz-danger { padding: 18px 24px 20px; border: 1px solid var(--ts-red-200); border-radius: var(--ts-radius-lg); background: var(--ts-surface); }
.ts-wz-danger__title { margin: 0 0 12px; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); font-weight: 600; color: var(--ts-red-700); }
.ts-wz-danger__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.ts-wz-danger__row > div { flex: 1 1 280px; }
.ts-wz-danger__name { margin: 0; font-weight: 600; }
.ts-wz-danger__text { margin: 2px 0 0; font-size: var(--ts-fs-small); color: var(--ts-text-secondary); }
.ts-wz-review .ts-wz-dock--static { margin-top: 28px; }

/* Need inspiration? (AI ideas beside Details) ----------------------------------------------------- */
.ts-wz-ai { background: var(--ts-surface-sunken); }
.ts-wz-ai__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ts-wz-ai__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--ts-radius-md); background: var(--ts-blue-100); color: var(--ts-blue-700); font-size: 17px; }
.ts-wz-ai__title { margin: 0; font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; }
.ts-wz-ai__text { margin: 2px 0 0; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-secondary); }
.ts-wz-ai .ts-wz-field { margin-bottom: 14px; }
.ts-wz-ai__note { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--ts-text-muted); }
.ts-wz-ai__results:not(:empty) { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ts-wz-ai__status { margin: 0; font-size: var(--ts-fs-small); color: var(--ts-text-secondary); }
.ts-wz-ai__error { margin: 0; padding: 10px 12px; border-radius: var(--ts-radius-md); background: var(--ts-danger-bg); border: 1px solid var(--ts-danger-border); font-size: var(--ts-fs-small); color: var(--ts-text); }
.ts-wz-idea { padding: 12px 14px; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-md); background: var(--ts-surface); }
.ts-wz-idea__statement { margin: 0 0 8px; font-weight: 600; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-wz-idea__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0 0 8px; font-size: 12px; line-height: 16px; }
.ts-wz-idea__facts dt { font-weight: 600; color: var(--ts-text-muted); }
.ts-wz-idea__facts dd { margin: 0; color: var(--ts-text-secondary); }
.ts-wz-idea__why { margin: 0 0 10px; font-size: 12px; line-height: 16px; color: var(--ts-text-secondary); }

/* New campaign ----------------------------------------------------------------------------------- */
.ts-wz-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767.98px) { .ts-wz-types { grid-template-columns: minmax(0, 1fr); } }
.ts-wz-type { position: relative; min-width: 0; }
.ts-wz-type__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ts-wz-type__card {
  position: relative; display: flex; align-items: flex-start; gap: 14px; height: 100%;
  padding: 16px 44px 16px 16px; border: 1px solid var(--ts-border); border-radius: var(--ts-radius-md);
  background: var(--ts-surface); cursor: pointer;
  transition: border-color var(--ts-dur-1) var(--ts-ease), background-color var(--ts-dur-1) var(--ts-ease), box-shadow var(--ts-dur-1) var(--ts-ease);
}
.ts-wz-type__card:hover { border-color: var(--ts-slate-400); box-shadow: var(--ts-shadow-sm); }
.ts-wz-type__icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: var(--ts-radius-md); background: var(--ts-surface-muted); color: var(--ts-blue-900); font-size: 20px; transition: background-color var(--ts-dur-1) var(--ts-ease), color var(--ts-dur-1) var(--ts-ease); }
.ts-wz-type__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ts-wz-type__title { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ts-text); }
.ts-wz-type__text { font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-secondary); }
.ts-wz-type__hint { color: var(--ts-text); font-weight: 500; }
.ts-wz-type__check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ts-border-control); color: transparent; font-size: 13px; transition: background-color var(--ts-dur-1) var(--ts-ease); }
.ts-wz-type__input:checked + .ts-wz-type__card { border-color: var(--ts-pink-600); background: var(--ts-pink-50); box-shadow: inset 0 0 0 1px var(--ts-pink-600); }
.ts-wz-type__input:checked + .ts-wz-type__card .ts-wz-type__icon { background: var(--ts-pink-600); color: var(--ts-white); }
.ts-wz-type__input:checked + .ts-wz-type__card .ts-wz-type__check { background: var(--ts-pink-600); box-shadow: none; color: var(--ts-white); }
.ts-wz-type__input:focus-visible + .ts-wz-type__card { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
.ts-wz-patch-link {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px;
  border: 1px dashed var(--ts-sand-400); border-radius: var(--ts-radius-md);
  color: var(--ts-text); text-decoration: none; font-weight: 400;
  transition: border-color var(--ts-dur-1) var(--ts-ease), background-color var(--ts-dur-1) var(--ts-ease);
}
.ts-wz-patch-link:hover { border-style: solid; border-color: var(--ts-slate-400); background: var(--ts-hover); color: var(--ts-text); }
.ts-wz-patch-link:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
.ts-wz-patch-link .ts-wz-type__body { flex: 1 1 auto; }
.ts-wz-patch-link__arrow { flex: none; color: var(--ts-text-muted); transition: transform var(--ts-dur-1) var(--ts-ease); }
.ts-wz-patch-link:hover .ts-wz-patch-link__arrow { transform: translateX(3px); color: var(--ts-text); }
.ts-wz-type__icon--patch { background: var(--ts-surface-muted); }
.ts-wz-new .ts-wz-card legend { margin-bottom: 16px; }
.ts-wz-site-fixed { display: flex; align-items: center; min-height: 40px; }
.ts-wz-site-pick > summary { display: inline-flex; align-items: center; gap: 14px; min-height: 40px; border-radius: var(--ts-radius-sm); }
.ts-wz-site-pick__change { font-size: var(--ts-fs-small); font-weight: 600; color: var(--ts-link); text-decoration: underline; text-underline-offset: 3px; }
.ts-wz-site-pick > summary:hover .ts-wz-site-pick__change { color: var(--ts-link-hover); }
.ts-wz-site-pick[open] .ts-wz-site-pick__change { display: none; }
.ts-wz-site-pick .form-select { max-width: 420px; margin-top: 10px; }
.ts-wz-checkrow__warnings { margin-top: 6px; color: var(--ts-text-secondary); list-style: none; padding-left: 0; }

/* Server campaign environments (campaign/_server_environments.html.twig) */
.ts-wz-envs { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ts-wz-envs fieldset { min-width: 0; }
.ts-wz-envs__options { display: flex; flex-wrap: wrap; gap: 4px 16px; }