/* ================================================================
   Resayil — Builder app overlay (rs-builder.css)
   Phase 24.7, Plan 24.7-02
   ----------------------------------------------------------------
   Scope: Builder routes ONLY (3 route_prefixes — see overlays/builder.json).
   Consumes --rs-* tokens from resayil-brand.css. No new custom properties.
   Activation of bento card grid requires rs-builder-bento.js to tag
   list/dashboard containers with data-rs-builder-bento="true".
   Canvas toolbar icon swap (5 kinds) requires rs-builder-toolbar-icons.js
   to tag buttons with data-rs-toolbar-icon="<kind>"; CSS masks overlay
   Tabler SVG fragments on top, hides vendor Lucide/Feather SVG via opacity.
   Depends on: resayil-brand.css (tokens), rs-desk.css (chrome baseline),
   tabler-sprite.svg (Phase 24-01).
   ================================================================ */

/* -----------------------------------------------------------------
   S1 — Typography + baseline inheritance
   Every Builder route inherits the brand sans stack, foreground,
   and subtle bg token so the app reads as "Resayil" regardless of
   where Frappe's default body styles are applied.
   ----------------------------------------------------------------- */
body[data-route^="builder"],
body[data-route^="/builder"],
body[data-route*="builder-"] {
  font-family: var(--rs-font-sans);
  color: var(--rs-fg);
  background: var(--rs-bg);
  line-height: var(--rs-leading-normal);
}

body[data-route^="builder"] h1,
body[data-route^="/builder"] h1,
body[data-route*="builder-"] h1 {
  font-size: var(--rs-text-3xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-4);
}

body[data-route^="builder"] h2,
body[data-route^="/builder"] h2,
body[data-route*="builder-"] h2 {
  font-size: var(--rs-text-2xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-3);
}

/* -----------------------------------------------------------------
   S2 — Surface + card chrome
   Page wrappers pick up brand surface, radius, shadow. Targets both
   Desk-rendered Builder routes (/app/builder-*) and the Vue SPA at
   /builder/*. Avoids :root / html / body (unqualified).
   ----------------------------------------------------------------- */
body[data-route^="builder"] .page-container,
body[data-route^="/builder"] .page-container,
body[data-route*="builder-"] .page-container {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

body[data-route^="builder"] .layout-main-section,
body[data-route^="/builder"] .layout-main-section,
body[data-route*="builder-"] .layout-main-section {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-md);
  box-shadow: var(--rs-shadow-sm);
  padding: var(--rs-space-5);
}

body[data-route^="builder"] .page-head,
body[data-route^="/builder"] .page-head,
body[data-route*="builder-"] .page-head {
  background: var(--rs-surface);
  border-bottom: 1px solid var(--rs-border);
  padding: var(--rs-space-4) var(--rs-space-5);
  margin-bottom: var(--rs-space-5);
}

body[data-route^="builder"] .page-content,
body[data-route^="/builder"] .page-content,
body[data-route*="builder-"] .page-content {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

/* -----------------------------------------------------------------
   S3 — Bento card grid for Builder page dashboard / PageListItem list
   Tagged by rs-builder-bento.js with data-rs-builder-bento="true".
   `!important` on display + grid-template-columns only — Builder Vue
   SPA emits inline style on list containers; we defeat that to land
   bento.
   ----------------------------------------------------------------- */
body[data-route^="builder"] [data-rs-builder-bento],
body[data-route^="/builder"] [data-rs-builder-bento],
body[data-route*="builder-"] [data-rs-builder-bento] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--rs-space-5);
  margin-bottom: var(--rs-space-8);
  padding: var(--rs-space-2) 0;
}

body[data-route^="builder"] [data-rs-builder-bento] > *,
body[data-route^="/builder"] [data-rs-builder-bento] > *,
body[data-route*="builder-"] [data-rs-builder-bento] > * {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-5);
  transition:
    transform var(--rs-duration) var(--rs-ease-brand),
    border-color var(--rs-duration) var(--rs-ease-brand),
    box-shadow var(--rs-duration) var(--rs-ease-brand);
  color: var(--rs-fg);
}

