/*
 * Tenant command workspace contract.
 * Shared by Studio-adjacent pages that used to render as stacked cards with
 * large preview blanks: Workflow Center, report card builder, feature controls,
 * dashboard/config previews, launch previews, and tenant setup surfaces.
 */

:root {
  --rmc-tcw-gap: clamp(0.6rem, 1vw, 0.9rem);
  --rmc-tcw-rail: clamp(16rem, 20vw, 22rem);
  --rmc-tcw-side: clamp(13.5rem, 15vw, 18rem);
  --rmc-tcw-radius: var(--radius-lg, 14px);
}

[data-rmc-command-workspace],
.reportcard-builder-root,
.feature-control-command,
#workflow-main,
.theme-experience-full-width .theme-experience-page {
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* Audit pass: legacy evidence/report pages frequently kept an inline
   --rmc-report-measure cap. These are work surfaces, so let the shell width
   belong to the table, report, builder, or preview instead of a centered column. */
.cp-evidence-page[data-rmc-operator-evidence-surface],
.cp-evidence-page[data-cp-evidence-surface],
.cp-evidence-page[data-shell-surface],
[data-rmc-command-workspace].container,
[data-rmc-command-workspace].container-lg,
[data-rmc-command-workspace].container-fluid,
[data-rmc-governed-report-builder],
[data-rmc-governed-saved-detail],
[data-rmc-decision-intelligence],
[data-rmc-decision-surface] {
  width: 100%;
  max-width: none !important;
  max-inline-size: none !important;
  min-width: 0;
  margin-inline: 0;
}

[data-rmc-command-workspace] .container,
[data-rmc-command-workspace] .container-fluid,
.reportcard-builder-root .container,
.feature-control-command.container-fluid,
#workflow-main.container-fluid,
.theme-experience-full-width .container,
.theme-experience-full-width .container-fluid {
  max-width: none;
}

/* Theme & Experience standalone surfaces: same canvas-first discipline as
   Studio, but keep the local preview available because this page is itself the
   configuration destination. */
.theme-experience-full-width .theme-experience-page {
  margin-inline: 0;
  padding-inline: clamp(0.5rem, 1vw, 0.9rem);
}

.theme-experience-full-width .theme-experience-grid {
  display: grid;
  grid-template-columns: minmax(min(100%, 24rem), 0.75fr) minmax(0, 1.25fr);
  gap: var(--rmc-tcw-gap);
  align-items: start;
}

.theme-experience-full-width .theme-experience-left,
.theme-experience-full-width .theme-experience-right {
  min-width: 0;
  max-width: 100%;
}

.theme-experience-full-width .theme-experience-left {
  position: sticky;
  top: 0.75rem;
  max-height: min(76vh, 58rem);
  overflow: auto;
  scrollbar-width: thin;
}

.theme-experience-full-width .theme-experience-preview-wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.theme-experience-full-width .theme-experience-preview-wrap .theme-preview-card,
.theme-experience-full-width .theme-experience-preview-wrap .preview-device {
  max-width: 100%;
}

.theme-experience-full-width .theme-experience-preview-wrap .preview-device {
  min-height: clamp(34rem, 68vh, 62rem);
}

.theme-experience-full-width .theme-experience-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 0.65rem;
  border: 1px solid var(--hairline, var(--bs-border-color));
  border-radius: var(--rmc-tcw-radius);
  background: color-mix(in srgb, var(--surface-elevated, var(--bs-body-bg)) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 1199.98px) {
  .theme-experience-full-width .theme-experience-grid {
    grid-template-columns: 1fr;
  }

  .theme-experience-full-width .theme-experience-left {
    position: static;
    max-height: none;
  }
}

.rmc-command-surface {
  border: 1px solid var(--hairline, var(--bs-border-color));
  border-radius: var(--rmc-tcw-radius);
  background: color-mix(in srgb, var(--surface-elevated, var(--bs-body-bg)) 92%, transparent); /* theme-locked-allow: surface-glass-mix */
  box-shadow: var(--shadow-sm, 0 8px 28px rgba(15, 23, 42, 0.08));
  min-width: 0;
}

.rmc-command-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--rmc-tcw-gap);
  align-items: center;
  padding: clamp(0.85rem, 1.4vw, 1.15rem);
  margin-bottom: var(--rmc-tcw-gap);
}

