/*
 * FeedRow — three-column row anatomy:
 *
 *   [rank] [vote ▲] [title / meta / engagement]
 *
 * Rank and vote are narrow gutters on the left; the body stacks
 * title, meta, engagement vertically. Voting is a single arrow
 * (no number) — score lives on the engagement line below.
 *
 * Mockup spec source: 2026-05-02 feed redesign.
 */

/* Local color tokens — bright kind palette (no red, no green, no brown).
   Each kind gets its own vivid hue so a quick scan separates the kinds
   at a glance:
     show     — amber       (creative output)
     ask      — cyan        (inquiry)
     announce — indigo      (broadcast)
     discuss  — teal        (chatter)
     course   — pink        (curriculum)
     guide    — purple      (official walkthroughs)
     video    — orange      (media)
   Reserved status colors (red error / amber warn) stay untouched
   in their own surfaces. */
.feed-row {
  /* Kind chip colors live in app/shared/styles/global.css as --kind-*.
     The local --fr-kind-* aliases are kept so existing per-kind
     rules below don't have to change selector names; they just
     point at the centralized tokens. Mirror in app/lib/enums.ts
     (KindColor const). */
  --fr-kind-show:     var(--kind-show);
  --fr-kind-ask:      var(--kind-ask);
  --fr-kind-announce: var(--kind-announce);
  --fr-kind-discuss:  var(--kind-discuss);
  --fr-kind-teach:    var(--kind-teach);
  --fr-kind-course:   var(--kind-course);
  --fr-kind-guide:    var(--kind-guide);
  --fr-kind-video:    var(--kind-video);
  --fr-answered:      #15803d;
  --fr-video:         #60a5fa;
  --fr-muted:         var(--ink-dim);
  --fr-rule:          var(--rule-soft);
}

.feed-row {
  display: grid;
  /* Two columns: rank | body. Vote moved into <ActionRow> at the
     bottom of the body, so the gutter chip column is gone. */
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  /* Equal top/bottom 8px — gives a calm 16px-between-content gap
     so the meta stack of one post is clearly separated from the
     title of the next without the row feeling architectural. */
  padding: 8px 0;
  align-items: baseline;
  border-bottom: 1px solid var(--fr-rule);
  color: inherit;
  cursor: pointer;
  width: 100%;
  min-width: 0;
}
.feed-row > .feed-rank {
  /* Restore top-alignment for the rank — its baseline alignment
     against the title would push the digit too far down. */
  align-self: start;
}
.feed-row:last-child { border-bottom: none; }

.feed-row.is-selected,
.feed-row:hover {
  background: var(--bg-soft);
}
/* In keyboard-nav mode the arrow keys drive .is-selected; suppress
   the hover wash on every OTHER row so a stray mouse position doesn't
   compete with the keyboard cursor. The :not(.is-selected) is load-
   bearing — without it, when the mouse happens to sit over the
   keyboard-selected row, this rule strips that row's highlight too,
   making it look like keyboard nav skipped over the mouse-pointed row. */
.feed.is-keyboard-mode .feed-row:hover:not(.is-selected) { background: transparent; }

.feed-row.is-compact {
  grid-template-columns: 1fr;
  gap: 0;
}

/* CourseRow shares the .feed-row class — same 2-column grid; the
   body sits in column 2 alongside post rows so a mixed feed
   reads with one rhythm. */
.feed-row.course-row .feed-body {
  grid-column: 2;
}

/* ─── Rank ────────────────────────────────────────────────────────── */

.feed-rank {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fr-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Top-aligned with the title's text. Tiny padding compensates
     for the rank's smaller font having a smaller cap-line offset
     than the title's cap-line, so the digit's top edge sits on
     the same visual line as the title's first letter top. */
  padding-top: 2px;
  line-height: 1.35;
}

/* ─── Body ────────────────────────────────────────────────────────── */

.feed-body { min-width: 0; }

.feed-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  /* 4px below title, mirrored by 4px above action-row, so both
     metadata lines (byline + action-row) sit at the same rhythm
     relative to the title. */
  margin: 0 0 4px;
  /* Clamp to a single line; overflow → ellipsis. The grid column
     is minmax(0, 1fr), so the title can shrink below its content
     min-width and the ellipsis fires correctly. */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-title-link {
  color: inherit;
  text-decoration: none;
  display: inline;
}
/* Title stays plain on mouse hover — the row-level background wash
   (matching the keyboard .is-selected state) is the entire affordance.
   No accent recolor and no underline so mouse + keyboard behave
   identically. The override below is required because @elements/style
   ships a default `.feed-row:hover .feed-title a` underline rule that
   we don't want; the extra `.feed-title` qualifier wins specificity. */
.feed-row:hover .feed-title .feed-title-link {
  text-decoration: none;
}

/* ─── Meta line ───────────────────────────────────────────────────── */

.feed-meta {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fr-muted);
  line-height: 1.5;
}

/* Kind label. Palette B (all-cool):
     show     — slate
     ask      — teal
     announce — indigo
     discuss  — slate (neutral fallback)
     course   — magenta (distinct from post kinds) */
.feed-kind { font-weight: var(--font-medium); }
.feed-kind.eyebrow--show     { color: var(--fr-kind-show); }
.feed-kind.eyebrow--ask      { color: var(--fr-kind-ask); }
.feed-kind.eyebrow--announce { color: var(--fr-kind-announce); }
.feed-kind.eyebrow--discuss  { color: var(--fr-kind-discuss); }
.feed-kind.eyebrow--teach    { color: var(--fr-kind-teach); }
.feed-kind.eyebrow--course   { color: var(--fr-kind-course); }
.feed-kind.eyebrow--guide    { color: var(--fr-kind-guide); }
.feed-kind.eyebrow--video    { color: var(--fr-kind-video); }

.feed-author        { color: var(--ink-soft); }
/* Handle is a link to /u/<author>. Inherits the muted meta color at
   rest, lights up on hover. <b> stays plain — only the title is
   bold per spec. */
.feed-author .who   { color: inherit; text-decoration: none; }
.feed-author .who:hover { color: var(--accent); }
.feed-author b      { color: inherit; font-weight: 400; }
.feed-time          { color: var(--fr-muted); }

/* Answered icon — outlined green circle with a check, inline in
   the meta line right after the kind label. */
.feed-answered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--fr-answered);
}
.feed-answered svg { width: 16px; height: 16px; display: block; }

/* Video play icon — outlined light-blue circle with a triangle,
   inline in the meta line. */
.feed-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--fr-video);
}
.feed-video svg { width: 16px; height: 16px; display: block; }

/* ─── Action row spacing ──────────────────────────────────────────── */

/* 4px gap between byline and action-row — matches the
   title→byline gap for a balanced 3-line meta stack.
   The action-row content sits flush left (no padding) so vote
   icon aligns with title + byline above. */
.feed-body > .action-row {
  margin-top: 4px;
}

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

@media (max-width: 520px) {
  .feed-row {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
  }
  .feed-row.course-row {
    grid-template-columns: 20px minmax(0, 1fr);
  }
  .feed-title { font-size: 15.5px; }
  .feed-meta  { font-size: 13px; }
}