body[data-route^="builder"] [data-rs-builder-bento] > *:hover,
body[data-route^="/builder"] [data-rs-builder-bento] > *:hover,
body[data-route*="builder-"] [data-rs-builder-bento] > *:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-md);
  transform: translateY(-2px);
}

/* Builder-specific page list items (class names from Vue SPA
   PageListItem.vue + PageBuilderDashboard.vue). Give each card
   stand-alone chrome even when not under a bento tagger. */
body[data-route^="builder"] .PageListItem,
body[data-route^="/builder"] .PageListItem,
body[data-route*="builder-"] .PageListItem,
body[data-route^="builder"] .dashboard-page-item,
body[data-route^="/builder"] .dashboard-page-item,
body[data-route*="builder-"] .dashboard-page-item {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
  transition: box-shadow var(--rs-duration) var(--rs-ease-brand);
}

body[data-route^="builder"] .PageListItem:hover,
body[data-route^="/builder"] .PageListItem:hover,
body[data-route*="builder-"] .PageListItem:hover,
body[data-route^="builder"] .dashboard-page-item:hover,
body[data-route^="/builder"] .dashboard-page-item:hover,
body[data-route*="builder-"] .dashboard-page-item:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-md);
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  body[data-route^="builder"] [data-rs-builder-bento],
  body[data-route^="/builder"] [data-rs-builder-bento],
  body[data-route*="builder-"] [data-rs-builder-bento] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--rs-space-4);
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  body[data-route^="builder"] [data-rs-builder-bento],
  body[data-route^="/builder"] [data-rs-builder-bento],
  body[data-route*="builder-"] [data-rs-builder-bento] {
    grid-template-columns: 1fr !important;
    gap: var(--rs-space-3);
  }
}

/* -----------------------------------------------------------------
   S4 — Panel restructure (left + right side panels)
   Targets Vue SPA's builder-left-panel + builder-right-panel wrappers.
   Applies Resayil card language (surface bg, border, shadow, 8pt
   spacing) while preserving vendor DOM structure. Does NOT set
   display: none on any existing panel element — Vue reactivity
   could hit stale DOM. Visual restructure via spacing/color only.
   ----------------------------------------------------------------- */
body[data-route^="builder"] .builder-left-panel,
body[data-route^="/builder"] .builder-left-panel,
body[data-route*="builder-"] .builder-left-panel,
body[data-route^="builder"] [class*="left-panel"],
body[data-route^="/builder"] [class*="left-panel"],
body[data-route*="builder-"] [class*="left-panel"] {
  background: var(--rs-surface);
  border-color: var(--rs-border);
  box-shadow: var(--rs-shadow-sm);
  color: var(--rs-fg);
}

body[data-route^="builder"] .builder-right-panel,
body[data-route^="/builder"] .builder-right-panel,
body[data-route*="builder-"] .builder-right-panel,
body[data-route^="builder"] [class*="right-panel"],
body[data-route^="/builder"] [class*="right-panel"],
body[data-route*="builder-"] [class*="right-panel"] {
  background: var(--rs-surface);
  border-color: var(--rs-border);
  box-shadow: var(--rs-shadow-sm);
  color: var(--rs-fg);
}

