/* ============================================================
   FS25 Portal — Content pages
   Depends on: 01-tokens.css, 02-base.css, 03-layout.css, 04-components.css
   ------------------------------------------------------------
   Feed cards (home / changelog / bookmarks), the changelog
   timeline, the roadmap board, search results, notifications,
   and the error page shell. Buttons, forms, alerts, avatars,
   status badges, tables, empty states, the modal shell, markdown
   prose and attachments already live in 04-components.css and
   are not touched here.
   ============================================================ */

/* ============================================================
   Shared post primitives
   ------------------------------------------------------------
   Reused across the feed, the changelog plate, comments, search
   results and roadmap cards, so they're defined once.
   ============================================================ */

.author-name {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.post-date {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.stat-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.stat-item svg { flex-shrink: 0; opacity: 0.7; }

/* ============================================================
   Posts grid
   ============================================================ */

.posts-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

/* ============================================================
   Post card
   ------------------------------------------------------------
   The flat enamelled panel every feed entry sits on. Pinned
   posts get the same amber edge the spec plate uses elsewhere,
   rather than a badge that fights for attention on its own.
   ============================================================ */

.post-card {
  position: relative;
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--edge-light);
  transition: border-color var(--t) var(--ease);
}

.post-card:hover { border-color: var(--border-strong); }

.post-card.pinned,
.changelog-card.pinned {
  border-left: var(--plate-edge) solid var(--amber);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

.post-card > .post-pin-badge { margin-bottom: var(--s3); }

/* ============================================================
   Post header / author / actions
   ============================================================ */

.post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.post-author {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.post-author > div:last-child {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s1) / 2);
  min-width: 0;
}

.post-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}

.bookmark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s6);
  height: var(--s6);
  flex-shrink: 0;
  color: var(--text-dim);
  background: transparent;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}

.bookmark-btn:hover {
  border-color: var(--amber-line);
  color: var(--amber);
  background: var(--amber-soft);
}

.bookmark-btn.active {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}

/* ============================================================
   Post title + image
   ============================================================ */

.post-title { margin-bottom: var(--s3); }

.post-image {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s4);
}

.post-image img {
  width: 100%;
  max-height: calc(var(--s5) * 15);
  object-fit: cover;
}

.post-image.small img { max-height: calc(var(--s5) * 7.5); }

/* When the image opens the card (no pin badge ahead of it) it
   bleeds to the card's edges, like glass set into the panel. If
   a pin badge precedes it, it stays inset — bleeding it would
   pull it up underneath the badge. */
.post-card > .post-image:first-child,
.changelog-card > .post-image:first-child {
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: var(--hairline) solid var(--border);
}

.roadmap-card > .post-image.small:first-child {
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s3);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: var(--hairline) solid var(--border);
}

/* ============================================================
   Post stats
   ============================================================ */

.post-stats {
  display: flex;
  gap: var(--s4);
  margin: var(--s4) 0;
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--border-faint);
}

.post-stats.compact {
  gap: var(--s3);
  margin: var(--s3) 0;
  padding-top: var(--s3);
}

/* ============================================================
   Post footer — reactions + comment toggle
   ============================================================ */

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--border);
}

.post-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}

.reaction-btn:hover {
  border-color: var(--amber-line);
  background: var(--surface-3);
}

.reaction-btn.active {
  border-color: var(--amber);
  background: var(--amber-soft);
  color: var(--amber);
}

.reaction-btn.tiny {
  padding: calc(var(--s1) / 2) var(--s1);
  font-size: var(--fs-2xs);
}

.reaction-emoji { font-size: 0.95em; line-height: 1; }

.reaction-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.btn-comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
  background: transparent;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.btn-comment-toggle:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

/* ============================================================
   Comments
   ============================================================ */

.comments-section {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--border);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.comment-item {
  display: flex;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
}

.comment-body { flex: 1; min-width: 0; }

.comment-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: calc(var(--s1) / 2);
}

.comment-author {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.comment-date {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

.comment-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-dim);
}

.comment-form {
  display: flex;
  gap: var(--s2);
}

.comment-input {
  flex: 1;
  padding: var(--s2) var(--s3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.comment-input:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--bg);
}

/* ============================================================
   Changelog timeline
   ------------------------------------------------------------
   A tramline-style spine with a stamped marker at each entry.
   The entry's byline is styled as an inset spec plate — the
   same recipe as 02-base.css's .spec-plate (surface-2 body,
   amber left edge, flat-then-rounded corners) rather than a
   parallel treatment.
   ============================================================ */

.changelog-timeline {
  position: relative;
  padding-left: var(--s6);
}

.changelog-timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--s3) - var(--hairline));
  top: 0;
  bottom: 0;
  width: var(--hairline);
  background: var(--border);
}

.changelog-entry {
  position: relative;
  margin-bottom: var(--s6);
}

.changelog-entry:last-child { margin-bottom: 0; }

.changelog-marker {
  position: absolute;
  left: calc(var(--s3) - var(--hairline) - (var(--s3) / 2) - var(--s6));
  top: calc(var(--s5) + var(--s1));
  width: var(--s3);
  height: var(--s3);
  border-radius: var(--r-round);
  background: var(--amber);
  border: var(--plate-edge) solid var(--bg);
  box-shadow: 0 0 0 var(--hairline) var(--amber-line);
  z-index: 1;
}

.changelog-card {
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--edge-light);
}

/* The byline as a spec plate: machine data (author, date) on a
   stamped insert rather than a plain row. */
.changelog-card .post-header {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--amber);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--edge-light);
}