.rmc-command-header h1,
.rmc-command-header h2 {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.rmc-command-header p {
  margin: 0.25rem 0 0;
  color: var(--text-secondary, var(--bs-secondary-color));
  max-width: 80ch;
}

.rmc-command-actions,
.rmc-command-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.rmc-command-strip {
  padding: 0.6rem;
  margin-bottom: var(--rmc-tcw-gap);
  border: 1px solid var(--hairline, var(--bs-border-color));
  border-radius: var(--rmc-tcw-radius);
  background: var(--surface-elevated, var(--bs-body-bg));
}

.rmc-command-workbench {
  display: grid;
  grid-template-columns: minmax(min(100%, 16rem), var(--rmc-tcw-rail)) minmax(0, 1fr);
  gap: var(--rmc-tcw-gap);
  align-items: stretch;
  min-width: 0;
}

.rmc-command-workbench--side {
  grid-template-columns: minmax(min(100%, 16rem), var(--rmc-tcw-rail)) minmax(0, 1fr) minmax(13.5rem, var(--rmc-tcw-side));
}

.rmc-command-panel {
  border: 1px solid var(--hairline, var(--bs-border-color));
  border-radius: var(--rmc-tcw-radius);
  background: var(--surface-elevated, var(--bs-body-bg));
  min-width: 0;
  overflow: hidden;
}

.rmc-command-panel__body {
  padding: clamp(0.85rem, 1.2vw, 1rem);
}

.rmc-command-panel--scroll {
  max-height: min(76vh, 64rem);
  overflow: auto;
  scrollbar-width: thin;
}

.rmc-command-preview {
  min-height: clamp(30rem, 66vh, 54rem);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rmc-command-preview iframe {
  flex: 1 1 auto;
  min-height: clamp(28rem, 62vh, 50rem);
}

.rmc-command-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 0.5rem;
}

.rmc-command-impact {
  border: 1px solid var(--hairline, var(--bs-border-color));
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  background: var(--surface-canvas, var(--bs-tertiary-bg));
  min-width: 0;
}

.rmc-command-impact small {
  display: block;
  color: var(--text-secondary, var(--bs-secondary-color));
  font-size: var(--type-size-caption, 0.78rem);
}

.rmc-command-impact strong {
  display: block;
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  line-height: 1.1;
}

/* ------------------------------------------------------------------ *
 * "Publish guardrail" sidecar — hierarchy lift (page-scoped)          *
 * Safety-critical copy was riding the recessive muted tier; promote   *
 * it into a clear pre-flight card. Scoped to .feature-control-sidecar *
 * so every other .rmc-command-* surface is untouched.                 *
 * ------------------------------------------------------------------ */
.feature-control-sidecar {
  --fcs-primary: var(--brand-primary, var(--school-primary, var(--color-primary-600, #4f46e5)));
  --fcs-accent:  var(--brand-accent, var(--school-accent, #10b981));
}
/* eyebrow -> real badge */
.feature-control-sidecar .rmc-command-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-on-brand, #fff);
  background: linear-gradient(135deg, var(--fcs-primary),
    color-mix(in oklab, var(--fcs-primary) 68%, var(--fcs-accent)));
  padding: 0.36rem 0.6rem;
  border-radius: 7px;
  box-shadow: 0 6px 16px -9px color-mix(in oklab, var(--fcs-primary) 75%, transparent);
}
/* evidence rows -> labelled key : value */
.feature-control-sidecar .rmc-live-preview-contract__evidence strong {
  color: color-mix(in oklab, var(--fcs-primary) var(--rmc-brand-ink-mix, 100%), var(--text-primary));
}
/* impact tiles -> accent rail + AA labels */
.feature-control-sidecar .rmc-command-impact {
  position: relative;
  overflow: hidden;
  padding-left: 0.9rem;
}
.feature-control-sidecar .rmc-command-impact::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--fcs-primary), var(--fcs-accent));
}
.feature-control-sidecar .rmc-command-impact small {
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: var(--type-size-0, 0.72rem);
}
/* change-safety + verify lists -> iconed checklist, off the muted tier */
.feature-control-sidecar ul.text-muted {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  gap: 0.5rem;
}
.feature-control-sidecar ul.text-muted > li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.feature-control-sidecar ul.text-muted > li::before {
  content: "\2713"; /* check mark */
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--fcs-primary);
  font-weight: 800;
}
.feature-control-sidecar .feature-control-sidecar__verify,
.feature-control-sidecar p.text-muted {
  color: var(--text-secondary);
}

.reportcard-builder-root .card,
.feature-control-command .card {
  border-radius: var(--rmc-tcw-radius);
}

.rmc-studio-command-header {
  margin-bottom: var(--rmc-tcw-gap);
}

.reportcard-builder-sidecar,
.feature-control-sidecar {
  align-self: start;
  position: sticky;
  top: 0.75rem;
}

.reportcard-builder-sidecar .btn,
.feature-control-sidecar .btn {
  justify-content: flex-start;
  white-space: normal;
  text-align: left;
}

/* Rollout actions: flow the seven buttons into balanced columns instead of one
   tall full-width stack. When the sidecar drops below the main panel (narrow /
   embedded studio surfaces) it spans the whole canvas, and a single-column
   .d-grid wasted the horizontal space and made the page far longer than needed.
   auto-fit keeps ONE column while the sidecar is a narrow sticky rail and grows
   to 2-4 columns once it is full-width. */
.feature-control-sidecar .d-grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem;
}