/* Section headers inside panels */
body[data-route^="builder"] .builder-left-panel .panel-section-header,
body[data-route^="/builder"] .builder-left-panel .panel-section-header,
body[data-route*="builder-"] .builder-left-panel .panel-section-header,
body[data-route^="builder"] .builder-right-panel .panel-section-header,
body[data-route^="/builder"] .builder-right-panel .panel-section-header,
body[data-route*="builder-"] .builder-right-panel .panel-section-header,
body[data-route^="builder"] [class*="left-panel"] > header,
body[data-route^="/builder"] [class*="left-panel"] > header,
body[data-route*="builder-"] [class*="left-panel"] > header,
body[data-route^="builder"] [class*="right-panel"] > header,
body[data-route^="/builder"] [class*="right-panel"] > header,
body[data-route*="builder-"] [class*="right-panel"] > header {
  font-family: var(--rs-font-sans);
  color: var(--rs-fg);
  font-weight: 600;
  font-size: var(--rs-text-sm);
  padding: var(--rs-space-3) var(--rs-space-4);
  border-bottom: 1px solid var(--rs-border);
  background: var(--rs-surface);
}

/* Tool-group rows / component-list rows inside panels */
body[data-route^="builder"] .builder-left-panel .tool-group-row,
body[data-route^="/builder"] .builder-left-panel .tool-group-row,
body[data-route*="builder-"] .builder-left-panel .tool-group-row,
body[data-route^="builder"] .builder-right-panel .tool-group-row,
body[data-route^="/builder"] .builder-right-panel .tool-group-row,
body[data-route*="builder-"] .builder-right-panel .tool-group-row,
body[data-route^="builder"] [class*="component-list"] > *,
body[data-route^="/builder"] [class*="component-list"] > *,
body[data-route*="builder-"] [class*="component-list"] > * {
  padding: var(--rs-space-2) var(--rs-space-4);
  border-radius: var(--rs-radius-sm);
  transition: background var(--rs-duration-fast) var(--rs-ease);
  color: var(--rs-fg);
}

body[data-route^="builder"] .builder-left-panel .tool-group-row:hover,
body[data-route^="/builder"] .builder-left-panel .tool-group-row:hover,
body[data-route*="builder-"] .builder-left-panel .tool-group-row:hover,
body[data-route^="builder"] .builder-right-panel .tool-group-row:hover,
body[data-route^="/builder"] .builder-right-panel .tool-group-row:hover,
body[data-route*="builder-"] .builder-right-panel .tool-group-row:hover,
body[data-route^="builder"] [class*="component-list"] > *:hover,
body[data-route^="/builder"] [class*="component-list"] > *:hover,
body[data-route*="builder-"] [class*="component-list"] > *:hover {
  background: var(--rs-accent-soft);
}

/* -----------------------------------------------------------------
   S5 — Canvas + toolbar chrome
   Builder toolbar wrapper + button chrome. Scoped to Builder routes.
   Canvas area picks up subtle bg token so edited page stands apart.
   ----------------------------------------------------------------- */
body[data-route^="builder"] .toolbar,
body[data-route^="/builder"] .toolbar,
body[data-route*="builder-"] .toolbar {
  background: var(--rs-surface);
  border-bottom: 1px solid var(--rs-border);
  padding: var(--rs-space-2) var(--rs-space-4);
}

body[data-route^="builder"] .toolbar button,
body[data-route^="/builder"] .toolbar button,
body[data-route*="builder-"] .toolbar button,
body[data-route^="builder"] .toolbar [role="button"],
body[data-route^="/builder"] .toolbar [role="button"],
body[data-route*="builder-"] .toolbar [role="button"] {
  border-radius: var(--rs-radius-sm);
  transition: background var(--rs-duration-fast) var(--rs-ease);
  color: var(--rs-fg);
}

body[data-route^="builder"] .toolbar button:hover,
body[data-route^="/builder"] .toolbar button:hover,
body[data-route*="builder-"] .toolbar button:hover,
body[data-route^="builder"] .toolbar [role="button"]:hover,
body[data-route^="/builder"] .toolbar [role="button"]:hover,
body[data-route*="builder-"] .toolbar [role="button"]:hover {
  background: var(--rs-accent-soft);
}

