/* ============================================================================
   Body / Newsfeed — Create Post + Pinned Posts
   Figma: FE Client file, node 12518:254646, variant PAGE=Home - Future

   ⚠️ THIS SCREEN HAS NO DS RECIPE. `COMPONENTS.md` contains zero mentions of
   "Newsfeed", "Create Post" or a Post/Feed section — it is app-level
   composition living in the FE Client file, and it is built on that file's
   LOCAL styles rather than on the token layer.

   As instructed, the local styles are disregarded and everything resolves
   through DESIGN.md instead. The mapping, for the record:

     General/White            #ffffff  -> surface/raised            exact
     Text & Icons/Primary     #595959  -> content/primary            exact (Neutral/800)
     Text & Icons/Marginal    #8c8c8c  -> content/secondary          exact (Neutral/700)
     Text & Icons/Headlines   #262626  -> content/headline           SHIFTED: #262626 is
                                          Neutral/1000, a *surface* primitive; the ink
                                          token is Neutral/1200 #141414
     General/BG Light         #f6f6f6  -> soft/neutral/default       OFF-PALETTE (#f5f5f5)
     Elements/Borders&Dividers #e8e8e8 -> border/default             OFF-PALETTE (#d9d9d9)
     Alert/Success/Primary    #509e2a  -> content/success            OFF-PALETTE
     Tags/Orange Dark/*                -> no orange ramp exists      see .tag--entity

     Headlines/H4 - Bold      16/1.5   -> heading/sm + bold          exact
     Text & P/Text M - Bold   14/22    -> body/md + bold             exact
     Text & P/Text M - Medium 14/22    -> body/md + medium           exact
     Text & P/Text S          12/20    -> body/sm                    exact
     Elements/Input M         14/22    -> body/md                    exact
     Elements/Button M        14/22    -> body/md                    exact
     Elements/Tag S           12/1.7   -> body/sm (1.67)             near

   Geometry maps cleanly: 16 -> space/md, 8 -> space/xs, 4 -> space/2xs,
   2 -> space/3xs, 24 -> space/lg; radius 8 -> shape/radius/card,
   4 -> shape/radius/chip, 100 -> radius/full.

   TODO(tokens): every bare px length in this file is a SIZE.
   DESIGN.md §12.4 records size as not built.
   ========================================================================== */

.feed {
  display: flex;
  flex-direction: column;
  /* Figma: 16px between every block in the Newsfeed frame. */
  gap: var(--space-md);
}

.feed__card {
  background: var(--color-surface-raised);
  border-radius: var(--shape-radius-card);
  padding: var(--space-md);
}

/* ============================================================================
   Create Post
   ========================================================================== */

.create-post {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* `Input / Default / Base` — §2.1, bound to its real contract rather than to
   the local style. The DS says: fill `surface/raised` in every state but
   Disabled, border carries the state machine, 1px going to 2px on Focus, and
   the placeholder is `content/placeholder`. The Figma file instead fills it
   with the off-palette `#f6f6f6` and draws no border at all. §2.1 wins.

   §2.1 is also the file's reference implementation of Focus, so the ring here
   is the border-width step it specifies, not the generic outline in base.css. */
.create-post__field {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  align-items: center;
  /* TODO(tokens): control height not built. 40 is the documented Input height. */
  block-size: 40px;
  padding: var(--space-xs);
  background: var(--color-surface-raised);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--shape-radius-input);
  color: var(--color-content-placeholder);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  text-align: start;
  transition: border-color 100ms ease, border-width 100ms ease;
}

.create-post__field:hover {
  border-color: var(--color-border-brand-hover);
}

.create-post__field:focus-visible {
  /* §2.1 Focus: `border/focus` at 2px. The width step is the whole point, so
     no outline is used — this is the DS's own focus treatment. */
  outline: none;
  border-color: var(--color-border-focus);
  border-width: var(--shape-focus-width);
  color: var(--color-content-primary);
}

.create-post__actions {
  display: flex;
  flex: none;
  align-items: center;
  /* Figma: 24px between the attachment affordances. */
  gap: var(--space-lg);
}

/* Bare icon buttons — `Button / Default` type Text (§1.1): no fill, no border,
   `content/primary`, tinting to `soft/neutral/default` on hover. The Figma
   emits `border-0 border-[#595959]`, i.e. a zero-width border carrying a
   colour, which is why the local version looks borderless. */
.create-post__action {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* TODO(tokens): touch target size not built. */
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--shape-radius-button);
  color: var(--color-content-primary);
  transition: background-color 100ms ease, color 100ms ease;
}
.create-post__action:hover {
  background: var(--color-soft-neutral-default);
  color: var(--color-on-soft-neutral);
}
.create-post__action:active {
  background: var(--color-soft-neutral-pressed);
}

