/* Desktop display density profiles based on effective viewport size. */
body:not(.page-admin) {
  --display-content-max: 1280px;
  --display-main-pad-x: 24px;
  --display-main-pad-y: 22px;
  --sidebar-width: 236px;
}

body:not(.page-admin):not(.page-app):not(.page-canvas):not(.page-designer-canvas):not(.page-creation):not(.page-chat):not(.page-embed) .main-area {
  padding: var(--display-main-pad-y) var(--display-main-pad-x);
}

body:not(.page-admin):not(.page-app):not(.page-canvas):not(.page-designer-canvas):not(.page-creation):not(.page-chat):not(.page-embed) .main-area > main {
  width: min(100%, var(--display-content-max));
  margin-inline: auto;
}

/* 24-inch 1080p and laptop-class effective viewports. */
@media (min-width: 1181px) and (max-width: 1599px) {
  body:not(.page-admin) {
    --display-content-max: 1240px;
    --display-main-pad-x: 22px;
    --display-main-pad-y: 20px;
    --sidebar-width: 236px;
  }

  body.page-app:not(.page-admin):not(.home-layout-editing) {
    --home-ve-page-width: 1030px !important;
    --home-ve-top-width: 970px !important;
    --home-ve-console-width: 900px !important;
    --home-ve-feature-width: 900px !important;
    --home-ve-showcase-width: 1000px !important;
    --home-ve-resource-width: 230px !important;
    --home-ve-gap: 9px !important;
    --home-ve-scale: 0.95 !important;
    --home-ve-gallery-min: 150px !important;
  }
}

/* 24/27-inch 1080p or 1440p at common OS scaling. */
@media (min-width: 1600px) and (max-width: 2199px) {
  body:not(.page-admin) {
    --display-content-max: 1500px;
    --display-main-pad-x: 30px;
    --display-main-pad-y: 26px;
    --sidebar-width: 248px;
  }

  body.page-app:not(.page-admin):not(.home-layout-editing) {
    --home-ve-page-width: 1180px !important;
    --home-ve-top-width: 1120px !important;
    --home-ve-console-width: 980px !important;
    --home-ve-feature-width: 1040px !important;
    --home-ve-showcase-width: 1160px !important;
    --home-ve-resource-width: 270px !important;
    --home-ve-gap: 11px !important;
    --home-ve-scale: 1 !important;
    --home-ve-gallery-min: 165px !important;
  }
}

/* 27-inch 1440p and 32-inch 4K at 150% scaling. */
@media (min-width: 2200px) and (max-width: 3199px) {
  body:not(.page-admin) {
    --display-content-max: 1760px;
    --display-main-pad-x: 38px;
    --display-main-pad-y: 30px;
    --sidebar-width: 264px;
  }

  body.page-app:not(.page-admin):not(.home-layout-editing) {
    --home-ve-page-width: 1480px !important;
    --home-ve-top-width: 1360px !important;
    --home-ve-console-width: 1120px !important;
    --home-ve-feature-width: 1200px !important;
    --home-ve-showcase-width: 1440px !important;
    --home-ve-resource-width: 320px !important;
    --home-ve-gap: 14px !important;
    --home-ve-scale: 1 !important;
    --home-ve-gallery-min: 185px !important;
  }

  body.page-gallery:not(.page-admin) .grid-3cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body:not(.page-admin):not(.page-app) .grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  }

  body.page-app:not(.page-admin) .home-public-gallery-masonry {
    column-count: 5;
  }
}