body[data-route^="builder"] .toolbar button:focus-visible,
body[data-route^="/builder"] .toolbar button:focus-visible,
body[data-route*="builder-"] .toolbar button:focus-visible {
  background: var(--rs-accent-soft);
  outline: 2px solid var(--rs-accent);
  outline-offset: 2px;
}

body[data-route^="builder"] .builder-canvas,
body[data-route^="/builder"] .builder-canvas,
body[data-route*="builder-"] .builder-canvas,
body[data-route^="builder"] [class*="canvas"],
body[data-route^="/builder"] [class*="canvas"],
body[data-route*="builder-"] [class*="canvas"] {
  background: var(--rs-bg-subtle, var(--rs-bg));
}

/* -----------------------------------------------------------------
   S6 — Canvas toolbar Tabler icon masks (5 kinds)
   KEY DIFFERENTIATOR for Plan 24.7-02. For each of 5 known toolbar
   button kinds, overlay a Tabler icon via CSS mask on a ::before
   pseudo-element, and hide the underlying vendor SVG via opacity: 0
   (DOM retained; Vue reactivity preserved). `currentColor` picks up
   each button's text color token so icons inherit theme automatically
   (no explicit dark-mode branch needed).
   ----------------------------------------------------------------- */

/* --- Toolbar icon: Settings --- */
body[data-route^="builder"] [data-rs-toolbar-icon="settings"] > svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="settings"] > svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="settings"] > svg,
body[data-route^="builder"] [data-rs-toolbar-icon="settings"] svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="settings"] svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="settings"] svg {
  opacity: 0;
}
body[data-route^="builder"] [data-rs-toolbar-icon="settings"],
body[data-route^="/builder"] [data-rs-toolbar-icon="settings"],
body[data-route*="builder-"] [data-rs-toolbar-icon="settings"] {
  position: relative;
}
body[data-route^="builder"] [data-rs-toolbar-icon="settings"]::before,
body[data-route^="/builder"] [data-rs-toolbar-icon="settings"]::before,
body[data-route*="builder-"] [data-rs-toolbar-icon="settings"]::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-settings") no-repeat center / contain;
          mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-settings") no-repeat center / contain;
  pointer-events: none;
}

/* --- Toolbar icon: Preview --- */
body[data-route^="builder"] [data-rs-toolbar-icon="preview"] > svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="preview"] > svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="preview"] > svg,
body[data-route^="builder"] [data-rs-toolbar-icon="preview"] svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="preview"] svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="preview"] svg {
  opacity: 0;
}
body[data-route^="builder"] [data-rs-toolbar-icon="preview"],
body[data-route^="/builder"] [data-rs-toolbar-icon="preview"],
body[data-route*="builder-"] [data-rs-toolbar-icon="preview"] {
  position: relative;
}
body[data-route^="builder"] [data-rs-toolbar-icon="preview"]::before,
body[data-route^="/builder"] [data-rs-toolbar-icon="preview"]::before,
body[data-route*="builder-"] [data-rs-toolbar-icon="preview"]::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-player-play") no-repeat center / contain;
          mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-player-play") no-repeat center / contain;
  pointer-events: none;
}

/* --- Toolbar icon: AI (Generate with AI / sparkles) --- */
body[data-route^="builder"] [data-rs-toolbar-icon="ai"] > svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="ai"] > svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="ai"] > svg,
body[data-route^="builder"] [data-rs-toolbar-icon="ai"] svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="ai"] svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="ai"] svg {
  opacity: 0;
}
body[data-route^="builder"] [data-rs-toolbar-icon="ai"],
body[data-route^="/builder"] [data-rs-toolbar-icon="ai"],
body[data-route*="builder-"] [data-rs-toolbar-icon="ai"] {
  position: relative;
  color: var(--rs-accent);
}
body[data-route^="builder"] [data-rs-toolbar-icon="ai"]::before,
body[data-route^="/builder"] [data-rs-toolbar-icon="ai"]::before,
body[data-route*="builder-"] [data-rs-toolbar-icon="ai"]::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-sparkles") no-repeat center / contain;
          mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-sparkles") no-repeat center / contain;
  pointer-events: none;
}