/* ============================================================================
   Pinned Posts
   `Row / Section Title` (§22.4) for the heading — `content/headline`.
   ========================================================================== */

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-md);
  color: var(--color-content-headline);
  font-family: var(--font-family-display);
  font-size: var(--font-heading-sm-size);
  line-height: var(--font-heading-sm-line-height);
  /* §22.4 gives `Row / Section Title` content/headline; the local style is
     H4 Medium where the DS type ramp makes every heading bold (DESIGN.md §5.2:
     "bold 700 — default for all headings"). Bold, per DESIGN.md. */
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-default);
}

.section-title .icon {
  color: var(--color-content-headline);
}

/* The pinned row scrolls horizontally — three 320px cards in a 568px measure
   cannot fit, and the Figma frame clips them. */
.pinned {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  /* Room for the cards' focus rings inside the scroll container. */
  padding: var(--space-3xs);
  margin: calc(-1 * var(--space-3xs));
  scrollbar-width: thin;
}

.pinned__card {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-md);
  /* TODO(tokens): size not built. 320x176 is the Figma card. */
  inline-size: 320px;
  min-block-size: 176px;
  padding: var(--space-md);
  background: var(--color-surface-raised);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--shape-radius-chip);
  text-align: start;
  color: var(--color-content-primary);
}

.pinned__card:hover {
  background: var(--color-soft-neutral-default);
}

.pinned__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* Denser: with the stray <p> margins gone this is the real row rhythm, and
     `space/2xs` is what the reference card shows — tag, title, date, donors and
     the progress bar packed rather than drifting apart. */
  gap: var(--space-2xs);
  min-block-size: 0;
  /* Children fill the card; only the chip hugs (see tag.css). */
  align-items: stretch;
}

/* The title + date pair is one visual unit, so it stays tighter than the
   surrounding rows. */
.pinned__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

/* The excerpt is clamped rather than ellipsised on one line — the Figma card is
   a fixed 176 tall with the text filling it. */
.pinned__excerpt {
  margin: 0;
  color: var(--color-content-primary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.pinned__title {
  margin: 0;
  color: var(--color-content-headline);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-bold);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* --- Meta lines: date, donors ------------------------------------------- */
.meta-line {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  /* `.meta-line` is used on <p>, which carries a 1em block margin by default.
     Inside a flex column that margin does not collapse, so it was adding 16px
     on top of the 4px gap — the rows read as loose when the gap said otherwise.
     This is what made the card feel sparse. */
  margin: 0;
  color: var(--color-content-primary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

/* --- Crowdfunding progress ---------------------------------------------
   DESIGN.md §4.3 names `soft/neutral/strong` for exactly this: "Control track:
   switch off-state, slider rail, progress track. Heavier than
   soft/neutral/pressed because a track must stay visible against its surface."
   The local style used the off-palette #f6f6f6 for the track and #509e2a for
   the fill; the fill is `solid/success/default`. */
.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.progress__track {
  block-size: var(--space-2xs);
  border-radius: var(--radius-full);
  background: var(--color-soft-neutral-strong);
  overflow: clip;
}

.progress__fill {
  block-size: 100%;
  border-radius: var(--radius-full);
  background: var(--color-solid-success-default);
}

.progress__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  color: var(--color-content-secondary);
}

.progress__amount {
  color: var(--color-content-success);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-medium);
}

/* ============================================================================
   Tag / Entity — §12.2 / apps/fe-client/CLAUDE.md
   ⚠️ The Figma "Crowdfunding" tag uses `Tags/Orange Dark` — #610b00 on
   #fff2e8. This is the defect the app's own CLAUDE.md lists: "`Tag / Entity`
   uses raw pastel/dark pairs for community, program, campaign, video (§12 F4)".

   It cannot be fixed by mapping, because DESIGN.md has NO orange ramp — the
   only status ramps are Red, Gold, Green and Blue. Mapping it to `soft/warning`
   would give roughly the right hue while claiming "caution", which is wrong for
   a funding category. So entity tags render neutral here and the gap is
   reported rather than papered over. See the README.
   ========================================================================== */
.tag--entity {
  background: var(--color-soft-neutral-default);
  color: var(--color-on-soft-neutral);
  /* Finding 1 for the third time: in Dark `soft/neutral/default` and
     `surface/raised` are both Neutral/950, so a soft-neutral chip on a raised
     card is invisible. Same hairline mitigation as the navbar search field.
     One declaration, both modes. */
  border-color: light-dark(transparent, var(--color-border-strong));
}

/* --- Button / Entity — the community pill on a post header -------------- */
.entity-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-2xs) var(--space-xs);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  color: var(--color-content-primary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  text-decoration: none;
  white-space: nowrap;
  max-inline-size: 100%;
}
.entity-pill:hover {
  background: var(--color-soft-neutral-default);
}

.entity-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ASSETS.md §5 rule 2 — a logo is an <img>, never a mask, and never recoloured. */
.entity-pill__logo {
  flex: none;
  /* TODO(tokens): size not built. 16px is the Figma avatar slot. */
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--shape-radius-avatar);
}