.changelog-card .post-title { font-size: var(--fs-md); }

/* ============================================================
   Roadmap board
   ------------------------------------------------------------
   Three columns read as one progression: dormant steel, active
   amber, harvested green. The column header carries the state
   colour as a stamped top edge; cards below pick up the same
   colour as a thin left edge so the read holds all the way down
   the column, not just at the header.
   ============================================================ */

.roadmap-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--s7) * 6), 1fr));
  gap: var(--s5);
  align-items: start;
}

.roadmap-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.roadmap-column-header {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  color: var(--text-dim);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-top: calc(var(--plate-edge) + var(--hairline)) solid var(--border-strong);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--edge-light);
}

.roadmap-column-header svg { flex-shrink: 0; color: inherit; }

.roadmap-column-header h3 {
  flex: 1;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
}

.roadmap-column-header .count {
  min-width: var(--s5);
  padding: var(--hairline) var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: inherit;
  background: var(--bg-sunk);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
}

.roadmap-column-header.planned  { border-top-color: var(--state-planned);  color: var(--state-planned); }
.roadmap-column-header.progress { border-top-color: var(--state-progress); color: var(--state-progress); }
.roadmap-column-header.done     { border-top-color: var(--state-done);    color: var(--state-done); }

.roadmap-empty {
  padding: var(--s6) var(--s4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  border: var(--hairline) dashed var(--border);
  border-radius: var(--r-lg);
}

.roadmap-card {
  display: flex;
  flex-direction: column;
  padding: var(--s4);
  margin-bottom: var(--s3);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--border-strong);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: var(--edge-light);
  transition: border-color var(--t) var(--ease);
}

.roadmap-card:last-child { margin-bottom: 0; }
.roadmap-card:hover { border-color: var(--border-strong); }

/* Column order is fixed by roadmap.ejs (planned, in_progress,
   done) so structural position is a safe way to carry the state
   colour down into the card without a class on the card itself. */
.roadmap-column:nth-child(1) .roadmap-card { border-left-color: var(--state-planned); }
.roadmap-column:nth-child(2) .roadmap-card { border-left-color: var(--state-progress); }
.roadmap-column:nth-child(3) .roadmap-card { border-left-color: var(--state-done); }

.roadmap-card .post-header { margin-bottom: var(--s2); }
.roadmap-card .post-title { font-size: var(--fs-base); margin-bottom: var(--s2); }

.roadmap-expand-btn {
  align-self: flex-start;
  margin-top: var(--s1);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--amber);
}

.roadmap-expand-btn:hover {
  color: var(--amber-bright);
  text-decoration: underline;
}

/* ============================================================
   Search page
   ============================================================ */

.search-result {
  display: block;
  color: inherit;
}

.search-result:hover { border-color: var(--amber-line); }

.search-result-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.category-badge {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--s1) / 2) var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
}

.search-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hairline) solid var(--border);
}

.search-stats {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.search-stats svg { flex-shrink: 0; opacity: 0.7; }

/* ============================================================
   Notifications
   ============================================================ */

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.notification-item:hover { border-color: var(--border-strong); }

.notification-item.unread {
  background: var(--amber-soft);
  border-left: var(--plate-edge) solid var(--amber);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s6);
  height: var(--s6);
  flex-shrink: 0;
  color: var(--text-dim);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
}

.notification-icon[class*="type-comment"]  { color: var(--steel); border-color: var(--steel-line); background: var(--steel-soft); }
.notification-icon[class*="type-reaction"] { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.notification-icon[class*="type-ticket_"]  { color: var(--steel); border-color: var(--steel-line); background: var(--steel-soft); }

.notification-body { flex: 1; min-width: 0; }

.notification-text {
  margin-bottom: var(--s1);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-dim);
}

.notification-text strong { color: var(--text); font-weight: 600; }

.notification-time {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.notification-action {
  flex-shrink: 0;
  align-self: center;
  padding: var(--s1) var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--amber);
  border: var(--hairline) solid var(--amber-line);
  border-radius: var(--r);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.notification-action:hover { background: var(--amber); color: var(--bg); }

/* ============================================================
   Error page
   ------------------------------------------------------------
   error.ejs sets its heading/body colour via inline style
   (outside this file's reach) — this covers the page shell only:
   centering the auth-card panel that 04-components already
   styles.
   ============================================================ */

.auth-page {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
}

.auth-container {
  width: 100%;
  max-width: var(--container-narrow);
}

/* ============================================================
   Responsive — co-located, not in a global dumping ground
   ============================================================ */

@media (max-width: 700px) {
  .post-card,
  .changelog-card { padding: var(--s4); }

  .post-card > .post-image:first-child,
  .changelog-card > .post-image:first-child {
    margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s3);
  }

  .changelog-card .post-header { padding: var(--s2) var(--s3); }

  .post-footer { flex-direction: column; align-items: stretch; }
  .post-reactions { justify-content: flex-start; }
  .btn-comment-toggle { justify-content: center; }

  .comment-form { flex-direction: column; align-items: stretch; }

  .search-result-footer { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

@media (max-width: 560px) {
  .changelog-timeline { padding-left: var(--s5); }

  .changelog-marker {
    left: calc(var(--s3) - var(--hairline) - (var(--s3) / 2) - var(--s5));
  }

  .notification-item { padding: var(--s3); }
  .notification-action { align-self: flex-start; }
}

/* ---------- Comment submit + roadmap modal body ---------- */

.comment-submit { flex-shrink: 0; }

.roadmap-modal-content > * + * { margin-top: var(--s3); }

.roadmap-modal-attachments {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--border);
}