/*
 * Mobile-first layer for the browse hub (`/browse`) and facet landing pages
 * (`/browse/{facet}/{slug}`, `/browse/source/{type}/{slug}`) -- design/wpa-dev.md §10.
 *
 * Loaded only by those two pages, the same pattern as book.css/chat.css. Neither page had a
 * dedicated stylesheet before this: their desktop layout lives entirely in site.css's
 * .browse-group/.chip/.facet-hero/.story-card rules, which this file extends rather than replaces --
 * everything below is either unstyled at desktop widths or an explicit @media (max-width: 48rem)
 * override.
 */

/* ---------- browse hub: <details> per facet group ----------
 *
 * Markup is now <details class="browse-group" open><summary>...</summary><ul class="chips">...
 * instead of <section><h2>...<ul>. `open` by default means every chip is in the rendered DOM and
 * visible with no JavaScript, exactly as before. Desktop keeps the exact behaviour of the plain
 * heading it replaced -- pointer-events: none stops a stray click from collapsing a list a mouse
 * user never asked to collapse, though Enter/Space on a tabbed-to <summary> still works, which is
 * new keyboard reach rather than a regression. Only under the mobile breakpoint does it become the
 * large tappable row the click (and tap) is meant for.
 */
.browse-group__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: default;
  pointer-events: none;
  list-style: none;
  /* Chrome/Safari still draw a default marker on <summary> even with list-style:none in some
     engines; the pseudo-element covers Chromium, this covers Firefox/Safari. */
}

.browse-group__heading::-webkit-details-marker { display: none; }

.browse-group__icon { display: none; }

.browse-group__chevron {
  display: none;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  flex: none;
  color: var(--color-text-faint);
  transition: transform 0.2s ease;
}

.browse-group[open] .browse-group__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .browse-group__chevron { transition: none; }
}

@media (max-width: 48rem) {
  .browse-group {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-block-end: var(--space-3);
    background: var(--color-surface);
  }

  .browse-group__heading {
    cursor: pointer;
    pointer-events: auto;
    padding: var(--space-4);
    /* 48px+ tall row: a large tappable target, not a text heading with a click handler bolted on. */
    min-block-size: 3rem;
    font-size: var(--text-base);
    font-weight: 600;
  }

  .browse-group__icon,
  .browse-group__chevron { display: block; }

  .browse-group__icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
    color: var(--color-accent-bright);
  }

  .browse-group__label { flex: 1 1 auto; }

  .browse-group .chips { padding: 0 var(--space-4) var(--space-4); margin: 0; }
}

/* ---------- facet landing page: sticky compact header ---------- */

.facet-hero__back {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.facet-hero__back a { color: inherit; }

.facet-hero__back a:hover { color: var(--color-accent-bright); }

@media (max-width: 48rem) {
  .facet-hero {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    border-radius: 0;
    margin-inline: calc(-1 * var(--space-5));
    margin-block-end: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: color-mix(in oklab, var(--color-canvas) 94%, transparent);
    backdrop-filter: blur(8px);
  }

  .facet-hero__title {
    font-size: var(--text-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
  }

  /* The compact header is the back-affordance-plus-title-plus-count the design asks for; the
     longer-form blurb belongs to the fuller desktop hero, not a sticky strip that stays on screen
     while scrolling the whole list underneath it. */
  .facet-hero__blurb { display: none; }
}

/* ---------- sibling chip row ----------
 *
 * Switching filters without a full back-navigation: every chip a real <a href> to that sibling's own
 * facet URL, so it works with JS off exactly like the desktop search tree does. Desktop already has
 * no equivalent affordance and doesn't need one -- /browse is one click away -- so this stays a
 * mobile-only addition.
 */
.facet-siblings {
  display: none;
}

@media (max-width: 48rem) {
  .facet-siblings {
    display: block;
    margin-block-end: var(--space-5);
    margin-inline: calc(-1 * var(--space-5));
    padding-inline: var(--space-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .facet-siblings__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .facet-siblings__list li { flex: none; }
}

/* ---------- story cards: facet chips + read dot ---------- */

.story-card { position: relative; }

.story-card__chips { margin-block-start: var(--space-3); }

/*
 * Same mint dot as the home book's read/unread marker (design/wpa-dev.md §6) -- one visual
 * language for "you have already read this" everywhere it appears.
 */
.story-card--read::after {
  content: "";
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--color-accent-bright);
  box-shadow: 0 0 6px color-mix(in oklab, var(--color-accent-bright) 70%, transparent);
}

@media (max-width: 48rem) {
  .story-list { grid-template-columns: 1fr; }
}