/* ===========================================================================
   news.css — the club noticeboard.

   Used on #/news and, in a compact variant, on the dashboard. The components
   live in one file because a post has to look like the same object in both
   places; only the density changes.

   The emoji here are CONTENT, not an icon system standing in for one: the four
   reactions are the entire reply surface members have, so they are the thing
   being rendered. Everything else on this surface uses Font Awesome, as the
   rest of the product does.
   =========================================================================== */

.news-list { display: flex; flex-direction: column; gap: 12px; }

.post {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 18px;
}
/* A pinned post is marked by its flag, not by a coloured slab down one edge:
   a thick tinted border-left is the cheap version of "this one matters" and it
   collides with the alert-row vocabulary, which is the one thing on this
   product allowed to mean "something is wrong". */
.post.-pinned { border-color: color-mix(in srgb, var(--accent) 38%, var(--border-subtle)); }

.post-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.post-title {
  font-size: var(--fs-title); font-weight: var(--w-title);
  letter-spacing: var(--track-tight); line-height: var(--lh-tight);
  overflow-wrap: anywhere; min-width: 0;
}
.post-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: var(--fs-label); color: var(--text-tertiary);
  margin-bottom: 10px;
}
.post-meta .dot { opacity: 0.5; }

/* Who the post is for. A club-wide notice and a team notice must be told apart
   at a glance, because acting on the wrong one wastes somebody's Saturday. */
.scope-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro); font-weight: var(--w-title);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--bg-sunken); color: var(--text-secondary);
}
.scope-pill.-club {
  background: var(--accent-wash); color: var(--accent-text);
}
.pin-flag { color: var(--accent-text); font-size: var(--fs-label); flex: none; }

.post-body {
  font-size: var(--fs-body); color: var(--text-secondary);
  line-height: var(--lh-body); max-width: var(--measure);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- reactions ------------------------------------------------------ */
.reaction-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.reaction {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-default);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: var(--fs-label); font-weight: var(--w-title);
  font-variant-numeric: tabular-nums lining-nums;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.reaction:hover:not(:disabled) { background: var(--bg-sunken); border-color: var(--border-strong); }
.reaction:active:not(:disabled) { transform: scale(0.97); }
.reaction:disabled { cursor: default; opacity: 0.6; }
/* Your own answer, in the club's colour. The wash is used rather than a solid
   fill because a solid accent behind an emoji is unreadable at some club hues. */
.reaction.-mine {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-text);
}
.reaction .glyph { font-size: var(--fs-body); line-height: 1; }
.reaction .n { min-width: 8px; }
/* A count of zero is not shown: four "0"s under every new post make the
   noticeboard look ignored before anybody has had the chance to read it. */
.reaction .n:empty { display: none; }

.reaction-hint {
  margin-top: 10px; font-size: var(--fs-label); color: var(--text-tertiary);
}

/* ---------- the composer --------------------------------------------------- */
.news-scope-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.news-scope-choice .opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-default); background: var(--bg-card);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.news-scope-choice .opt .t { font-size: var(--fs-body); font-weight: var(--w-strong); }
.news-scope-choice .opt .s { font-size: var(--fs-label); color: var(--text-tertiary); }
.news-scope-choice .opt.-on {
  border-color: var(--accent); background: var(--accent-wash);
}

/* ---------- the dashboard variant ------------------------------------------ */
/* Same object, less of it: no body copy, one line of meta, reactions read-only
   so the dashboard never becomes a place you accidentally answer from. */
.news-compact .post { padding: 14px 16px; }
.news-compact .post-title { font-size: var(--fs-body); font-weight: var(--w-strong); }
.news-compact .post-body {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: var(--fs-label); margin-top: 4px;
}
/* Expanded: the clamp is lifted, not raised. A larger line-clamp would only
   move the cliff further down the page. */
.news-compact .post.-open .post-body {
  display: block; -webkit-line-clamp: none; overflow: visible;
}
/* A text button, not a link: it changes what is on screen rather than going
   anywhere. Full-height hit area — this sits under two lines of small type on
   a phone, which is exactly where a 16px target is missed. */
.post-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 0 -4px -6px; padding: 0 6px; min-height: 38px;   /* the coarse-pointer floor this system sets for small buttons */
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-label); font-weight: var(--w-strong);
  color: var(--accent-text);
  border-radius: var(--r-xs);
}
/* An author `display` beats the user agent's `[hidden] { display: none }`, so
   without this the button that measurement chose to hide stays on screen —
   and every two-word notice offers to show you more of itself. */
.post-more[hidden] { display: none; }
.post-more:hover { text-decoration: underline; }
.post-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.news-compact .reaction-bar { margin-top: 10px; padding-top: 9px; }
/* 30px was under this system's own coarse-pointer floor of 38, and these are
   the most-tapped controls on the member home — a parent acknowledging a club
   notice, one-handed. The compact variant keeps its tighter padding and
   smaller lettering; it does not get to keep a smaller target. */
.news-compact .reaction { min-height: 38px; padding: 0 10px; font-size: var(--fs-micro); }
.news-compact .reaction .glyph { font-size: var(--fs-label); }

@media (max-width: 560px) {
  .news-scope-choice { grid-template-columns: minmax(0, 1fr); }
}

/* Editing tools ride in the post's own header. As a full row of 38px buttons
   under every post they were the heaviest thing on a screen whose subject is
   the writing — three posts meant six buttons competing with three headlines. */
.post-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.icon-btn {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: transparent; color: var(--text-tertiary);
  font-size: var(--fs-label); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--text-primary); }
.icon-btn-danger:hover { background: var(--danger-bg); color: var(--danger-text); }
/* Coarse pointers get the product's 38px floor; a mouse does not need it and
   34px keeps the tools quiet beside the headline. */
@media (pointer: coarse) {
  .icon-btn { width: 38px; height: 38px; }
}