/* ============================================================
   V3.1.1020 — Desktop layout authority

   Purpose
   - Restore the proven desktop workspace hierarchy without touching mobile/PWA.
   - Make desktop shells and center workspaces respond cleanly as the browser widens.
   - Keep typography and the Home toolkit artwork visually stable instead of scaling
     continuously with viewport width.
   - Give Database and item viewers useful center-column width on wide/ultra-wide screens.

   Historical intent preserved from the V3.1.203/V3.1.204 handoff:
   HOME WIDE:       Scan/Search | Complete Toolkit | Inventory
   HOME SMALL:      Scan/Search | Inventory
                    Complete Toolkit spans full width
   DATABASE:        remains its own workspace, not Home content
   MOBILE/PWA:      untouched by this file
   ============================================================ */

@media (min-width:901px) and (hover:hover) and (pointer:fine) {
  :root {
    --hvb-desktop-shell-max: 2200px;
    --hvb-desktop-page-gutter: clamp(18px, 2.2vw, 46px);
    --hvb-desktop-grid-gap: clamp(14px, 1.25vw, 24px);
  }

  html,
  body {
    overflow-x: clip !important;
  }

  /* ----------------------------------------------------------
     Global desktop frame
     ---------------------------------------------------------- */
  .brand-header {
    display: grid !important;
    grid-template-columns: minmax(180px,1fr) auto minmax(220px,1fr) !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: max(20px, calc((100vw - var(--hvb-desktop-shell-max)) / 2 + 20px)) !important;
    padding-right: max(20px, calc((100vw - var(--hvb-desktop-shell-max)) / 2 + 20px)) !important;
    box-sizing: border-box !important;
  }

  .brand-header #homeAccountButton {
    justify-self: start !important;
    min-width: 0 !important;
  }

  .brand-header .brand-lockup-static,
  .brand-header .brand-lockup {
    grid-column: 2 !important;
    justify-self: center !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  .brand-header #inventoryButton.inventory-chip {
    grid-column: 3 !important;
    justify-self: end !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .app-shell {
    width: min(
      var(--hvb-desktop-shell-max),
      calc(100vw - (2 * var(--hvb-desktop-page-gutter)))
    ) !important;
    max-width: var(--hvb-desktop-shell-max) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(14px, 1.25vw, 24px) 0 22px !important;
    box-sizing: border-box !important;
  }

  #scannerView,
  #scannerView > .desktop-grid,
  #scannerView > .desktop-grid > .panel,
  #resultPanel,
  #resultContent,
  .result-hero,
  .result-details,
  .session-panel,
  .camera-panel,
  .minifig-browser-content,
  .minifig-browser-scroll,
  .minifig-browser-grid {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #scannerView > .desktop-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: var(--hvb-desktop-grid-gap) !important;
    align-items: start !important;
  }

  #scannerView > .desktop-grid > .panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(15px, 1.1vw, 20px) !important;
  }

  /* Prevent desktop type from growing every time the browser widens. */
  body.item-view-active .result-details h1,
  body.component-page-active .result-details h1 {
    font-size: 1.72rem !important;
    line-height: 1.08 !important;
  }

  /* ----------------------------------------------------------
     HOME — presentation-only center panel
     ---------------------------------------------------------- */
  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel) {
    align-items: stretch !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > #resultPanel.splash-screen-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  #homeToolkitPanel:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 2vh, 28px) !important;
    width: 100% !important;
    max-width: 760px !important;
    min-width: 0 !important;
    margin: auto !important;
    padding: clamp(12px, 1.5vw, 24px) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #homeToolkitPanel:not(.hidden) .home-toolkit-wordmark,
  #homeToolkitPanel:not(.hidden) .home-brand-lockup-image {
    display: block !important;
    width: min(520px, 82%) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  #homeToolkitPanel:not(.hidden) .home-toolkit-flow {
    display: grid !important;
    grid-template-columns:
      auto minmax(22px,1fr)
      auto minmax(22px,1fr)
      auto minmax(22px,1fr)
      auto !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: clamp(8px, 1vw, 16px) !important;
    width: min(640px, 100%) !important;
    max-width: 640px !important;
    margin: 0 auto !important;
  }

  #homeToolkitPanel:not(.hidden) .home-toolkit-flow article {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
  }

  #homeToolkitPanel:not(.hidden) .home-toolkit-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    flex: 0 0 72px !important;
  }

  #homeToolkitPanel:not(.hidden) .home-toolkit-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  #homeToolkitPanel:not(.hidden) .home-toolkit-flow article b {
    font-size: .68rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Inventory content is allowed to scroll inside its desktop panel instead of
     forcing the full Home grid to become arbitrarily tall. */
  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > .session-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* ----------------------------------------------------------
     DATABASE — keep center catalog fluid and useful
     ---------------------------------------------------------- */
  body.minifig-browser-active #resultPanel,
  body.minifig-browser-active #minifigBrowserContent,
  body.minifig-browser-active #minifigBrowserScroll {
    width: 100% !important;
    max-width: none !important;
  }

  body.minifig-browser-active #minifigBrowserGrid.minifig-browser-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px,1fr)) !important;
    gap: clamp(8px, .75vw, 13px) !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.minifig-browser-active .database-controls-tray,
  body.minifig-browser-active .minifig-browser-controls,
  body.minifig-browser-active .catalog-database-search-row {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* ----------------------------------------------------------
     ITEM VIEWERS — center viewer gets the stretch, side tools stay sane
     ---------------------------------------------------------- */
  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid > .camera-panel,
  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid > #resultPanel,
  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid > .session-panel {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.item-view-active:not(.minifig-browser-active) #resultContent .result-hero {
    display: grid !important;
    grid-template-columns: clamp(190px, 32%, 300px) minmax(250px,1fr) !important;
    gap: clamp(16px, 1.25vw, 22px) !important;
    align-items: start !important;
    width: 100% !important;
  }

  body.item-view-active:not(.minifig-browser-active) #resultContent .main-image-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body.item-view-active:not(.minifig-browser-active) #resultContent .main-image-card img,
  body.item-view-active:not(.minifig-browser-active) #resultContent .main-image-card video {
    max-width: 100% !important;
  }
}