/* --- Toolbar icon: Dark Mode Toggle (moon) --- */
body[data-route^="builder"] [data-rs-toolbar-icon="dark-mode"] > svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="dark-mode"] > svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="dark-mode"] > svg,
body[data-route^="builder"] [data-rs-toolbar-icon="dark-mode"] svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="dark-mode"] svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="dark-mode"] svg {
  opacity: 0;
}
body[data-route^="builder"] [data-rs-toolbar-icon="dark-mode"],
body[data-route^="/builder"] [data-rs-toolbar-icon="dark-mode"],
body[data-route*="builder-"] [data-rs-toolbar-icon="dark-mode"] {
  position: relative;
}
body[data-route^="builder"] [data-rs-toolbar-icon="dark-mode"]::before,
body[data-route^="/builder"] [data-rs-toolbar-icon="dark-mode"]::before,
body[data-route*="builder-"] [data-rs-toolbar-icon="dark-mode"]::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-moon") no-repeat center / contain;
          mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-moon") no-repeat center / contain;
  pointer-events: none;
}

/* --- Toolbar icon: External Link (Open in Browser) --- */
body[data-route^="builder"] [data-rs-toolbar-icon="external-link"] > svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="external-link"] > svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="external-link"] > svg,
body[data-route^="builder"] [data-rs-toolbar-icon="external-link"] svg,
body[data-route^="/builder"] [data-rs-toolbar-icon="external-link"] svg,
body[data-route*="builder-"] [data-rs-toolbar-icon="external-link"] svg {
  opacity: 0;
}
body[data-route^="builder"] [data-rs-toolbar-icon="external-link"],
body[data-route^="/builder"] [data-rs-toolbar-icon="external-link"],
body[data-route*="builder-"] [data-rs-toolbar-icon="external-link"] {
  position: relative;
}
body[data-route^="builder"] [data-rs-toolbar-icon="external-link"]::before,
body[data-route^="/builder"] [data-rs-toolbar-icon="external-link"]::before,
body[data-route*="builder-"] [data-rs-toolbar-icon="external-link"]::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-external-link") no-repeat center / contain;
          mask: url("/assets/erpnext_cli/icons/tabler/tabler-sprite.svg#tabler-external-link") no-repeat center / contain;
  pointer-events: none;
}

/* -----------------------------------------------------------------
   S7 — Accent buttons inside Builder (primary CTA, panel save, etc.)
   ----------------------------------------------------------------- */
body[data-route^="builder"] .btn-primary,
body[data-route^="/builder"] .btn-primary,
body[data-route*="builder-"] .btn-primary {
  background: var(--rs-accent);
  border-color: var(--rs-accent);
  color: #ffffff;
  border-radius: var(--rs-radius);
  transition: background var(--rs-duration) var(--rs-ease);
}

body[data-route^="builder"] .btn-primary:hover,
body[data-route^="/builder"] .btn-primary:hover,
body[data-route*="builder-"] .btn-primary:hover {
  background: var(--rs-accent-hover);
  border-color: var(--rs-accent-hover);
}

/* -----------------------------------------------------------------
   S8 — Dark mode (scoped — inherits tokens from :root[data-theme=dark])
   The --rs-* surface/border tokens re-resolve automatically under the
   dark-theme block defined in resayil-brand.css. We only need to
   adjust the hover shadow which is perceptually weaker in dark mode.
   Icon masks in S6 use `currentColor` so they auto-inherit theme.
   ----------------------------------------------------------------- */
body[data-theme="dark"][data-route^="builder"] [data-rs-builder-bento] > *,
body[data-theme="dark"][data-route^="/builder"] [data-rs-builder-bento] > *,
body[data-theme="dark"][data-route*="builder-"] [data-rs-builder-bento] > * {
  border-color: var(--rs-border);
  background: var(--rs-surface);
}

