/*
 * HAWK-EYE Workshop mobile hardening.
 * Desktop/fine-pointer Workshop layout intentionally remains unchanged.
 */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  /* Workshop is uniquely identified by its robot-slot action. */
  main:has(button.btn-ghost[title*="slot"]) div.flex.items-center.gap-2.overflow-x-auto.pb-1 {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.375rem !important;
  }

  main:has(button.btn-ghost[title*="slot"]) div.flex.items-center.gap-2.overflow-x-auto.pb-1 > button {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }

  /* Compact RobotPlate cosmetics keep their authored proportions. */
  main:has(button.btn-ghost[title*="slot"]) div.flex.items-center.gap-2.overflow-x-auto.pb-1 > button > div.relative {
    width: min(176px, 46vw) !important;
    max-width: 176px !important;
    height: auto !important;
    aspect-ratio: 6 / 1;
  }

  main:has(button.btn-ghost[title*="slot"]) div.flex.items-center.gap-2.overflow-x-auto.pb-1 > button > div.relative > img {
    object-fit: contain !important;
  }

  /* Tighten the build/deck stack without shrinking readable text. */
  main:has(button.btn-ghost[title*="slot"]) div.grid.grid-cols-1[class*="lg:grid-cols-2"][class*="items-start"] {
    gap: 0.75rem !important;
  }

  main:has(button.btn-ghost[title*="slot"]) div.grid.grid-cols-1[class*="lg:grid-cols-2"][class*="items-start"] > div.panel {
    padding: 0.75rem !important;
  }

  /* The schematic is informational; scale it uniformly to free vertical room. */
  main:has(button.btn-ghost[title*="slot"]) div.grid.grid-cols-1[class*="lg:grid-cols-2"][class*="items-start"] > div.panel.overflow-visible > div.flex.items-center.justify-center > div.relative {
    width: 7rem !important;
    height: 7rem !important;
  }

  main:has(button.btn-ghost[title*="slot"]) div.panel-light.p-3.mt-2.mb-4 {
    padding: 0.625rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Part rows remain dense, but every explicit action is thumb-sized. */
  main:has(button.btn-ghost[title*="slot"]) div.panel-light.px-3.py-2.overflow-visible.cursor-pointer {
    padding: 0.625rem !important;
  }

  main:has(button.btn-ghost[title*="slot"]) div.panel-light.px-3.py-2.overflow-visible.cursor-pointer button {
    min-height: 44px;
    min-width: 44px;
  }

  main:has(button.btn-ghost[title*="slot"]) div.panel-light.px-3.py-2.overflow-visible.cursor-pointer > div.grid > div:last-child {
    gap: 0.25rem !important;
  }

  /* The natural end of the edit loop should be easy to hit, not floating. */
  main:has(button.btn-ghost[title*="slot"]) button.btn-primary.w-full.mt-3,
  main:has(button.btn-ghost[title*="slot"]) button.btn.w-full.mt-2 {
    min-height: 48px;
  }

  /* Focused name/search fields should scroll clear of mobile keyboards/nav bars. */
  main:has(button.btn-ghost[title*="slot"]) input,
  main:has(button.btn-ghost[title*="slot"]) select,
  main:has(button.btn-ghost[title*="slot"]) textarea {
    scroll-margin-top: calc(4rem + var(--bbo-safe-top));
    scroll-margin-bottom: calc(7rem + var(--bbo-safe-bottom));
  }

  /*
   * Part Picker behaves like a native bottom sheet on touch devices. It uses the
   * visual viewport, keeps its header reachable, and contains its own scrolling.
   */
  main:has(button.btn-ghost[title*="slot"]) .fixed.inset-0.z-50.flex.items-center.justify-center.p-4 {
    align-items: flex-end !important;
    padding-top: calc(0.75rem + var(--bbo-safe-top)) !important;
    padding-right: var(--bbo-safe-right) !important;
    padding-bottom: var(--bbo-safe-bottom) !important;
    padding-left: var(--bbo-safe-left) !important;
  }

  main:has(button.btn-ghost[title*="slot"]) .fixed.inset-0.z-50.flex.items-center.justify-center.p-4 > div.panel {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--bbo-safe-top) - 0.75rem) !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  main:has(button.btn-ghost[title*="slot"]) .fixed.inset-0.z-50.flex.items-center.justify-center.p-4 > div.panel > div.flex.items-center.justify-between.mb-4 {
    position: sticky;
    top: -0.75rem;
    z-index: 2;
    margin: -0.75rem -0.75rem 0.5rem !important;
    padding: 0.75rem;
    border-bottom: 1px solid rgba(72, 72, 96, 0.8);
    background: rgb(18, 18, 28);
  }

  main:has(button.btn-ghost[title*="slot"]) .fixed.inset-0.z-50.flex.items-center.justify-center.p-4 div.space-y-2 > div.w-full.p-3.rounded.border {
    padding: 0.75rem !important;
  }

  main:has(button.btn-ghost[title*="slot"]) .fixed.inset-0.z-50.flex.items-center.justify-center.p-4 div.space-y-2 > div.w-full.p-3.rounded.border > button {
    min-height: 44px;
  }
}

/* Wider landscape phones can use their width for build + deck without invoking desktop chrome. */
@media (orientation: landscape) and (min-width: 820px) and (hover: none) and (pointer: coarse) {
  main:has(button.btn-ghost[title*="slot"]) div.grid.grid-cols-1[class*="lg:grid-cols-2"][class*="items-start"] {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
  }
}