/* =============================================================================
   @elements/style — feed

   HN-style vertical feed. Each row is:
     - rank number (left)
     - title + meta line (middle)
     - active dot or empty (right, 16px)

   Stripped to essentials: no vote / reply counts, no heat indicator.
   "Is this happening now?" is answered by the green pulse dot on active
   rows. "When was it posted?" is answered by the timestamp in the meta.

   Only color on the page besides brand accent is the green of the active
   dot, the boosted tag, and the answered checkmark.

   Used on: landing "recently in the community" section, dashboard feed.

   Structure:
     <div class="feed">
       <div class="feed-row">
         <div class="feed-num">1.</div>
         <div class="feed-main">
           <div class="feed-title">
             <span class="feed-pin">PIN</span>
             <a href="#">Title</a>
           </div>
           <div class="feed-meta">
             <span class="feed-author">chris</span>
             <span class="feed-sep">·</span>
             discussion
             <span class="feed-sep">·</span>
             2h ago
           </div>
         </div>
         <div class="feed-active"><span class="feed-active-dot"></span></div>
       </div>
     </div>
============================================================================= */

.feed { margin-top: var(--space-2); }

.feed-row {
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  gap: 0.875rem;
  padding: 0.625rem 0;
  align-items: baseline;
  border-bottom: 1px solid var(--rule-soft);
}
.feed-row:last-child { border-bottom: none; }

/* Row hover: title picks up a thin ink-faint underline. No color shift —
   the brand colors are reserved for the active dot and green signals. */
.feed-row:hover .feed-title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 3px;
}

.feed-num {
  font-family: var(--font-mono);
  font-size: 0.78125rem;        /* 12.5px */
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

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

.feed-title {
  font-family: var(--font-mono);
  font-size: 0.84375rem;        /* 13.5px */
  font-weight: var(--font-medium);
  line-height: 1.4;
  margin-bottom: 0.1875rem;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.feed-title a { transition: color var(--duration-fast) var(--ease-out); }

/* Pin tag — quiet chip. */
.feed-pin {
  font-family: var(--font-mono);
  font-size: 0.5625rem;         /* 9px */
  font-weight: var(--font-semibold);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  background: var(--bg-panel);
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

.feed-title .domain {
  color: var(--ink-dim);
  font-weight: var(--font-regular);
  font-size: 0.71875rem;
  margin-left: 0.25rem;
}
.feed-title .domain::before { content: '('; }
.feed-title .domain::after  { content: ')'; }

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

.feed-meta {
  font-family: var(--font-mono);
  font-size: 0.71875rem;        /* 11.5px */
  color: var(--ink-dim);
  line-height: 1.4;
}
.feed-author   { color: var(--ink-soft); }
.feed-sep      { margin: 0 0.375rem; color: var(--ink-faint); }
.feed-boost    { color: var(--green); font-weight: var(--font-medium); }
.feed-answered { color: var(--green); font-weight: var(--font-medium); }

/* ─── Active dot (right column) ─────────────────────────────────── */

.feed-active {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.25rem;
}
.feed-active-dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  display: block;
}

/* ─── Load more ─────────────────────────────────────────────────── */

.feed-load-more {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--ink-faint);
  padding-bottom: 1px;
  cursor: pointer;
  display: inline-block;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.feed-load-more:hover {
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}
.feed-load-more::before { content: '→ '; color: var(--ink-faint); }