/* ==========================================================================
   /apps — the live app directory.
   Renders catalog.adessephone.com/manifest.json client-side: grouped shelves,
   a filter, a live count. Typographic on purpose — no third-party icons on a
   marketing surface (see docs/app-catalog.md §1 icon policy).
   ========================================================================== */

[hidden] { display: none !important; }

.apps-hero { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.apps-hero h1 { margin-bottom: 1.25rem; }
.apps-hero .lede { max-width: 46ch; }
.apps-hero p + p { margin-top: 1rem; }

/* ---- Sticky filter bar ---- */
.apps-filterbar {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  padding-block: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
}
.apps-filter {
  flex: 1 1 18rem;
  display: flex;
  min-width: 0;
}
.apps-filter input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--taupe);   /* ≥3:1 boundary on Paper (WCAG 1.4.11) */
  border-radius: 12px;
  padding: 0.8rem 1rem;
}
.apps-filter input::placeholder { color: var(--taupe); }
.apps-filter input:disabled { opacity: 0.6; }
.apps-status {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--taupe);
  margin: 0;
  max-width: none;
}
/* The always-visible request path: a quiet pill riding the sticky bar. */
.apps-ask {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--taupe);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  white-space: nowrap;
  transition: border-color 150ms ease;
}
.apps-ask:hover { border-color: var(--ink); }

/* ---- Shelf jump chips ---- */
.apps-groups-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-size: 0.875rem;
}
.apps-groups-nav a {
  color: var(--taupe);
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  transition: color 150ms ease, border-color 150ms ease;
}
.apps-groups-nav a:hover { color: var(--ink); border-color: var(--taupe); }

/* ---- Shelves ---- */
.app-group {
  margin-top: 2.9rem;
  scroll-margin-top: 5.75rem;   /* clear the sticky filter bar on chip jumps */
}
.app-group h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}
.app-group__note {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--taupe);
}
.app-list {
  margin-top: 1.15rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.15rem 2rem;
}
.app-entry__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
}
.app-entry__desc {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--taupe);
  margin-top: 0.15rem;
}

/* ---- Load / error / empty states ---- */
.apps-loading {
  font-family: var(--sans);
  color: var(--taupe);
  margin-top: 2rem;
}
.apps-error,
.apps-empty {
  margin-top: 2rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.5rem;
  font-family: var(--sans);
}
.apps-error p,
.apps-empty p { max-width: none; }
.apps-error .btn,
.apps-empty .btn { margin-top: 1rem; }


/* The request form the sticky pill jumps to (below the list section, so the
   bar has un-stuck by then; the margin covers the hand-off). */
#request { scroll-margin-top: 2rem; }

@media (max-width: 640px) {
  /* Row 1: search (full width). Row 2: the ask pill, then the live count. */
  .apps-filter { order: 1; }
  .apps-ask { order: 2; }
  .apps-status { order: 3; flex-basis: auto; }
}