/* Hallmark · page: Following feed shell · theme: hallmark tokens
 *
 * The page is laid out with Tailwind utilities in dashboard/_following.html.erb; the cards are
 * tips/_tip_card.html.erb (tokens in app/assets/tailwind/application.css). This file holds only
 * what utilities cannot do here:
 *
 * - Every app stylesheet is UNLAYERED, so it beats Tailwind's @layer utilities whatever the
 *   specificity. theme_hallmark.css styles `body.hallmark h1, h2, h3` (0,1,1) and
 *   typography.css sizes bare `h1/h2`, so the page's headings carry a class and are pinned here
 *   two classes deep (0,2,0) — the same trick CLAUDE.md records for .hh-desk-title.
 * - The scroll-hint controller's arrows/fades next to #biff-tabs must stay out of layout until
 *   they are switched on, or the page grows a phantom horizontal scroll.
 */

/* ── Headings (pinned against the theme's element rules) ─────────────────── */
.following-wrap .fs-title {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0;
  color: var(--color-sb-hi);
}
@media (min-width: 768px) {
  .following-wrap .fs-title { font-size: 28px; line-height: 32px; }
}
.following-wrap .fs-sec {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-sb-mid);
}

/* ── Biff filter chips: the scroll-hint affordance ──────────────────────── */
#biff-tabs:has(~ .hh-scroll-arrow.is-on) {
  padding-inline: 40px;
  scroll-padding-inline: 40px;
}
#biff-tabs ~ .hh-scroll-arrow:not(.is-on),
#biff-tabs ~ .hh-scroll-fade:not(.is-on) { display: none; }

/* ── Locked strip (follow-only paid biff) ────────────────────────────────── */
@media (hover: hover) {
  .fs-locked { transition: border-color 200ms var(--ease-out); }
  .fs-locked:hover { border-color: --alpha(var(--color-sb-brand) / 40%); }
}
@media (max-width: 520px) {
  /* The CTA must never wrap to two clickable lines; give the name room instead. */
  .fs-locked { flex-wrap: wrap; }
}