/* search.css — Discover (/en/discover) + Search results (/en/search) + tag pages (/en/tag/{slug}),
   hub1 → reworked in Social RUN 6 (Discovery & Search: post-snapshot cards, People rows via
   social.css's .fl-row, tag pages). --bb-* tokens only; hard 2px bevels, no soft/blurred shadows
   (matches home.css/components.css). */

.disco { padding-block: var(--space-2xl) var(--space-3xl); background-color: var(--bb-field); min-block-size: 60vh; }
.disco__title { font-family: var(--bb-font-poster); color: var(--bb-gold); font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl)); text-transform: uppercase; margin-block-end: var(--space-lg); }

/* Search bar — hard-edged retro terminal input, no pill shape. The button sits FLUSH against the
   container's right edge (no gap): the container itself carries no gap/padding, spacing between the
   icon and input is scoped to just that pair via margin on the icon, and the button stretches to the
   bar's full height + is squared off (border-radius:0), clipped by the container's own overflow:hidden
   so it still visually respects the container's rounded corners without needing its own radius. */
.srch-bar {
  display: flex;
  align-items: center;
  background-color: var(--bb-frame);
  border: 2px solid var(--bb-gold);
  border-radius: var(--bb-radius);
  overflow: hidden;
  margin-block-end: var(--space-2xl);
  max-inline-size: 640px;
}
.srch-bar__icon {
  inline-size: 20px; block-size: 20px; color: var(--bb-warmwhite); flex-shrink: 0;
  margin-inline: var(--space-md) var(--space-sm);
}
.srch-bar__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-warmwhite);
  padding-block: var(--space-sm);
}
.srch-bar__input::placeholder { color: rgba(255, 244, 238, 0.55); }
.srch-bar__input:focus { outline: none; }
.srch-bar__submit {
  flex-shrink: 0;
  align-self: stretch;
  margin: 0;
  min-block-size: auto;
  border-radius: 0;
}

.disco__section { margin-block-end: var(--space-2xl); }
.disco__label {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-breadcrumb);
  margin-block-end: var(--space-md);
}
.disco__empty, .disco__soon { color: var(--bb-warmwhite); font-size: var(--fs-md); }
.disco__soon { color: var(--bb-dimpink); margin-block-start: var(--space-sm); }

/* Trending / result tags — beveled pills. */
.tag-pills { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-sm);
  color: var(--bb-warmwhite);
  background-color: var(--bb-berry);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  text-decoration: none;
  min-block-size: 44px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.28), inset -2px -2px 0 rgba(14,10,12,0.4);
  transition: filter 150ms ease;
}
.tag-pill:hover { filter: brightness(1.12); color: var(--bb-warmwhite); }
.tag-pill__count { color: var(--bb-gold); font-family: var(--font-mono); }

/* Post-snapshot card grid (RUN 6) — Dolls search results, Discover Fresh/Popular, tag pages. The
   snapshot links to the post; the author handle links to the profile; static reaction/comment
   counts (the live animated bar stays on the feed + post view). Flat warm-white card, hard 2px
   border, hard offset shadow — the anti-clunk surface law. */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-md); }
.pc-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  overflow: hidden;
  box-shadow: 3px 3px 0 0 var(--bb-black);   /* hard offset — zero blur */
}
.pc-card__stage {
  display: block;
  background-color: var(--bb-canvas);
  border-block-end: 2px solid var(--bb-frame);
}
.pc-card__stage:hover { filter: brightness(1.12); }
.pc-card__stage:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: -2px; }
.pc-card__stage img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  image-rendering: pixelated;   /* the frozen snapshot stays crisp */
}
.pc-card__body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-sm); }
.pc-card__author {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--bb-berry);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.pc-card__author:hover { color: var(--bb-frame); }
.pc-card__caption { color: var(--bb-frame); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pc-card__counts {
  display: flex;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--bb-panel);
  margin-block-start: var(--space-xs);
}

/* People results reuse social.css's .fl-row (the follow-list row); this scope only caps width. */
.srch-people { max-inline-size: 640px; }

/* Tag pages (RUN 6). */
.tagpage__head { margin-block-end: var(--space-lg); }
.tagpage__eyebrow { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--bb-mint); }
.tagpage__count { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--bb-breadcrumb); }
.tagpage__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-xl);
}
.tagpage__empty-star { color: var(--bb-gold); font-size: var(--fs-xl); letter-spacing: 0.4em; }
.tagpage__back { margin-block-start: var(--space-2xl); }

/* Result tabs — flat, gold underline for the active tab (the global "gold = selected" rule). */
.srch-tabs { display: flex; gap: var(--space-lg); border-block-end: 2px solid var(--bb-berry-dark); margin-block-end: var(--space-lg); }
.srch-tab {
  padding-block: var(--space-sm);
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-md);
  color: var(--bb-warmwhite);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -2px;
}
.srch-tab:hover { filter: brightness(1.15); }
.srch-tab.is-active { color: var(--bb-gold); border-block-end-color: var(--bb-gold); }

.srch-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); margin-block-start: var(--space-xl); }
.srch-pager__status { color: var(--bb-dimpink); font-size: var(--fs-sm); font-family: var(--font-mono); }

@media (max-width: 576px) {
  .pc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── Game Layer BUILD 3b — the Charts entry point on Discover (public). ───────────────────────── */
.disco__charts-link {
  margin: var(--space-sm) 0 var(--space-lg);
  text-align: center;
}