/* Clear the "blurred" ghost buttons: btn-outline-secondary rendered as a near
   invisible hairline outline on the pale studio panel. Give them a real (faintly
   brand-tinted) surface, a solid border, AA ink, a brand icon, and a definite
   hover — legible on both light and dark studio shells. Token-only so the theme
   cascade still flips them; no fixed literals. */
.feature-control-sidecar .btn-outline-secondary {
  background: color-mix(in oklab, var(--fcs-primary) 5%, var(--surface-elevated));
  border-color: color-mix(in oklab, var(--fcs-primary) 32%, var(--hairline));
  color: var(--text-primary);
}
.feature-control-sidecar .btn-outline-secondary i {
  color: var(--fcs-primary);
}
.feature-control-sidecar .btn-outline-secondary:hover,
.feature-control-sidecar .btn-outline-secondary:focus-visible {
  background: color-mix(in oklab, var(--fcs-primary) 14%, var(--surface-elevated));
  border-color: var(--fcs-primary);
  color: var(--fcs-primary);
}

.reportcard-builder-root .row.g-3 {
  --bs-gutter-x: var(--rmc-tcw-gap);
  --bs-gutter-y: var(--rmc-tcw-gap);
}

.reportcard-builder-root .builder-scroll-panel {
  max-height: min(38vh, 27rem);
  overflow: auto;
  scrollbar-width: thin;
}

.reportcard-builder-root #live-report-preview {
  height: 100%;
  min-height: clamp(34rem, 70vh, 58rem);
}

.reportcard-builder-root #live-report-preview .card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.reportcard-builder-root .report-preview-shell {
  flex: 1 1 auto;
  min-height: clamp(28rem, 58vh, 48rem);
}

.reportcard-builder-root .report-preview-shell-inner,
.reportcard-builder-root .report-preview-frame {
  min-height: clamp(28rem, 58vh, 48rem) !important;
}

.feature-control-command .feature-control-card {
  box-shadow: none;
  border: 1px solid var(--hairline, var(--bs-border-color)) !important;
}

