/* Desktop home grid recovery.
   The sidebar has its own three-row rhythm, while the workbench keeps the
   matching title, studio and ideas rows.  This layer intentionally comes
   after the historical drawer patches. */

@media (min-width: 1061px) {
  :root {
    --desktop-shell-gutter: max(30px, calc((100vw - 1380px) / 2));
    --desktop-header-row: 70px;
    --desktop-title-row: 70px;
    --desktop-work-row: 478px;
    --desktop-side-gap: 14px;
    --desktop-support-height: 106px;
  }

  body,
  body:has(.product-layout) {
    overflow: hidden;
  }

  .app-topbar,
  .topbar.app-topbar {
    height: 94px;
    min-height: 94px;
    pointer-events: none;
  }

  .app-topbar .top-actions {
    pointer-events: auto;
    top: 17px;
    right: var(--desktop-shell-gutter);
    transform: none;
  }

  .product-layout {
    width: min(1380px, calc(100% - 60px));
    grid-template-columns: var(--drawer-width, 244px) minmax(0, 1fr);
    gap: 24px;
    margin: 92px auto 0;
  }

  .generator-main {
    gap: 14px;
  }

  .generator-heading {
    min-height: var(--desktop-title-row);
    height: var(--desktop-title-row);
    padding: 0 6px;
  }

  .generator-heading h1 {
    margin-top: 8px;
    transform: none;
  }

  .generator-studio {
    min-height: var(--desktop-work-row);
    height: var(--desktop-work-row);
  }

  .product-sidebar,
  body.sidebar-collapsed .product-sidebar {
    position: fixed !important;
    top: 12px !important;
    left: var(--desktop-shell-gutter) !important;
    z-index: 1900 !important;
    width: var(--drawer-width, 244px) !important;
    height: calc(100vh - 24px) !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .sidebar-brand-row,
  body.sidebar-collapsed .sidebar-brand-row {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    width: 244px !important;
    height: var(--desktop-header-row) !important;
    min-height: var(--desktop-header-row) !important;
    flex: 0 0 var(--desktop-header-row) !important;
    margin: 0 !important;
    padding: 0 4px 0 8px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .account-side-panel,
  body.sidebar-collapsed .account-side-panel {
    box-sizing: border-box !important;
    width: 244px !important;
    height: var(--desktop-title-row) !important;
    min-height: var(--desktop-title-row) !important;
    flex: 0 0 var(--desktop-title-row) !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
  }

  .product-side-panel,
  body.sidebar-collapsed .product-side-panel {
    box-sizing: border-box !important;
    width: 244px !important;
    height: calc(var(--desktop-work-row) - var(--desktop-support-height) - var(--desktop-side-gap)) !important;
    min-height: calc(var(--desktop-work-row) - var(--desktop-support-height) - var(--desktop-side-gap)) !important;
    flex: 0 0 calc(var(--desktop-work-row) - var(--desktop-support-height) - var(--desktop-side-gap)) !important;
    margin: var(--desktop-side-gap) 0 0 !important;
  }

  .support-side-panel,
  body.sidebar-collapsed .support-side-panel {
    box-sizing: border-box !important;
    width: 244px !important;
    height: var(--desktop-support-height) !important;
    min-height: var(--desktop-support-height) !important;
    flex: 0 0 var(--desktop-support-height) !important;
    margin: var(--desktop-side-gap) 0 0 !important;
  }

  .sidebar-legal,
  body.sidebar-collapsed .sidebar-legal {
    box-sizing: border-box !important;
    width: 244px !important;
    height: 28px !important;
    min-height: 28px !important;
    flex: 0 0 28px !important;
    margin: 36px 0 0 !important;
    padding: 0 10px !important;
  }

  /* The compact rail is visual only.  Its 154px grid column reserves the
     header control, but the actual rail remains aligned to the outer gutter. */
  body.sidebar-collapsed {
    --drawer-width: 154px;
  }

  body.sidebar-collapsed .product-sidebar {
    width: 74px !important;
    align-items: center !important;
  }

  body.sidebar-collapsed .sidebar-brand-row {
    width: 194px !important;
    padding: 0 !important;
  }

  body.sidebar-collapsed .sidebar-brand-row .brand,
  body.sidebar-collapsed .sidebar-brand-row .brand:hover,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-fluid-active,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-fluid-exiting {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: grid !important;
    width: 74px !important;
    min-width: 74px !important;
    height: var(--desktop-header-row) !important;
    padding: 0 !important;
    place-items: center !important;
    transform: none !important;
  }

  body.sidebar-collapsed .sidebar-brand-row .sidebar-compact-mark {
    width: 48px !important;
    height: 48px !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.sidebar-collapsed #sidebarCollapse,
  body.sidebar-collapsed #sidebarCollapse:hover,
  body.sidebar-collapsed #sidebarCollapse:focus-visible,
  body.sidebar-collapsed #sidebarCollapse.liquid-control,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-entering,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    position: absolute !important;
    top: 12px !important;
    left: 148px !important;
    display: grid !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    transform: none !important;
  }

  body.sidebar-collapsed #sidebarCollapse:active {
    transform: scale(.92) !important;
  }

  body.sidebar-collapsed #sidebarCollapse.is-morphing {
    transform: scale(0) !important;
  }

  body.sidebar-collapsed .account-side-panel {
    width: 70px !important;
    margin-inline: 2px !important;
    display: grid !important;
    place-items: center !important;
  }

  body.sidebar-collapsed .account-summary,
  body.sidebar-collapsed .account-summary:hover,
  body.sidebar-collapsed .account-summary.liquid-control,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-active {
    width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
  }

  body.sidebar-collapsed .account-avatar {
    width: 64px !important;
    height: 64px !important;
  }

  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel {
    width: 64px !important;
    margin-inline: 5px !important;
    padding: 6px !important;
    place-items: center !important;
  }

  body.sidebar-collapsed .product-side-panel {
    grid-template-rows: 1fr 50px 1fr !important;
  }

  body.sidebar-collapsed .support-side-panel {
    grid-template-rows: 1fr 1fr !important;
  }

  body.sidebar-collapsed .sidebar-legal {
    width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    flex-basis: 64px !important;
    margin: 0 5px 0 !important;
    padding: 0 !important;
    place-items: center !important;
  }

  /* v142 used the `html body` form below, so this small final override keeps
     the compact rail pinned to the header rather than returning it to the
     layout flow during the drawer transition. */
  html body.sidebar-collapsed .product-sidebar {
    position: fixed !important;
    top: 12px !important;
    left: calc(var(--desktop-shell-gutter) + 30px) !important;
    width: 74px !important;
    height: calc(100vh - 24px) !important;
    margin: 0 !important;
    gap: 0 !important;
    transform: none !important;
  }

  html body.sidebar-collapsed .sidebar-brand-row {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 194px !important;
    height: var(--desktop-header-row) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  html body.sidebar-collapsed #sidebarCollapse,
  html body.sidebar-collapsed #sidebarCollapse:hover,
  html body.sidebar-collapsed #sidebarCollapse:focus-visible,
  html body.sidebar-collapsed #sidebarCollapse.liquid-control,
  html body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active,
  html body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-entering,
  html body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    position: absolute !important;
    top: 12px !important;
    left: 148px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.sidebar-collapsed .account-side-panel {
    width: 70px !important;
    height: var(--desktop-title-row) !important;
    min-height: var(--desktop-title-row) !important;
    flex-basis: var(--desktop-title-row) !important;
    margin: 10px 2px 0 !important;
  }

  html body.sidebar-collapsed .product-side-panel {
    width: 64px !important;
    height: calc(var(--desktop-work-row) - var(--desktop-support-height) - var(--desktop-side-gap)) !important;
    min-height: calc(var(--desktop-work-row) - var(--desktop-support-height) - var(--desktop-side-gap)) !important;
    max-height: none !important;
    flex-basis: calc(var(--desktop-work-row) - var(--desktop-support-height) - var(--desktop-side-gap)) !important;
    margin: var(--desktop-side-gap) 5px 0 !important;
    grid-template-rows: 1fr 50px 1fr !important;
  }

  html body.sidebar-collapsed .support-side-panel {
    width: 64px !important;
    height: var(--desktop-support-height) !important;
    min-height: var(--desktop-support-height) !important;
    flex-basis: var(--desktop-support-height) !important;
    margin: var(--desktop-side-gap) 5px 0 !important;
  }

  html body.sidebar-collapsed .sidebar-legal {
    width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    flex-basis: 64px !important;
    /* Keep the compact information control on the same optical baseline as
       the ideas row instead of pinning it to the support card's edge. */
    margin: 18px 5px 0 !important;
    padding: 0 !important;
  }
}