/* ============================================================
   SMALL DESKTOP — 901–1180
   Home becomes a deliberate 2-column top row with Toolkit below.
   ============================================================ */
@media (min-width:901px) and (max-width:1180px) and (hover:hover) and (pointer:fine) {
  :root {
    --hvb-desktop-page-gutter: clamp(14px, 2vw, 24px);
    --hvb-desktop-grid-gap: clamp(12px, 1.5vw, 18px);
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel) {
    display: grid !important;
    grid-template-columns: minmax(310px,.9fr) minmax(360px,1.1fr) !important;
    grid-template-rows: auto auto !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > .camera-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > .session-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-height: clamp(500px, calc(100vh - 150px), 720px) !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > #resultPanel.splash-screen-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-height: 300px !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  #homeToolkitPanel:not(.hidden) {
    min-height: 280px !important;
    max-width: 760px !important;
    padding-block: 24px !important;
  }

  #homeToolkitPanel:not(.hidden) .home-toolkit-wordmark,
  #homeToolkitPanel:not(.hidden) .home-brand-lockup-image {
    width: min(460px, 72%) !important;
    max-width: 460px !important;
  }

  #homeToolkitPanel:not(.hidden) .home-toolkit-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    flex-basis: 64px !important;
  }

  /* Dedicated Database remains a workspace: compact Search/Scan at left,
     catalog gets the remaining horizontal room, Inventory moves below only
     when the viewport cannot support a reliable third column. */
  body.minifig-browser-active
  > .app-shell > #scannerView > .desktop-grid {
    display: grid !important;
    grid-template-columns: clamp(270px, 30vw, 330px) minmax(0,1fr) !important;
    gap: var(--hvb-desktop-grid-gap) !important;
    align-items: start !important;
  }

  body.minifig-browser-active
  > .app-shell > #scannerView > .desktop-grid > .camera-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.minifig-browser-active
  > .app-shell > #scannerView > .desktop-grid > #resultPanel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  body.minifig-browser-active
  > .app-shell > #scannerView > .desktop-grid > .session-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  body.minifig-browser-active #minifigBrowserGrid.minifig-browser-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px,1fr)) !important;
  }

  /* Item viewer follows the proven two-column desktop geometry. */
  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid {
    display: grid !important;
    grid-template-columns: clamp(285px, 31vw, 340px) minmax(0,1fr) !important;
    gap: var(--hvb-desktop-grid-gap) !important;
  }

  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid > .camera-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid > #resultPanel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid > .session-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.item-view-active:not(.minifig-browser-active) #resultContent .result-hero {
    grid-template-columns: minmax(180px, .78fr) minmax(240px, 1.22fr) !important;
  }

  body.item-view-active .result-details h1,
  body.component-page-active .result-details h1 {
    font-size: 1.5rem !important;
  }
}

/* ============================================================
   WIDE / ULTRA-WIDE DESKTOP — 1181+
   Side tools remain controlled; center workspace receives extra width.
   ============================================================ */
@media (min-width:1181px) and (hover:hover) and (pointer:fine) {
  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel),
  body.minifig-browser-active
  > .app-shell > #scannerView > .desktop-grid,
  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid {
    display: grid !important;
    grid-template-columns:
      clamp(290px, 20vw, 390px)
      minmax(0, 1fr)
      clamp(280px, 19vw, 370px) !important;
    gap: var(--hvb-desktop-grid-gap) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > .camera-panel,
  body.minifig-browser-active
  > .app-shell > #scannerView > .desktop-grid > .camera-panel,
  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid > .camera-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > #resultPanel,
  body.minifig-browser-active
  > .app-shell > #scannerView > .desktop-grid > #resultPanel,
  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid > #resultPanel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > .session-panel,
  body.minifig-browser-active
  > .app-shell > #scannerView > .desktop-grid > .session-panel,
  body.item-view-active:not(.minifig-browser-active)
  > .app-shell > #scannerView > .desktop-grid > .session-panel {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > #resultPanel.splash-screen-panel {
    min-height: clamp(560px, calc(100vh - 155px), 820px) !important;
  }

  #scannerView > .desktop-grid:has(> #resultPanel.splash-screen-panel)
  > .session-panel {
    max-height: clamp(560px, calc(100vh - 155px), 820px) !important;
  }
}

/* Extra-wide catalog grids can use the additional center real estate without
   making cards comically large. */
@media (min-width:1600px) and (hover:hover) and (pointer:fine) {
  body.minifig-browser-active #minifigBrowserGrid.minifig-browser-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px,1fr)) !important;
  }
}