/* ═══════════════════════════════════════════════════════════════
   AgencyOS — modals-v5.css
   One V5 Blue theme for every legacy popup in the app, so no dialog
   still carries the old dark/cyan chrome:
     .modal-backdrop > .modal      (approval, convert, page, brief, build …)
     .modal-overlay  > .modal-box  (single QA check)
     .pd-modal       > .pd-modal-shell (Projects rename / archive / delete)
   The anatomy is the reference .usrModal: dimmed + blurred backdrop, a
   rounded card, a header with a divider, a padded body and (where the
   dialog ends in buttons) a shaded footer bar. Markup and behaviour are
   untouched — presentation only. Tokens: the shared V5 palette (--st-*).
   Not touched here: the Administration / Skills / MCP / Upload popups,
   which already have their own V5 treatment.
   ═══════════════════════════════════════════════════════════════ */

/* ── backdrops ─────────────────────────────────────────────────── */
.modal-backdrop, .modal-overlay, .pd-modal {
  background: rgba(6, 25, 32, .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif);
}
[data-theme="light"] .pd-modal { background: rgba(6, 25, 32, .5); }

/* ── card ──────────────────────────────────────────────────────── */
.modal-backdrop .modal, .modal-overlay .modal-box, .pd-modal .pd-modal-shell {
  box-sizing: border-box; min-width: min(480px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
  padding: 0; overflow: auto;
  border: 1px solid var(--st-line, #cddfe4); border-radius: 18px;
  background: var(--st-surface, #fff); color: var(--st-ink, #17252b);
  box-shadow: 0 30px 80px rgba(6, 25, 32, .35);
  font-size: 14px; line-height: 1.5;
}
.modal-backdrop .modal.nav-review-modal { min-width: min(720px, calc(100vw - 32px)); }
.pd-modal .pd-modal-shell { width: min(480px, 100%); }

/* ── header ────────────────────────────────────────────────────── */
.modal-backdrop .modal-header, .modal-overlay .modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 20px 24px 16px;
  border-bottom: 1px solid var(--st-line, #cddfe4); background: transparent;
}
.modal-backdrop .modal-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.modal-backdrop .modal-check {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--st-primary, #167da0) 12%, var(--st-surface, #fff)) !important;
  border: 0 !important; color: var(--st-primary, #167da0) !important; font-size: 16px; font-weight: 700;
}
.modal-backdrop .modal-title, .modal-overlay .modal-title, .pd-modal .pd-modal-title {
  margin: 0; color: var(--st-ink, #17252b); font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
}
.modal-backdrop .modal-close, .modal-overlay .modal-close {
  display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid var(--st-line, #cddfe4); border-radius: 10px;
  background: var(--st-surface, #fff); color: var(--st-muted, #566a73); font-size: 14px; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.modal-backdrop .modal-close:hover, .modal-overlay .modal-close:hover { border-color: var(--st-primary, #167da0); color: var(--st-primary, #167da0); background: var(--st-surface, #fff); }

/* ── body: everything between header and footer is inset 24px ──── */
.modal-backdrop .modal > :not(.modal-header) { margin-left: 24px; margin-right: 24px; }
.modal-backdrop .modal > .modal-header + * { margin-top: 20px; }
.modal-backdrop .modal > * + :not(.modal-header) { margin-top: 14px; }
.modal-backdrop .modal > :last-child:not(.modal-header) { margin-bottom: 22px; }
.modal-overlay .modal-box > .modal-body { padding: 20px 24px; }
.modal-overlay .modal-box > .modal-footer { margin: 0; padding: 14px 24px; border-top: 1px solid var(--st-line, #cddfe4); background: var(--st-surface-2, #e3f0f3); display: flex; justify-content: flex-end; gap: 10px; }
.modal-backdrop .modal-desc, .modal-backdrop .modal-box .modal-desc { color: var(--st-muted, #566a73); font-size: 14px; line-height: 1.55; margin-top: 20px; }

/* footer bar: a trailing row that holds the dialog's buttons */
.modal-backdrop .modal > div:last-child:has(> button) {
  margin: 20px 0 0 !important; padding: 14px 24px; border-top: 1px solid var(--st-line, #cddfe4); background: var(--st-surface-2, #e3f0f3);
  display: flex !important; justify-content: flex-end; gap: 10px !important; flex-wrap: wrap;
}
.modal-backdrop .modal > div:last-child:has(> button) > button { flex: 0 0 auto !important; width: auto !important; }

/* ── form controls ─────────────────────────────────────────────── */
.modal-backdrop .field-label, .modal-overlay .field-label, .modal-backdrop .nd-field > label, .modal-backdrop .cs-label.field-label {
  display: block; margin: 0 0 8px; color: var(--st-muted, #566a73); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.modal-backdrop .nd-optional, .modal-backdrop .nd-required { margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--st-muted, #566a73); }
.modal-backdrop .nd-required { color: var(--st-primary, #167da0); }
.modal-backdrop .nd-fields, .modal-backdrop .modal-convert-fields { display: grid; gap: 14px; }
.modal-backdrop .nd-field { display: grid; gap: 0; }
.modal-backdrop .nd-input, .modal-backdrop .nd-textarea, .modal-backdrop .rc-textarea, .modal-backdrop .convert-select, .modal-backdrop .rc-type-select,
.modal-overlay .settings-input, .modal-overlay select, .modal-overlay .brief-field-group select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--st-line, #cddfe4); border-radius: 11px;
  background: var(--st-surface-2, #e3f0f3); color: var(--st-ink, #17252b); font: inherit; font-size: 14px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.modal-backdrop .nd-input, .modal-backdrop .convert-select, .modal-backdrop .rc-type-select, .modal-overlay .settings-input, .modal-overlay select { height: 44px; padding: 0 14px; }
.modal-backdrop .nd-textarea, .modal-backdrop .rc-textarea { min-height: 96px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.modal-backdrop select, .modal-overlay select {
  appearance: none; -webkit-appearance: none; padding-right: 38px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667b84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.modal-backdrop .nd-input:focus, .modal-backdrop .nd-textarea:focus, .modal-backdrop .rc-textarea:focus, .modal-backdrop .convert-select:focus,
.modal-backdrop .rc-type-select:focus, .modal-overlay .settings-input:focus, .modal-overlay select:focus {
  border-color: var(--st-primary, #167da0); background-color: var(--st-surface, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary, #167da0) 12%, transparent);
}
.modal-backdrop .rc-type-helper, .modal-backdrop .sm-vr-hint, .modal-backdrop .ap-hint, .modal-backdrop .build-confirm-hint { color: var(--st-muted, #566a73); font-size: 12.5px; line-height: 1.5; }

/* ── summary / info blocks ─────────────────────────────────────── */
.modal-backdrop .page-approve-summary, .modal-backdrop .complete-summary, .modal-backdrop .cv-modal-summary, .modal-backdrop .cs-panel, .modal-backdrop .rc-expected,
.modal-backdrop .build-confirm-stack, .modal-backdrop .cv-modal-stack, .modal-backdrop .cv-modal-route {
  border: 1px solid var(--st-line, #cddfe4); border-radius: 12px; background: var(--st-surface-2, #e3f0f3); padding: 12px 14px;
}
.modal-backdrop .cs-row, .modal-backdrop .cv-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--st-line, #cddfe4); }
.modal-backdrop .cs-row:first-child, .modal-backdrop .cv-summary-row:first-child { border-top: 0; }
.modal-backdrop .cs-label, .modal-backdrop .cv-summary-label, .modal-backdrop .rc-expected-label, .modal-backdrop .complete-summary-title { color: var(--st-muted, #566a73); font-size: 12.5px; font-weight: 600; }
.modal-backdrop .cs-value, .modal-backdrop .cv-summary-value, .modal-backdrop .rc-expected-value { color: var(--st-ink, #17252b); font-size: 13.5px; font-weight: 700; }
.modal-backdrop .cs-green { color: var(--st-teal, #08796f); }
.modal-backdrop .nd-warning, .modal-backdrop .complete-warning, .modal-backdrop .cv-modal-warning {
  padding: 10px 14px; border: 1px solid rgba(217, 154, 31, .4); border-radius: 12px; background: rgba(217, 154, 31, .1); color: #8a5a00; font-size: 13px; line-height: 1.5;
}
:root:not([data-theme="light"]) .modal-backdrop .nd-warning, :root:not([data-theme="light"]) .modal-backdrop .complete-warning,
:root:not([data-theme="light"]) .modal-backdrop .cv-modal-warning { color: #f0b84a; }
.modal-backdrop .sm-modal-error { padding: 10px 14px; border: 1px solid rgba(214, 69, 69, .4); border-radius: 12px; background: rgba(214, 69, 69, .08); color: #d64545; font-size: 13px; }

/* ── option cards (approval → convert / deliver choices) ────────── */
.modal-backdrop .modal-options { display: grid; gap: 10px; }
.modal-backdrop .modal-option {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--st-line, #cddfe4); border-radius: 14px;
  background: var(--st-surface, #fff); color: var(--st-ink, #17252b); text-align: left; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.modal-backdrop .modal-option:hover { border-color: var(--st-primary, #167da0); background: color-mix(in srgb, var(--st-primary, #167da0) 6%, var(--st-surface, #fff)); }
.modal-backdrop .modal-option-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--st-primary, #167da0) 12%, var(--st-surface, #fff)); color: var(--st-primary, #167da0); }
.modal-backdrop .modal-option-title { font-size: 14px; font-weight: 700; }
.modal-backdrop .modal-option-desc { color: var(--st-muted, #566a73); font-size: 12.5px; }
.modal-backdrop .modal-option-arrow { color: var(--st-muted, #566a73); }
.modal-backdrop .cv-scope-row { display: grid; gap: 8px; }
.modal-backdrop .cv-scope-btn { border: 1px solid var(--st-line, #cddfe4); border-radius: 12px; background: var(--st-surface, #fff); color: var(--st-ink, #17252b); }
.modal-backdrop .cv-scope-btn.active { border-color: var(--st-primary, #167da0); background: color-mix(in srgb, var(--st-primary, #167da0) 8%, var(--st-surface, #fff)); }
.modal-backdrop .modal-back { color: var(--st-muted, #566a73); background: transparent; border: 0; font: inherit; font-weight: 600; cursor: pointer; }

/* ── buttons inside dialogs ────────────────────────────────────── */
.modal-backdrop .modal .inline-btn, .modal-backdrop .modal .action-btn, .modal-backdrop .modal .convert-btn, .modal-backdrop .modal .modal-convert-btn,
.modal-backdrop .modal .nav-review-btn, .modal-overlay .modal-box .inline-btn, .modal-overlay .modal-box .action-btn, .pd-modal .pc-btn-back, .pd-modal .pc-btn-next {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid var(--st-line, #cddfe4); border-radius: 9px;
  background: var(--st-surface, #fff); color: var(--st-ink, #17252b); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, filter .15s ease;
}
.modal-backdrop .modal .inline-btn:hover:not(:disabled), .modal-backdrop .modal .action-btn:hover:not(:disabled), .modal-backdrop .modal .nav-review-btn:hover:not(:disabled),
.modal-overlay .modal-box .inline-btn:hover:not(:disabled), .modal-overlay .modal-box .action-btn:hover:not(:disabled), .pd-modal .pc-btn-back:hover { border-color: color-mix(in srgb, var(--st-primary, #167da0) 50%, var(--st-line, #cddfe4)); color: var(--st-primary, #167da0); }
.modal-backdrop .modal .action-btn.primary, .modal-backdrop .modal .convert-btn, .modal-backdrop .modal .modal-convert-btn, .modal-backdrop .modal .nav-review-btn-primary,
.modal-overlay .modal-box .action-btn.primary, .pd-modal .pc-btn-next {
  border-color: transparent; background: linear-gradient(135deg, var(--st-primary, #167da0), var(--st-primary-2, #24aa9f)); color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--st-primary, #167da0) 26%, transparent);
}
:root:not([data-theme="light"]) .modal-backdrop .modal .action-btn.primary, :root:not([data-theme="light"]) .modal-backdrop .modal .convert-btn,
:root:not([data-theme="light"]) .modal-backdrop .modal .modal-convert-btn, :root:not([data-theme="light"]) .modal-backdrop .modal .nav-review-btn-primary,
:root:not([data-theme="light"]) .modal-overlay .modal-box .action-btn.primary, :root:not([data-theme="light"]) .pd-modal .pc-btn-next { color: #061014; }
.modal-backdrop .modal .action-btn.primary:hover:not(:disabled), .modal-backdrop .modal .convert-btn:hover:not(:disabled), .modal-overlay .modal-box .action-btn.primary:hover:not(:disabled) { filter: brightness(1.06); color: inherit; }
.modal-backdrop .modal .inline-btn:disabled, .modal-backdrop .modal .action-btn:disabled, .modal-backdrop .modal .convert-btn:disabled, .pd-modal button:disabled { opacity: .5; cursor: default; }
.modal-backdrop .modal .action-btn.danger, .modal-backdrop .modal .inline-btn.danger, .pd-modal .pc-btn-next.danger { border-color: rgba(214, 69, 69, .5); background: transparent; color: #d64545; box-shadow: none; }

/* ── navigation review (wide, three-column) ────────────────────── */
.modal-backdrop .nav-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.modal-backdrop .nav-review-col { border: 1px solid var(--st-line, #cddfe4); border-radius: 12px; background: var(--st-surface-2, #e3f0f3); padding: 12px 14px; }
.modal-backdrop .nav-review-col-label { color: var(--st-muted, #566a73); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.modal-backdrop .nav-review-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ── projects: rename / archive / delete ───────────────────────── */
.pd-modal .pd-modal-shell { padding: 0; }
.pd-modal .pd-modal-title { padding: 20px 24px 16px; margin: 0; border-bottom: 1px solid var(--st-line, #cddfe4); }
.pd-modal .pd-modal-body { margin: 0; padding: 20px 24px; color: var(--st-muted, #566a73); }
.pd-modal .pd-modal-body input, .pd-modal .pd-modal-body .pc-input {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 1px solid var(--st-line, #cddfe4); border-radius: 11px;
  background: var(--st-surface-2, #e3f0f3); color: var(--st-ink, #17252b); font: inherit; font-size: 14px; outline: none;
}
.pd-modal .pd-modal-body input:focus { border-color: var(--st-primary, #167da0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary, #167da0) 12%, transparent); }
.pd-modal .pd-modal-warning { color: var(--st-muted, #566a73); font-size: 14px; line-height: 1.55; }
.pd-modal .pd-modal-actions { margin: 0; padding: 14px 24px; border-top: 1px solid var(--st-line, #cddfe4); background: var(--st-surface-2, #e3f0f3); }

@media (max-width: 640px) {
  .modal-backdrop .modal, .modal-overlay .modal-box { min-width: 0; width: calc(100vw - 24px) !important; }
  .modal-backdrop .nav-review-grid { grid-template-columns: 1fr; }
}

/* corrections after the first visual pass */
.modal-backdrop .modal-desc { padding-left: 0; padding-right: 0; }
.modal-backdrop .modal > .modal-convert-step { margin-top: 14px; display: grid; gap: 12px; }
.modal-backdrop .modal > .modal-convert-step:last-child { margin-bottom: 22px; }
.modal-backdrop .modal > div.modal-convert-step:last-child:has(> button) { margin: 14px 24px 22px !important; padding: 0; border: 0; background: transparent; display: grid !important; justify-content: stretch; }
.modal-backdrop .modal-close:focus, .modal-overlay .modal-close:focus { outline: none; box-shadow: none; }
.modal-backdrop .modal-close:focus-visible, .modal-overlay .modal-close:focus-visible { outline: 2px solid var(--st-primary, #167da0); outline-offset: 2px; }

/* ── legacy accent variables inside dialogs follow the V5 primary ─ */
.modal-backdrop, .modal-overlay, .pd-modal, .tour-overlay, .iw-modal-backdrop {
  --cyan: var(--st-primary, #167da0);
  --cyan-dim: color-mix(in srgb, var(--st-primary, #167da0) 12%, transparent);
}

/* ── onboarding tour + welcome video (assets/js/onboarding-tour.js, video-onboarding.js) ── */
.tour-overlay { font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif); }
.tour-backdrop { background: rgba(6, 25, 32, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.tour-backdrop-video-welcome { background: rgba(6, 25, 32, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tour-spotlight { border: 2px solid var(--st-primary, #167da0); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(6, 25, 32, .6); }
.tour-card {
  padding: 20px; border: 1px solid var(--st-line, #cddfe4); border-radius: 18px;
  background: var(--st-surface, #fff); color: var(--st-ink, #17252b); box-shadow: 0 30px 80px rgba(6, 25, 32, .35);
}
.tour-card-progress { color: var(--st-primary, #167da0); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.tour-card-title { color: var(--st-ink, #17252b); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tour-card-desc { color: var(--st-muted, #566a73); font-size: 13.5px; line-height: 1.55; }
.tour-card-video-welcome { padding: 28px; }
.tour-card-video-welcome .tour-card-title { font-size: 22px; }
.tour-card-video-wrap, .tour-card-thumb-wrap { border-radius: 14px; border: 1px solid var(--st-line, #cddfe4); }
.tour-card-thumb-play { background: linear-gradient(135deg, var(--st-primary, #167da0), var(--st-primary-2, #24aa9f)); color: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--st-primary, #167da0) 35%, transparent); }
.tour-card-thumb-wrap:focus-visible { outline-color: var(--st-primary, #167da0); }
.tour-card-video-close { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--st-line, #cddfe4); border-radius: 10px; background: var(--st-surface, #fff); color: var(--st-muted, #566a73); }
.tour-card-video-close:hover { border-color: var(--st-primary, #167da0); color: var(--st-primary, #167da0); background: var(--st-surface, #fff); }
.tour-card .action-btn, .tour-card .inline-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid var(--st-line, #cddfe4); border-radius: 9px;
  background: var(--st-surface, #fff); color: var(--st-ink, #17252b); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tour-card .action-btn:hover, .tour-card .inline-btn:hover { border-color: color-mix(in srgb, var(--st-primary, #167da0) 50%, var(--st-line, #cddfe4)); color: var(--st-primary, #167da0); }
.tour-card .action-btn.primary {
  border-color: transparent; background: linear-gradient(135deg, var(--st-primary, #167da0), var(--st-primary-2, #24aa9f)); color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--st-primary, #167da0) 26%, transparent);
}
:root:not([data-theme="light"]) .tour-card .action-btn.primary { color: #061014; }
.tour-card .action-btn.ghost { background: transparent; }

/* ── image workflow dialogs (.iw-modal / quick view) ────────────── */
.iw-modal-backdrop, .iw-qv-backdrop { background: rgba(6, 25, 32, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.iw-modal, .iw-qv-modal {
  border: 1px solid var(--st-line, #cddfe4); border-radius: 18px; background: var(--st-surface, #fff); color: var(--st-ink, #17252b);
  box-shadow: 0 30px 80px rgba(6, 25, 32, .35); overflow: hidden;
}
.iw-modal-header, .iw-qv-header { padding: 18px 24px; border-bottom: 1px solid var(--st-line, #cddfe4); background: transparent; }
.iw-qv-title { font-size: 16px; font-weight: 700; color: var(--st-ink, #17252b); }
.iw-modal-body { padding: 20px 24px; }
.iw-qv-footer { border-top: 1px solid var(--st-line, #cddfe4); background: var(--st-surface-2, #e3f0f3); }
.iw-qv-body { background: color-mix(in srgb, var(--st-ink, #17252b) 92%, #000); }

/* ── theme drawer (right-hand panel) ─────────────────────────────── */
.gtd-drawer { background: var(--st-surface, #fff); border-left: 1px solid var(--st-line, #cddfe4); color: var(--st-ink, #17252b); font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif); }
.gtd-header { padding: 18px 20px; border-bottom: 1px solid var(--st-line, #cddfe4); background: transparent; }
.gtd-title { font-size: 18px; font-weight: 700; color: var(--st-ink, #17252b); }
.gtd-backdrop { background: rgba(6, 25, 32, .35); }

/* Take a Tour — step card glides between targets; the spotlight ring already animates. */
.tour-card[data-step-card] { width: 340px; max-width: calc(100vw - 24px); transition: top .18s ease, left .18s ease; }
.tour-spotlight { transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; }
.tour-progress-bar { height: 3px; border-radius: 3px; background: var(--st-line, #cddfe4); margin: 8px 0 12px; overflow: hidden; }
.tour-progress-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--st-primary, #167da0), var(--st-primary-2, #24aa9f)); transition: width .18s ease; }
.tour-card-title { margin-bottom: 6px; }
.tour-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.tour-card-actions-right { display: flex; gap: 8px; }
@media (max-width: 520px) { .tour-card[data-step-card] { padding: 16px; } .tour-card-title { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .tour-card[data-step-card], .tour-spotlight, .tour-progress-bar span { transition: none; } }
/* Step changes: no card/ring travel across the page. Between steps the card is hidden and the ring collapses (the dim stays); the new step is placed instantly and the card fades in. */
.tour-overlay.tour-between .tour-card[data-step-card] { opacity: 0; transition: none; animation: none; }
.tour-overlay.tour-between .tour-spotlight { width: 0 !important; height: 0 !important; border-width: 0; transition: none; }
.tour-overlay.tour-jump .tour-card[data-step-card], .tour-overlay.tour-jump .tour-spotlight { transition: none; }
.tour-card[data-step-card].tour-fade-in { animation: tourCardIn .16s ease both; }
@keyframes tourCardIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tour-card[data-step-card].tour-fade-in { animation: none; } }

/* While Take a Tour is open, toasts raised by the pages it visits stay out of the way. */
body.tour-open #toast, body.tour-open .toast-container { display: none !important; }