/* Shared phone desk swipe chrome (logbook / parts detail) */

.rcs-desk-swipe-count {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--rcs-muted);
}

.rcs-desk-swipe-count[hidden] {
  display: none !important;
}

.lb-inspector-head-center {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.lb-inspector-head-spacer {
  flex: 0 0 auto;
  width: 4.5rem;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 1024px) {
  .lb-inspector-head-center {
    text-align: left;
  }

  .lb-inspector-head-spacer,
  #lb-swipe-count {
    display: none !important;
  }
}

.pp-item-swipe-count {
  flex: 1 1 100%;
  order: -1;
  text-align: center;
  margin: 0 0 2px;
  padding: 2px 10px;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: color-mix(in srgb, var(--rcs-input-bg) 90%, var(--rcs-bg));
  border: 1px solid var(--rcs-border);
}

@media (min-width: 1024px) {
  .pp-item-swipe-count {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .lb-inspector-col.is-open .lb-inspector,
  .pp-item-overlay:not([hidden]) {
    touch-action: pan-y pinch-zoom;
  }

  /*
   * Swipe shell: field backdrop stays fixed while the card translates.
   * Mid-drag gaps show backdrop only — never the list underneath.
   */
  .pp-overview-overlay:not([hidden]),
  .lb-inspector-col.is-open {
    background-color: #1a120c;
    background-image: url("/assets/hangar/default-backdrop.webp");
    background-size: cover;
    background-position: 50% 42%;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  @supports (background-image: url("/assets/hangar/default-backdrop.avif")) {
    .pp-overview-overlay:not([hidden]),
    .lb-inspector-col.is-open,
    body.pp-overlay-open .pp-overview-overlay.pp-item-overlay:not([hidden]) {
      background-image: url("/assets/hangar/default-backdrop.avif");
    }
  }

  .pp-overview-overlay:not([hidden])::before,
  .lb-inspector-col.is-open::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 120% 80% at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.45) 100%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, transparent 42%);
  }

  /*
   * Overview shell: full viewport + field backdrop (same idea as logbook).
   * Longhands beat the parts `inset` shorthand at equal specificity.
   */
  body.pp-overlay-open .pp-overview-overlay.pp-item-overlay:not([hidden]) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    z-index: 260;
    background-color: #1a120c;
    background-image: url("/assets/hangar/default-backdrop.webp");
    background-size: cover;
    background-position: 50% 42%;
    background-repeat: no-repeat;
    box-shadow: none;
    overflow: hidden;
  }

  .pp-overview-overlay:not([hidden]) {
    inset: 0;
    border-radius: 0;
    background-color: #1a120c;
    box-shadow: none;
  }

  .pp-overview-overlay:not([hidden]) > .pp-inspector--overview {
    position: absolute;
    top: 4px;
    left: 6px;
    right: 6px;
    bottom: 4px;
    z-index: 1;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 16px;
    border: 1px solid var(--rcs-border);
    background: color-mix(in srgb, var(--rcs-panel) 96%, var(--rcs-bg));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    overflow: hidden;
  }

  .lb-inspector-col.is-open {
    position: fixed;
    inset: 0;
    z-index: 209;
    display: block;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .lb-inspector-col.is-open .lb-inspector {
    position: absolute;
    top: 4px;
    left: 6px;
    right: 6px;
    bottom: 4px;
    z-index: 1;
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
  }

  .rcs-desk-swipe-hint {
    display: block;
    margin: 2px 0 0;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rcs-muted);
    text-align: center;
    white-space: nowrap;
  }

  .rcs-desk-swipe-hint[hidden] {
    display: none !important;
  }

  .pp-overview-swipe-hint {
    flex: 1 1 100%;
    order: -1;
    margin: 0 0 4px;
  }

  /*
   * Wrap stacks at z-index:1 (under chrome/soft-nav). Elevate while swipe shell is open
   * so the card covers soft-nav + list; field backdrop fills the shell.
   */
  body.lb-inspector-open .rcs-logbook-wrap,
  body.pp-overlay-open .rcs-hangar-wrap {
    z-index: 250;
  }

  body.lb-inspector-open .rcs-pilot-chrome .rcs-pilot-nav,
  body.pp-overlay-open .rcs-pilot-chrome .rcs-pilot-nav {
    visibility: hidden;
    pointer-events: none;
  }

  /* List, page header, and MFD sit above the desk. Hide them so only the field shows.
   * Edit Part / sale use the same lock as Overview + Logbook (no MFD peek under the card). */
  body.pp-overlay-open .rcs-pilot-chrome,
  body.pp-overlay-open .rcs-footer-page,
  body.lb-inspector-open .rcs-footer-page {
    visibility: hidden;
    pointer-events: none;
  }
}