.feature-control-command .feature-control-main-panel {
  overflow: visible;
}

.feature-control-command .feature-control-header,
.feature-control-command .card-footer {
  background: var(--surface-elevated, var(--bs-body-bg)) !important;
}

.feature-control-command .feature-cat-tabs {
  position: sticky;
  top: var(--rmc-section-nav-top, 0px);
  z-index: 3;
  padding: 0.35rem;
  border: 1px solid var(--hairline, var(--bs-border-color));
  border-radius: var(--rmc-tcw-radius);
  background: var(--surface-elevated, var(--bs-body-bg));
}

/* The card carries Bootstrap's .overflow-hidden, which makes it the scroll container of
   everything inside, so the sticky category tabs pinned to the card and never to the page.
   overflow: clip still rounds the corners but creates no scroll container. */
.feature-control-command .feature-control-card.overflow-hidden {
  overflow: clip !important;
}

/* Feature Control page modifier. The shared --side workbench has THREE tracks
   (rail | main | side) for pages with a left rail; this page has two children, so
   without an override the capability families fell into the 16-22rem rail track and
   the guardrail took the 1fr track (measured: 256px of capability column against 695px
   of guardrail at 1280). The doubled class outranks the !important single-column rule
   in rmc-django-surface-canvas-parity.css, which only applies under the backend canvas.
   Owner decision 2026-10-02: the guardrail is a NARROW rail on the LEFT and the
   capability toggles take the WIDE column on the right. The swap is visual only
   (order on the rail); DOM order is untouched, so assistive tech still reads the
   capability families first. */
.feature-control-command.feature-control-command .rmc-command-workbench.feature-control-workbench {
  --rmc-fc-side: clamp(15rem, 20vw, 20rem);
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 1100px) {
  .feature-control-command.feature-control-command .rmc-command-workbench.feature-control-workbench {
    grid-template-columns: var(--rmc-fc-side) minmax(0, 1fr) !important;
    align-items: start;
  }

  .feature-control-command .feature-control-workbench > .feature-control-sidecar {
    order: -1;
  }

  /* A sticky rail taller than the viewport pins its top and strands everything below the
     fold (the rollout actions), because the page cannot scroll it. Cap it to the space under
     the pinned offset and let it scroll inside itself. */
  .feature-control-command .feature-control-sidecar {
    position: sticky;
    top: var(--rmc-section-nav-top, 0.75rem);
    /* The page scrolls inside #main-content, which is shorter than the window: cap to it. */
    max-height: calc(var(--rmc-tenant-main-h, 100dvh) - 2.5rem);
    overflow-y: auto;
  }
}

/* Below 1100px one column: the toggles first, then the guardrail as a compact
   strip (owner-approved layout, 2026-10-02). */
@media (max-width: 1099.98px) {
  .feature-control-command .feature-control-sidecar {
    order: 1;
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }

  .feature-control-command .feature-control-sidecar > .rmc-command-panel__body {
    border-top: 0 !important;
    border-inline-start: 1px solid var(--hairline, var(--bs-border-color));
  }

  .feature-control-command .feature-control-sidecar > .rmc-command-panel__body:first-child {
    border-inline-start: 0;
  }

  .feature-control-command .feature-control-sidecar .rmc-command-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .feature-control-command .feature-control-sidecar .d-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-control-command .feature-control-sidecar > .rmc-command-panel__body:first-child > p.text-muted {
    display: none;
  }
}

/* Report card builder: the "Preview controls and publish gate" rail moves to the LEFT
   (owner decision 2026-10-02: a guardrail is a narrow left rail), then the style
   controls, then the live preview in the wide track. Visual order only; the doubled
   class outranks the backend-canvas !important two-track rule. Capped to the viewport
   so the bottom of the rail stays reachable while it is sticky. */