body[data-theme="dark"][data-route^="builder"] [data-rs-builder-bento] > *:hover,
body[data-theme="dark"][data-route^="/builder"] [data-rs-builder-bento] > *:hover,
body[data-theme="dark"][data-route*="builder-"] [data-rs-builder-bento] > *:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-lg);
}

body[data-theme="dark"][data-route^="builder"] .builder-left-panel,
body[data-theme="dark"][data-route^="/builder"] .builder-left-panel,
body[data-theme="dark"][data-route*="builder-"] .builder-left-panel,
body[data-theme="dark"][data-route^="builder"] .builder-right-panel,
body[data-theme="dark"][data-route^="/builder"] .builder-right-panel,
body[data-theme="dark"][data-route*="builder-"] .builder-right-panel {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

body[data-theme="dark"][data-route^="builder"] .toolbar,
body[data-theme="dark"][data-route^="/builder"] .toolbar,
body[data-theme="dark"][data-route*="builder-"] .toolbar {
  background: var(--rs-surface);
  border-bottom-color: var(--rs-border);
}

/* -----------------------------------------------------------------
   S9 — RTL (Arabic, Hebrew). Apply Arabic font family and swap text
   alignment. Builder is primarily English-content (CONTEXT.md defers
   AR/MS for v2) but users may view in RTL locale — layout must not
   break.
   ----------------------------------------------------------------- */
[dir="rtl"] body[data-route^="builder"] .layout-main-section,
[dir="rtl"] body[data-route^="/builder"] .layout-main-section,
[dir="rtl"] body[data-route*="builder-"] .layout-main-section {
  font-family: var(--rs-font-arabic);
  direction: rtl;
  text-align: right;
}

[dir="rtl"] body[data-route^="builder"] [data-rs-builder-bento] > *,
[dir="rtl"] body[data-route^="/builder"] [data-rs-builder-bento] > *,
[dir="rtl"] body[data-route*="builder-"] [data-rs-builder-bento] > * {
  text-align: right;
}

[dir="rtl"] body[data-route^="builder"] .builder-left-panel,
[dir="rtl"] body[data-route^="/builder"] .builder-left-panel,
[dir="rtl"] body[data-route*="builder-"] .builder-left-panel {
  padding-inline-start: var(--rs-space-3);
  padding-inline-end: var(--rs-space-3);
}

/* -----------------------------------------------------------------
   S10 — Reduced motion: kill transforms/transitions/icon-mask anim
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-route^="builder"] [data-rs-builder-bento] > *,
  body[data-route^="/builder"] [data-rs-builder-bento] > *,
  body[data-route*="builder-"] [data-rs-builder-bento] > *,
  body[data-route^="builder"] .PageListItem,
  body[data-route^="/builder"] .PageListItem,
  body[data-route*="builder-"] .PageListItem,
  body[data-route^="builder"] .toolbar button,
  body[data-route^="/builder"] .toolbar button,
  body[data-route*="builder-"] .toolbar button {
    transition: none;
  }
  body[data-route^="builder"] [data-rs-builder-bento] > *:hover,
  body[data-route^="/builder"] [data-rs-builder-bento] > *:hover,
  body[data-route*="builder-"] [data-rs-builder-bento] > *:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------
   SCOPE GUARDS (Plan 24.7-02)
   This file MUST NOT emit rules matching:
   - :root, html, body (unqualified)
   - body[data-route^="/app"]:not(...builder-*)
   - body[data-route^="/subscribe"] / loyalty / whatsapp / helpdesk / insights
   - Any portal or workspace route outside route_prefixes in
     erpnext_cli/overlays/builder.json
   Enforced by scripts/verify_builder_css_scope.py (Task 4).
   ----------------------------------------------------------------- */