/* ───────────────────────────────────────────────────────────────────────────
   Marketplace Apps — PageBlocks landing block.

   Ported from the order page's `.mp-tabs__* / .mp__*` rules (css/order.css) so
   the block reads as the same component, but namespaced `mpb-*` and fully
   self-contained: order.css never loads on a landing, and the two must not be
   able to collide if they ever share a page.

   Palette follows the site system: #9000ed brand, #1d233b ink, #6a6d7c muted,
   with `html.dark` overrides mirroring the order page's dark block.
   ─────────────────────────────────────────────────────────────────────────── */

.mpb__title {
  margin: 0 0 12px;
}
.mpb__subtitle {
  margin: 0 0 24px;
  max-width: 780px;
  color: #6a6d7c;
  font-size: 16px;
  line-height: 1.5;
}
.mpb__tabs {
  display: block;
  margin-top: 24px;
}

/* Tab bar: prev button, scrolling rail, next button.
   GRID with a minmax(0, 1fr) rail track, not flex — a flex rail reports its
   full tab-strip width to ancestors and widens the page instead of scrolling
   inside itself. Same reasoning as the order page; do not convert to flex. */
.mpb__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e9eb;
  padding-bottom: 10px;
}
.mpb__rail {
  display: flex;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Buttons are the desktop affordance; the bar stays scrollable so touch
     swipe keeps working with the scrollbar hidden. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mpb__rail::-webkit-scrollbar { display: none; }

.mpb__tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: rgba(29, 35, 59, 0.03);
  color: #6a6d7c;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mpb__tab:hover { border-color: #9000ed; }
.mpb__tab.is-active {
  background-color: #9000ed;
  border-color: #9000ed;
  color: #fffeff;
  font-weight: 600;
}

/* Hidden entirely unless the rail actually overflows, so a short catalogue
   does not show dead controls. */
.mpb__nav {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d2d3d8;
  border-radius: 50%;
  background-color: #fffeff;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mpb__bar.is-scrollable .mpb__nav { display: flex; }
.mpb__nav svg { width: 18px; height: 18px; stroke: #1d233b; }
.mpb__nav:hover:not(:disabled) { border-color: #9000ed; }
.mpb__nav:hover:not(:disabled) svg { stroke: #9000ed; }
.mpb__nav:disabled { opacity: 0.35; cursor: default; }
.mpb__nav--prev svg { transform: rotate(90deg); }
.mpb__nav--next svg { transform: rotate(-90deg); }

.mpb__panel { display: none; }
.mpb__panel.is-active { display: block; }

/* auto-fill against the real panel width rather than the viewport. */
.mpb__apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* Presentational card — unlike the order page this one is not a selector, so
   it carries no cursor:pointer and no selected state. */
.mpb__app {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background-color: rgba(29, 35, 59, 0.03);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mpb__app:hover { border-color: #9000ed; }
.mpb__app-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mpb__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}
.mpb__name {
  font-weight: 600;
  color: #1d233b;
  line-height: 1.3;
}
.mpb__desc {
  margin: 0;
  color: #6a6d7c;
  font-size: 13px;
  line-height: 1.5;
  /* even card heights however verbose billing's copy is; the full text stays
     reachable through the title attribute. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Where the order page has a stack dropdown, the landing has a flat read-only
   list. Deliberately not interactive: nothing here is selectable. */
.mpb__options {
  margin-top: auto;
  padding-top: 4px;
}
.mpb__options-label {
  display: block;
  margin-bottom: 6px;
  color: #a5a7b1;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mpb__options-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mpb__option {
  padding: 6px 10px;
  border: 1px solid #d2d3d8;
  border-radius: 8px;
  background-color: #fffeff;
  color: #1d233b;
  font-size: 13px;
  line-height: 1.25;
}

/* Card footer: the primary CTA plus the app's own page. Wraps rather than
   overflowing, since "Read more" is absent on any app billing has not given a
   descriptionLink yet. */
.mpb__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 4px;
}
.mpb__cta,
.mpb__more {
  font-size: 13px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mpb__cta {
  color: #9000ed;
  font-weight: 600;
}
.mpb__more { color: #6a6d7c; }
.mpb__cta:hover,
.mpb__more:hover { text-decoration: none; }
.mpb__more:hover { color: #9000ed; }

.mpb__tab:focus-visible,
.mpb__nav:focus-visible,
.mpb__cta:focus-visible,
.mpb__more:focus-visible {
  outline: 2px solid #9000ed;
  outline-offset: 2px;
}

/* ── dark ── */
html.dark .mpb__subtitle { color: #a5a7b1; }
html.dark .mpb__bar { border-bottom-color: rgba(255, 254, 255, 0.12); }
html.dark .mpb__tab {
  background-color: rgba(255, 254, 255, 0.05);
  color: #a5a7b1;
}
html.dark .mpb__tab:hover { border-color: #a85bf6; }
html.dark .mpb__tab.is-active {
  background-color: #a85bf6;
  border-color: #a85bf6;
  color: #1d233b;
}
html.dark .mpb__nav {
  background-color: rgba(255, 254, 255, 0.05);
  border-color: rgba(255, 254, 255, 0.2);
}
html.dark .mpb__nav svg { stroke: #fffeff; }
html.dark .mpb__nav:hover:not(:disabled) { border-color: #a85bf6; }
html.dark .mpb__nav:hover:not(:disabled) svg { stroke: #a85bf6; }
html.dark .mpb__app { background-color: rgba(255, 254, 255, 0.05); }
html.dark .mpb__app:hover { border-color: #a85bf6; }
html.dark .mpb__name { color: #fffeff; }
html.dark .mpb__desc { color: #a5a7b1; }
html.dark .mpb__option {
  background-color: rgba(255, 254, 255, 0.05);
  border-color: rgba(255, 254, 255, 0.2);
  color: #fffeff;
}
html.dark .mpb__cta { color: #a85bf6; }
html.dark .mpb__more { color: #a5a7b1; }
html.dark .mpb__more:hover { color: #a85bf6; }
html.dark .mpb__tab:focus-visible,
html.dark .mpb__nav:focus-visible,
html.dark .mpb__cta:focus-visible,
html.dark .mpb__more:focus-visible { outline-color: #a85bf6; }

@media (prefers-reduced-motion: reduce) {
  .mpb__rail { scroll-behavior: auto; }
  .mpb__tab,
  .mpb__nav,
  .mpb__app { transition: none; }
}