@media (min-width: 1200px) {
  .reportcard-builder-root.reportcard-builder-root .rmc-command-workbench.reportcard-builder-workbench {
    grid-template-columns:
      minmax(13.5rem, var(--rmc-tcw-side))
      minmax(min(100%, 16rem), var(--rmc-tcw-rail))
      minmax(0, 1fr) !important;
    align-items: start;
  }

  .reportcard-builder-root .reportcard-builder-workbench > .reportcard-builder-sidecar {
    order: -1;
    /* The page scrolls inside #main-content, which is shorter than the window: cap to it. */
    max-height: calc(var(--rmc-tenant-main-h, 100dvh) - 2.5rem);
    overflow-y: auto;
  }
}

/* A capability label is a sentence, not a column of single words: hold a readable
   measure and break only at word boundaries (the backend canvas sets
   overflow-wrap:anywhere on every .card, which splits words mid-token). */
.feature-control-command .feature-toggle-row > .d-flex {
  min-inline-size: min(22rem, 100%);
}

.feature-control-command .feature-label,
.feature-control-command .feature-desc {
  overflow-wrap: break-word;
  word-break: normal;
}

.feature-control-command .feature-categories-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
}

.feature-control-command .feature-control-well,
.feature-control-command .feature-category-card {
  background: var(--surface-canvas, var(--bs-tertiary-bg)) !important;
}

.feature-control-command .feature-toggle-row {
  border-bottom: 1px solid var(--hairline, var(--bs-border-color));
}

.feature-control-command .feature-toggle-row:last-child {
  border-bottom: 0;
}

.workflow-command-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13.5rem, var(--rmc-tcw-side));
  gap: var(--rmc-tcw-gap);
  align-items: start;
}

.workflow-command-layout__main,
.workflow-command-layout__side {
  min-width: 0;
}

.workflow-command-layout__side {
  position: sticky;
  top: 0.75rem;
  max-height: calc(var(--rmc-tenant-main-h, 100dvh) - 2.5rem);
  overflow-y: auto;
  display: grid;
  gap: var(--rmc-tcw-gap);
}

[data-rmc-command-workspace] > header,
[data-rmc-command-workspace] > p,
[data-rmc-command-workspace] .rmc-command-readable {
  max-width: min(92ch, 100%);
}

[data-rmc-command-workspace="tenant-studio-hub"] [data-rmc-tenant-studio-readiness],
[data-rmc-command-workspace="tenant-lifecycle-command-center"] > .row.g-3 {
  --bs-gutter-x: var(--rmc-tcw-gap);
  --bs-gutter-y: var(--rmc-tcw-gap);
}

@media (min-width: 1200px) {
  [data-rmc-command-workspace="tenant-studio-hub"] [data-rmc-tenant-studio-fast-path] .list-group,
  [data-rmc-command-workspace="tenant-studio-hub"] [data-rmc-tenant-studio-launch-lanes],
  [data-rmc-command-workspace="tenant-launch-fast-path"] .list-group,
  [data-rmc-command-workspace="tenant-provisioning-status"] [data-rmc-provisioning-timeline] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    gap: var(--rmc-tcw-gap);
    border: 0 !important;
  }

  [data-rmc-command-workspace="tenant-studio-hub"] [data-rmc-tenant-studio-fast-path] .list-group > .list-group-item,
  [data-rmc-command-workspace="tenant-studio-hub"] [data-rmc-tenant-studio-launch-lanes] > .list-group-item,
  [data-rmc-command-workspace="tenant-launch-fast-path"] .list-group > .list-group-item,
  [data-rmc-command-workspace="tenant-provisioning-status"] [data-rmc-provisioning-timeline] > .list-group-item {
    border: 1px solid var(--hairline, var(--bs-border-color));
    border-radius: 12px;
  }

  [data-rmc-governed-report-builder] .row.g-4 {
    align-items: stretch;
  }

  [data-rmc-governed-report-builder] .row.g-4 > [class*="col-"] {
    min-width: 0;
  }

  [data-rmc-governed-report-builder] #gr-output {
    min-height: clamp(28rem, 62vh, 54rem);
    max-height: none !important;
  }
}

