/*
 * /feed — hero + simplified toolbar + ranked feed.
 *
 * Hero is a two-line H1 with a sky-accented second line ("Community.
 * What's new."). The toolbar is just a row of filter chips + a "New
 * post" button on the right (logged-in only). FeedRow ships its own
 * styles in app/shared/templates/feed-row/style.css.
 */

.feed-page-shell {
  max-width: var(--container-marketing);   /* 820px — matches /home */
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* Same horizontal-padding ladder as @elements/style's standard
   shells, so /feed lines up with /home, /install, /learn at
   every breakpoint instead of having its own gutter. */
@media (max-width: 700px) { .feed-page-shell { padding: 0 var(--space-5); } }
@media (max-width: 640px) { .feed-page-shell { padding: 0 var(--space-4); } }

/* ─── Hero ────────────────────────────────────────────────────────── */

.feed-page-hero { padding: 0; }

/* Title + "+ New Post" inline on the SAME row at every viewport.
   flex-wrap: nowrap so the button never drops below the title on
   narrow screens — both labels are short enough to fit even on
   iPhone widths. The button is center-aligned against the tall h1
   so its centroid lines up with the h1's optical midpoint. */
.feed-page-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1rem;
}
.feed-page-hero-row .button-new {
  flex-shrink: 0;
}

/* h1 typography + margins come from the canonical .feed-page-h1
   rule in app/shared/styles/global.css (the same forced rule shared by
   /install, /pricing, /account, /notifications, etc.). No local
   overrides — keeps the title-to-lede rhythm identical across every
   top-level page. */
.feed-page-h1 .accent { color: var(--accent); }

.feed-page-lede {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  /* line-height: 1.5 (down from 1.6 in globals) trims the trailing
     half-leading below the last line so the lede block bottom edge
     hugs the descender. Combined with margin: 0 !important, the only
     gap to the pill row below is the toolbar's own margin-top. */
  line-height: 1.5 !important;
  max-width: 34rem;
  margin: 0 !important;
  padding: 0 !important;
}

/* ─── Toolbar ─────────────────────────────────────────────────────── */

/* Two-row layout: "+ Post" alone on top (right-aligned), filter pills
   below (left-aligned). Stacking them removes the action-vs-filter
   competition that the side-by-side layout had, AND lets the pills
   take the full row width without crowding the Post button. */
/* Symmetric, tight padding above and below the pill row. Using
   padding (not margin) so margin-collapse against the lede above /
   feed below can't bite. Zero margin top/bottom; padding gives the
   visible breathing room. */
.feed-page-toolbar {
  display: flex;
  flex-direction: column;
  margin: 0;
  /* Generous bottom padding so the filter pills don't smash into the
     first feed row. The pills are a navigation step; the rows are
     content — visual separation matches the mental hierarchy. */
  padding: 0.5rem 0 2rem;
}

/* Single-line pill row. flex-wrap: nowrap on every viewport — the
   pills do NOT line-break. On narrow viewports the row scrolls
   horizontally; the scrollbar chrome is hidden on every browser so
   the scroll feels native and quiet. The .scroll-pad after the last
   pill keeps the final pill from sitting flush against the right
   edge during scroll. */
.feed-page-toolbar .kind-pills {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.375rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Negative left/right margins push the scroll viewport edge-to-edge
     on mobile so the first/last pill can scroll all the way out
     without leaving an awkward inner-padding strip. Padding on the
     row restores the visible inset. */
  margin: 0 calc(var(--space-4) * -1);
  padding: 0 var(--space-4);
}
.feed-page-toolbar .kind-pills::-webkit-scrollbar { display: none; }

/* Inactive: outlined pill — visible chrome from the start so the row
   reads as PILLS, not as a strip of underlined tabs. Subtle —
   --rule-soft border + ink-soft text. flex-shrink: 0 so the pill
   never squeezes when the row scrolls. */
.feed-page-toolbar .kind-pill {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--font-regular);
  color: var(--ink-soft);
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-soft);
  background: transparent;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-out),
    color      var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.feed-page-toolbar .kind-pill:hover {
  color: var(--ink);
  border-color: var(--rule);
  background: var(--bg-soft);
}

/* Active: brand-blue treatment — accent-soft fill + accent border +
   accent-deep text. Recognizable as "selected" via the brand color
   without filling solid blue. To deselect, click the pill again
   (toggle). No separate Clear link — toggling does that job. */
.feed-page-toolbar .kind-pill.is-active {
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-color: var(--accent-dot);
}
.feed-page-toolbar .kind-pill.is-active:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--accent-soft));
  border-color: var(--accent);
}

.button-new {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--font-medium);
  line-height: 1;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6875rem 1.25rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.button-new:hover { background: #2a2a2e; }
/* SVG plus glyph — pixel-aligned and stroke-symmetric, so the
   horizontal and vertical strokes cross at the geometric center
   of the box. The text "+" character has font-metric whitespace
   on top that left it floating above the "New" label's x-height. */
.button-new-plus {
  display: inline-block;
}
/* Optical centering: Inter's hhea ascent is far larger than its
   descent, so with line-height: 1, glyphs sit above the line-box
   midpoint while the SVG plus is geometrically centered — the two
   go out of sync. Nudge the label down 1px so it lands on the same
   horizontal mid-line as the plus. */
.button-new > span {
  margin-top: 1px;
}

/* ─── Feed ────────────────────────────────────────────────────────── */

.feed-page-feed { margin-top: 0.5rem; }

.feed-page-empty {
  padding: 2rem 0;
  text-align: left;
  color: var(--ink-dim);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

/* ─── Pager — borrows the post / lesson nav-footer chrome ─────────── */

/* Layout + button styles come from app/shared/templates/nav-icons/style.css.
   Local override: the middle "range" card is wider than the parent-icon
   slot used on post / lesson pages (text needs more room than a 16-px
   chevron), so widen min-width and use mono small-caps for the count. */
.feed-page-pager-range {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
  min-width: 8rem;
  white-space: nowrap;
}

/* ─── Sign-in prompt (logged-out only) ────────────────────────────── */

.feed-page-signin-prompt {
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.feed-page-signin-link {
  color: var(--ink);
  font-weight: var(--font-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-faint);
}
.feed-page-signin-link:hover {
  text-decoration-color: var(--ink);
}

/* ─── Mobile ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .feed-page-h1 { font-size: 2.5rem; }
  .feed-page-hero { padding-top: 2rem; }

  /* Tight, symmetric toolbar padding on mobile. Same pattern as
     desktop — padding, not margin, so margin-collapse can't sneak
     in extra air. */
  .feed-page-toolbar {
    margin: 0;
    padding: 0.375rem 0;
  }
  .feed-page-feed { margin-top: 0; }

  /* The pill row on mobile gets edge-to-edge horizontal scroll. The
     negative margins extend past the page shell's --space-4 inset so
     the first/last pill can swipe all the way to the screen edge,
     and padding restores the visible inset. Variables resolved
     against the page-shell padding tokens keep the math consistent
     across breakpoints. */
  .feed-page-toolbar .kind-pills {
    margin: 0 calc(var(--space-4) * -1);
    padding: 0 var(--space-4);
  }
}