/* 32-inch 4K at 100-125% scaling and larger desktop workstations. */
@media (min-width: 3200px) {
  body:not(.page-admin) {
    --display-content-max: 2040px;
    --display-main-pad-x: 52px;
    --display-main-pad-y: 38px;
    --sidebar-width: 280px;
  }

  body.page-app:not(.page-admin):not(.home-layout-editing) {
    --home-ve-page-width: 1760px !important;
    --home-ve-top-width: 1560px !important;
    --home-ve-console-width: 1240px !important;
    --home-ve-feature-width: 1320px !important;
    --home-ve-showcase-width: 1680px !important;
    --home-ve-resource-width: 360px !important;
    --home-ve-gap: 16px !important;
    --home-ve-scale: 1.02 !important;
    --home-ve-gallery-min: 210px !important;
  }

  body.page-gallery:not(.page-admin) .grid-3cols {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body:not(.page-admin):not(.page-app) .grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  }

  body.page-app:not(.page-admin) .home-public-gallery-masonry {
    column-count: 6;
  }
}

/* Short desktop windows and 1080p displays with browser chrome visible. */
@media (min-width: 1181px) and (max-height: 950px) {
  body:not(.page-admin) {
    --display-main-pad-y: 18px;
  }

  body:not(.page-admin) .sidebar-header {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body:not(.page-admin) .sidebar-nav-item {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  body.page-app:not(.page-admin):not(.home-layout-editing) {
    --home-ve-main-pad-y: 2px !important;
    --home-ve-gap: 8px !important;
    --home-ve-scale: 0.94 !important;
    --home-ve-prompt-height: 58px !important;
    --home-ve-feature-height: 58px !important;
  }
}

@media (min-width: 1181px) and (max-height: 760px) {
  body.page-app:not(.page-admin):not(.home-layout-editing) {
    --home-ve-scale: 0.88 !important;
    --home-ve-gap: 6px !important;
  }
}

/* Existing tablet/mobile rules retain control below the desktop breakpoint. */
@media (max-width: 1180px) {
  body:not(.page-admin) {
    --sidebar-width: 260px;
  }
}

/*
 * Home viewport fit
 *
 * The published home page used transform: scale() as a density control. That
 * changes the painted size without changing layout bounds, so browser zoom and
 * short Safari viewports can leave the page looking oversized or clipped.
 * Keep transform scaling available in the layout editor, but size the live page
 * from the actual space left beside the sidebar.
 */
body.page-app:not(.page-admin):not(.home-layout-editing) .home-dashboard {
  width: min(
    var(--home-ve-page-width),
    calc(100vw - var(--sidebar-width) - (2 * var(--display-main-pad-x)))
  ) !important;
  max-width: 100% !important;
  transform: none !important;
}

body.page-app.sidebar-collapsed:not(.page-admin):not(.home-layout-editing) .home-dashboard {
  width: min(
    var(--home-ve-page-width),
    calc(100vw - (2 * var(--display-main-pad-x)))
  ) !important;
}

body.page-app:not(.page-admin):not(.home-layout-editing) .home-dashboard > .page-hd,
body.page-app:not(.page-admin):not(.home-layout-editing) .home-hero-grid,
body.page-app:not(.page-admin):not(.home-layout-editing) .home-console,
body.page-app:not(.page-admin):not(.home-layout-editing) .home-workflow-strip,
body.page-app:not(.page-admin):not(.home-layout-editing) .home-showcase-grid {
  max-width: 100% !important;
}

@media (min-width: 1181px) {
  body.page-app:not(.page-admin):not(.home-layout-editing) .main-area {
    padding-left: var(--display-main-pad-x) !important;
    padding-right: var(--display-main-pad-x) !important;
  }

  body.page-app:not(.page-admin):not(.home-layout-editing) .home-gallery-tag-nav {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 2px;
  }
}

@media (min-width: 1181px) and (max-height: 950px) {
  body.page-app:not(.page-admin):not(.home-layout-editing) .home-dashboard {
    gap: 7px !important;
  }

  body.page-app:not(.page-admin):not(.home-layout-editing) .home-hero-grid {
    margin-top: 0 !important;
  }

  body.page-app:not(.page-admin):not(.home-layout-editing) .home-showcase-grid {
    margin-top: 4px !important;
  }
}

@media (max-width: 1180px) {
  body.page-app:not(.page-admin):not(.home-layout-editing) .home-dashboard,
  body.page-app.sidebar-collapsed:not(.page-admin):not(.home-layout-editing) .home-dashboard {
    width: 100% !important;
    transform: none !important;
  }
}

/* Keep all four sidebar footer actions inside their own stable columns. */
html[data-theme] body:not(.page-admin) .sidebar-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 5px !important;
  padding-inline: 6px;
}

html[data-theme] body:not(.page-admin) .sidebar-actions > .sidebar-action-btn,
html[data-theme] body:not(.page-admin) .sidebar-actions > .theme-picker {
  width: 100%;
  min-width: 0;
}

html[data-theme] body:not(.page-admin) .sidebar-actions .sidebar-action-btn {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  flex-direction: row;
  gap: 3px;
  padding: 5px 3px;
  line-height: 1;
  white-space: nowrap;
}

html[data-theme] body:not(.page-admin) .sidebar-actions .action-icon,
html[data-theme] body:not(.page-admin) .sidebar-actions .action-icon svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

html[data-theme] body:not(.page-admin) .sidebar-actions .sidebar-action-btn > span:last-child {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] body:not(.page-admin) .sidebar-actions .theme-picker,
html[data-theme] body:not(.page-admin) .sidebar-actions .theme-picker .theme-toggle {
  min-width: 0;
}

html[data-theme] body:not(.page-admin) .sidebar-actions > a[href="/user/shop"] {
  border-color: rgba(255, 181, 92, .72) !important;
  background: linear-gradient(135deg, #ff9a2f 0%, #ff6a1a 58%, #e94b12 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 8px 20px rgba(234, 88, 12, .28) !important;
}

html[data-theme] body:not(.page-admin) .sidebar-actions > a[href="/user/shop"]:hover {
  border-color: rgba(255, 208, 145, .86) !important;
  background: linear-gradient(135deg, #ffa845 0%, #ff7628 58%, #ef571b 100%) !important;
  color: #fff !important;
}

/* Intermediate desktop widths still have a visible sidebar, so compact the
 * header before the mobile navigation breakpoint is reached. */
@media (min-width: 1025px) and (max-width: 1440px) {
  html[data-theme] body.page-app:not(.page-admin) .home-dashboard > .page-hd {
    gap: 7px !important;
  }

  html[data-theme] body.page-app:not(.page-admin) .home-top-name {
    display: none;
  }

  html[data-theme] body.page-app:not(.page-admin) .home-top-nav {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html[data-theme] body.page-app:not(.page-admin) .home-top-nav::-webkit-scrollbar {
    display: none;
  }

  html[data-theme] body.page-app:not(.page-admin) .home-top-nav a {
    min-height: 32px;
    padding-inline: 9px;
    font-size: 12px;
  }

  html[data-theme] body.page-app:not(.page-admin) .home-dashboard > .page-hd .btn,
  html[data-theme] body.page-app:not(.page-admin) .home-dashboard > .page-hd .badge-balance {
    padding-inline: 10px !important;
  }
}

/* Toolbars must grow vertically instead of allowing controls to overlap. */
html[data-theme] body.page-app:not(.page-admin) .home-create-toolbar {
  flex-wrap: wrap !important;
  align-items: center !important;
}

html[data-theme] body.page-app:not(.page-admin) .home-create-toolbar > *,
html[data-theme] body.page-app:not(.page-admin) .home-create-actions {
  min-width: 0;
}

html[data-theme] body.page-app:not(.page-admin) .home-mode-tabs {
  max-width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

html[data-theme] body.page-app:not(.page-admin) .home-mode-tabs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 760px) {
  html[data-theme] body.page-app:not(.page-admin) .home-create-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0 !important;
  }
}

@media (min-width: 1025px) and (max-height: 820px) {
  html[data-theme] body:not(.page-admin) .sidebar-footer {
    padding: 6px 8px !important;
  }

  html[data-theme] body:not(.page-admin) .sidebar-user {
    padding: 7px 8px !important;
  }

  html[data-theme] body:not(.page-admin) .sidebar-actions .sidebar-action-btn {
    min-height: 40px;
  }
}