/* Baskibu Designer 0.23.0-dev54 — preview-first viewport + true mobile centering + quiet selection */

/* --------------------------------------------------------------------------
   1) Product-first information hierarchy.
   The product is the hero; repeated technical HUD copy is not.
   -------------------------------------------------------------------------- */
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta.bbd-canvas-hud--top {
  pointer-events:none !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta #bbd-surface-label,
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta .bbd-guide-legend {
  display:none !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta #bbd-size-label {
  pointer-events:auto !important;
  min-height:26px !important;
  padding:4px 8px !important;
  border:1px solid rgba(148,163,184,.20) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.84) !important;
  color:#667085 !important;
  font-size:9px !important;
  font-weight:760 !important;
  box-shadow:0 4px 12px rgba(15,23,42,.035) !important;
  backdrop-filter:blur(10px) !important;
}

/* Quality guidance should read as information, not a permanent orange error. */
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner {
  top:14px !important;
  right:14px !important;
  left:auto !important;
  width:min(420px,calc(100% - 28px)) !important;
  max-width:420px !important;
  padding:8px 9px !important;
  transform:none !important;
  grid-template-columns:auto minmax(0,1fr) auto auto auto !important;
  gap:7px !important;
  border-color:#dbe3ea !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.97) !important;
  color:#5d6979 !important;
  box-shadow:0 10px 28px rgba(15,23,42,.09) !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__icon {
  width:28px !important;
  height:28px !important;
  background:#eef2f6 !important;
  color:#667085 !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__copy strong {
  color:#344054 !important;
  font-size:10.5px !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__copy span {
  color:#7b8798 !important;
  font-size:9px !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner[data-level="error"] {
  border-color:#efc4c0 !important;
  background:rgba(255,248,247,.98) !important;
  color:#8f2d25 !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner[data-level="error"] .bbd-quality-banner__icon {
  background:#fee4e2 !important;
  color:#b42318 !important;
}

/* --------------------------------------------------------------------------
   2) Exactly one ruler owner.
   -------------------------------------------------------------------------- */
.bbd-app.bbd-pro-workspace-v0230-dev54 #bbd-ruler-h,
.bbd-app.bbd-pro-workspace-v0230-dev54 #bbd-ruler-v,
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-dimension-overlay,
.bbd-app.bbd-pro-workspace-v0230-dev54 [data-bbd-dimension-overlay],
.bbd-app.bbd-pro-workspace-v0230-dev54 [data-bbd-clean-rulers]:not(.bbd-v54-ruler-owner) {
  display:none !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v54-ruler-owner {
  pointer-events:none !important;
}

/* --------------------------------------------------------------------------
   3) Preview is a distinct presentation state.
   No edit panels, rulers, guides or object chrome may cover the product.
   -------------------------------------------------------------------------- */
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-sidebar,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-panel,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-stage-meta,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-quality-summary,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-context-route-toolbar,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-object-popover,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-context-more-menu,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-clean-rulers,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v53-rulers,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-warning-layer,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-snap-line,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-canvas-empty,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-stage-footer {
  display:none !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-workspace {
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-stage-area {
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  grid-template-rows:minmax(0,1fr) !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview.bbd-v52-preview-layout {
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:10px !important;
  gap:7px !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview__viewport {
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 auto !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview__three-canvas,
.bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode #bbd-product-preview-canvas {
  width:100% !important;
  height:100% !important;
  margin:0 auto !important;
}

/* --------------------------------------------------------------------------
   4) Quiet object selection.
   Dev54 JS also replaces the legacy orange hover rectangle.
   -------------------------------------------------------------------------- */
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-context-route-toolbar {
  border-color:rgba(148,163,184,.42) !important;
  background:rgba(255,255,255,.95) !important;
  box-shadow:0 9px 24px rgba(15,23,42,.09) !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-context-route-toolbar button.is-active {
  background:#f1f5f9 !important;
  color:#475569 !important;
  box-shadow:inset 0 0 0 1px #d7e0e8 !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-context-route-toolbar .bbd-context-label {
  display:none !important;
}
.bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-context-route-toolbar .bbd-context-label-short {
  display:inline !important;
}

/* --------------------------------------------------------------------------
   5) True mobile workspace.
   The old 56px left rail permanently stole canvas width. On <=760 it becomes
   a bottom app bar so the artboard/preview can use the full viewport width.
   -------------------------------------------------------------------------- */
@media (max-width:760px) {
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-workspace {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
  }

  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar {
    position:absolute !important;
    z-index:120 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:2px !important;
    padding:5px max(6px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    border:0 !important;
    border-top:1px solid rgba(15,23,42,.10) !important;
    background:rgba(255,255,255,.97) !important;
    box-shadow:0 -8px 24px rgba(15,23,42,.08) !important;
    backdrop-filter:blur(16px) !important;
    scrollbar-width:none !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar::-webkit-scrollbar {
    display:none !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar-active-indicator {
    display:none !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar .bbd-tool {
    flex:1 0 55px !important;
    width:auto !important;
    min-width:55px !important;
    min-height:52px !important;
    height:52px !important;
    padding:4px 5px !important;
    gap:3px !important;
    border-radius:10px !important;
    background:transparent !important;
    color:#667085 !important;
    font-size:8px !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar .bbd-tool svg {
    width:19px !important;
    height:19px !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-sidebar .bbd-tool.is-active {
    background:#f2f5f8 !important;
    color:#344054 !important;
    box-shadow:inset 0 0 0 1px #dce3ea !important;
  }

  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-area {
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    padding-bottom:64px !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-canvas-shell {
    width:100% !important;
    min-width:0 !important;
    padding:8px 8px 10px !important;
    overflow:hidden !important;
    justify-content:center !important;
    align-items:center !important;
  }

  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-panel {
    z-index:115 !important;
    left:0 !important;
    right:0 !important;
    bottom:64px !important;
    width:100% !important;
    max-width:none !important;
    max-height:min(46vh,360px) !important;
    padding:10px 12px 12px !important;
    border-right:0 !important;
    border-top:1px solid #dfe5eb !important;
    border-radius:16px 16px 0 0 !important;
    background:#fff !important;
    box-shadow:0 -14px 34px rgba(15,23,42,.13) !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-stage-meta {
    display:none !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-clean-rulers,
  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v53-rulers {
    display:none !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner {
    top:auto !important;
    right:9px !important;
    bottom:74px !important;
    left:9px !important;
    width:auto !important;
    max-width:none !important;
    padding:7px 8px !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__copy span,
  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__toggle,
  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-quality-banner__detail {
    display:none !important;
  }


  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-sidebar,
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-panel {
    display:none !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-stage-area {
    padding-bottom:0 !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview.bbd-v52-preview-layout {
    padding:6px !important;
    gap:5px !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview__header.bbd-preview-pro-chrome {
    min-height:42px !important;
    padding:5px 7px 5px 9px !important;
    border-radius:11px !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v52-preview-dock {
    min-height:40px !important;
    padding:1px !important;
    gap:4px !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v52-preview-dock .bbd-mega-scene-bar,
  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v52-preview-dock .bbd-product-preview__three-controls {
    min-height:38px !important;
    padding:2px !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-v52-preview-dock button {
    width:34px !important;
    min-width:34px !important;
    height:32px !important;
    min-height:32px !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-quality-banner {
    display:none !important;
  }

  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v53-options {
    max-height:32vh !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v53-option-group > div {
    gap:5px !important;
  }
  .bbd-app.bbd-pro-workspace-v0230-dev54 .bbd-v53-option-group button {
    min-height:36px !important;
    font-size:10.5px !important;
  }
}

/* Tablet drawer: stage remains full-size behind the drawer; preview gets all space. */
@media (min-width:761px) and (max-width:1024px) {
  .bbd-app.bbd-pro-workspace-v0230-dev54.is-preview-mode .bbd-product-preview.bbd-v52-preview-layout {
    padding:8px !important;
  }
}

/* Desktop: keep the clean ruler close to the artboard but do not over-pad canvas. */
@media (min-width:1025px) {
  .bbd-app.bbd-pro-workspace-v0230-dev54:not(.is-preview-mode) .bbd-canvas-shell {
    padding-inline:24px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .bbd-app.bbd-pro-workspace-v0230-dev54 *,
  .bbd-app.bbd-pro-workspace-v0230-dev54 *::before,
  .bbd-app.bbd-pro-workspace-v0230-dev54 *::after {
    scroll-behavior:auto !important;
  }
}