@import "https://assets.elements.dev/assets/app/shared/styles/page.b9b382b613ec836c.css";

/*
 * /feed — hero + simplified toolbar + ranked feed.
 *
 * Hero is a two-line H1 with an accent-colored 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;
  margin-bottom: 2.5rem;
}

/* 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;
}

/* Canonical top-level page title — same treatment as .page-hero-title
   in app/shared/styles/site.css (3rem desktop / 2.5rem on phones, set
   in the mobile block below) so the title-to-lede rhythm stays
   identical across every top-level page. */
.feed-page-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--page-title);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 2rem 0 var(--space-4);
  color: var(--ink);
}
.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 the canonical lede's 1.6) trims the
     trailing half-leading below the last line so the lede block
     bottom edge hugs the descender. Combined with margin: 0, the
     only gap to the pill row below is the toolbar's own margin-top. */
  line-height: 1.5;
  max-width: 34rem;
  margin: 0;
  padding: 0;
}

/* ─── 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;
  /* Negative top margin to absorb the hero's implicit bottom gap
     so lede→pills reads at the same rhythm as pills→feed. The hero
     contributes ~40px of intrinsic gap (h1 bottom margin + lede
     line-box descender + flex baseline) that we can't easily kill
     from the inside; pulling the toolbar UP closes the visual gap
     without touching the hero. The padding-bottom below pills then
     gives pills→feed a comparable air. */
  margin: -1.25rem 0 0;
  padding: 0;
}

/* 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(--weight-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-edge);
}
.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(--weight-medium);
  line-height: 1;
  /* Brand blue — the same var(--accent) the home-page install CTA, the
     is-primary buttons, and the logo use, so every primary action matches.
     Blue in both themes (#49A9E7 / elements-blue-500) with white --accent-ink. */
  background: var(--accent);
  color: var(--accent-ink);
  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: var(--accent-deep); }
/* 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(--weight-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; margin-top: 1.5rem; }

  /* Mobile uses the same negative-margin trick as desktop: pull
     the toolbar UP to absorb the hero's intrinsic bottom gap,
     padding 0 below so the first feed row's own top spacing
     (.feed-page-feed margin) is what gives pills→feed air. The
     two gaps then read equidistant. Tuned by screenshot pass. */
  .feed-page-toolbar {
    margin: -1rem 0 0;
    padding: 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);
  }
}