@media (max-width: 1199.98px) {
  .rmc-command-workbench,
  .rmc-command-workbench--side,
  .workflow-command-layout {
    grid-template-columns: 1fr;
  }

  .reportcard-builder-sidecar,
  .feature-control-sidecar,
  .workflow-command-layout__side {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 767.98px) {
  .rmc-command-header {
    grid-template-columns: 1fr;
  }

  .rmc-command-actions {
    justify-content: flex-start;
  }
}

/* Stage 08 approval: Theme & Experience is a configuration cockpit, not a
   narrow form. Keep preview large, place settings in an inspector, and let
   side content collapse before anything can overlap or leak. */
[data-rmc-command-workspace="theme-experience"],
.theme-experience-full-width [data-rmc-command-workspace="theme-experience"] {
  width: 100%;
  max-width: none !important;
}

[data-rmc-command-workspace="theme-experience"] .rmc-url-input {
  width: min(34rem, 100%);
  max-width: none;
}

[data-rmc-command-workspace="theme-experience"] #theme-colors-form {
  min-width: 0;
}

[data-rmc-command-workspace="theme-experience"] .theme-experience-grid {
  display: grid;
  grid-template-columns: minmax(26rem, 0.85fr) minmax(36rem, 1.75fr);
  gap: var(--rmc-tcw-gap);
  align-items: start;
  max-width: none;
  width: 100%;
}

[data-rmc-command-workspace="theme-experience"] .theme-experience-left,
[data-rmc-command-workspace="theme-experience"] .theme-experience-right,
[data-rmc-command-workspace="theme-experience"] .theme-experience-main,
[data-rmc-command-workspace="theme-experience"] .theme-experience-preview-wrap {
  min-width: 0;
  max-width: none;
}

[data-rmc-command-workspace="theme-experience"] .theme-experience-left {
  position: sticky;
  top: 0.75rem;
  align-self: start;
  max-height: min(76vh, 58rem);
  overflow: auto;
  scrollbar-width: thin;
}

[data-rmc-command-workspace="theme-experience"] .theme-experience-preview-wrap {
  position: sticky;
  top: 0.75rem;
  width: 100%;
  max-width: none !important;
  max-inline-size: none !important;
}

[data-rmc-command-workspace="theme-experience"] .theme-experience-preview-wrap .card,
[data-rmc-command-workspace="theme-experience"] .theme-experience-preview-wrap iframe,
[data-rmc-command-workspace="theme-experience"] .theme-experience-preview-wrap [class*="preview"] {
  max-width: 100%;
  max-inline-size: 100%;
}

[data-rmc-command-workspace="theme-experience"] .theme-experience-preview-wrap iframe,
[data-rmc-command-workspace="theme-experience"] .theme-preview-frame,
[data-rmc-command-workspace="theme-experience"] .preview-device,
[data-rmc-command-workspace="theme-experience"] .rmc-live-preview-contract__frame {
  min-height: clamp(36rem, 72vh, 64rem);
}

[data-rmc-command-workspace="theme-experience"] .theme-experience-form-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--rmc-tcw-gap);
}

[data-rmc-command-workspace="theme-experience"] .theme-experience-form-body > * {
  min-width: 0;
}

[data-rmc-command-workspace="theme-experience"] .theme-experience-actions {
  position: sticky;
  bottom: 0.75rem;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.75rem;
  border: 1px solid var(--hairline, var(--bs-border-color));
  border-radius: var(--rmc-tcw-radius);
  background: color-mix(in srgb, var(--surface-elevated, var(--bs-body-bg)) 94%, transparent);
  backdrop-filter: blur(14px);
}

@media (max-width: 1399.98px) {
  [data-rmc-command-workspace="theme-experience"] .theme-experience-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-rmc-command-workspace="theme-experience"] .theme-experience-left,
  [data-rmc-command-workspace="theme-experience"] .theme-experience-preview-wrap {
    position: static;
    max-height: none;
  }
}