/* The social feed: one column of cards (stories, neighbours' posts, the odd ad), a composer above it and
   what people are reading beside it. Used by the home page and the community pages. */

.social-feed {
  display: grid;
  gap: 14px;
}

.social-card {
  padding: 16px 18px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px #17366509;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.social-card:hover {
  border-color: #d5e2f8;
  box-shadow: 0 8px 24px #1736650f;
}

.social-top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.social-card .avatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue));
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  place-items: center;
}

.social-card .avatar-news {
  background: linear-gradient(140deg, #eef4ff, #dbe8ff);
  color: var(--blue-dark);
}

.social-card .avatar-news .icon { width: 20px; height: 20px; }

.social-who { min-width: 0; }

.social-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 700;
}

.social-name .author-link { color: inherit; }
.social-name .author-link:hover { color: var(--blue-dark); }

.social-kind {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.new-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.social-meta {
  color: var(--muted);
  font-size: 13px;
}

.social-meta a { color: var(--muted); }
.social-meta a:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }

.social-body { display: block; margin: 12px 0 0; }

.social-body h3 {
  font-size: 18px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  word-break: keep-all;
}

.social-card:hover .social-body h3 { color: var(--blue-dark); }

.social-body p {
  margin-top: 6px;
  color: #45577a;
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.social-photo {
  display: block;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

.social-photo img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.social-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.social-actions form { display: contents; }

.social-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  transition: background-color 0.16s, color 0.16s;
}

.social-action .icon { width: 16px; height: 16px; }

.social-action b { font-weight: 700; }

a.social-action:hover,
button.social-action:hover { background: #f2f6fd; color: var(--blue-dark); }

button.social-action.is-on { color: var(--coral); }

button.social-action.is-on .icon { fill: currentColor; }

.social-action.is-quiet { cursor: default; }

.social-open {
  margin-left: auto;
  color: var(--blue-dark);
  font-weight: 700;
}

.social-open .icon { width: 14px; height: 14px; }

/* an ad card sitting in the stream, always labelled */
.social-ad { position: relative; overflow: hidden; padding: 0; }
.social-ad img { width: 100%; }

.social-ad .ad-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #182b50cc;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ------------------------------------------------------------- composer */
.composer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.composer .avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue));
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  place-items: center;
}

.composer-open {
  flex: 1;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f9fd;
  color: var(--muted);
  font-size: 15px;
  text-align: left;
}

.composer-open:hover { border-color: #c6d8f8; background: #f1f6ff; }

.composer-go {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.composer-go:hover { background: var(--blue-dark); }
.composer-go .icon { width: 15px; height: 15px; }

/* --------------------------------------------------------- feed switcher */
.feed-switch {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.feed-switch a {
  flex: 1;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.feed-switch a:hover { background: #f2f6fd; color: var(--blue-dark); }

.feed-switch a[aria-current] { background: var(--blue); color: #fff; }

/* ------------------------------------------------------------- trending */
.trending-panel ol { counter-reset: trend; }

.trending-row {
  display: flex;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.trending-panel li:first-child .trending-row { border-top: 0; }

.trending-rank {
  flex-shrink: 0;
  width: 20px;
  color: #a7b6cd;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.trending-row:hover .trending-rank { color: var(--blue); }

.trending-text { min-width: 0; }

.trending-text strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  word-break: keep-all;
}

.trending-row:hover .trending-text strong { color: var(--blue-dark); }

.trending-text span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

/* the same list as a strip across the top of the news page */
.trending-strip {
  display: grid;
  gap: 10px 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f7faff);
}

.trending-strip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.trending-strip-head .icon { width: 17px; height: 17px; color: var(--coral); }

.trending-strip .trending-row { padding: 6px 0; border: 0; }

@media (max-width: 719px) {
  .social-card { padding: 14px 14px 10px; border-radius: 14px; }
  .social-body h3 { font-size: 17px; }
  .social-body p { font-size: 14.5px; }
  .composer-open { font-size: 14px; }
  .composer-go span { display: none; }
  .social-action { padding: 7px 9px; }
}

/* ------------------------------------------- writing in place (_composer.html) */
.composer-box {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.composer-box > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
}

.composer-box > summary::-webkit-details-marker { display: none; }

.composer-box[open] > summary { border-bottom: 1px solid var(--line-soft); }

.composer-box .avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue));
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  place-items: center;
}

.composer-box .composer-open {
  flex: 1;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f9fd;
  color: var(--muted);
  font-size: 15px;
}

.composer-box > summary:hover .composer-open { border-color: #c6d8f8; background: #f1f6ff; }

.composer-box .composer-go {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.composer-box .composer-go .icon { width: 15px; height: 15px; }

.composer-form { padding: 14px 16px 16px; }

.composer-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
  font-size: 15.5px;
  line-height: 1.7;
  resize: vertical;
}

.composer-form textarea:focus { background: var(--surface); }

.composer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.composer-board select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
}

.composer-photo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.composer-photo:hover { border-color: #c6d8f8; color: var(--blue-dark); }
.composer-photo .icon { width: 16px; height: 16px; }

.composer-post { margin-left: auto; }

.composer-hint { margin-top: 10px; color: var(--muted); font-size: 12.5px; }

/* --------------------------------------------------------- a board as a stream */
.board-stream { display: grid; gap: 16px; }

.stream-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stream-heading h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }

.stream-chips {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.stream-chips::-webkit-scrollbar { display: none; }

.stream-chips a {
  flex-shrink: 0;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
}

.stream-chips a:hover { border-color: #c6d8f8; color: var(--blue-dark); }

.stream-chips a[aria-current] {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.social-pinned { border-color: #ffe0b8; background: linear-gradient(180deg, #fffaf2, #fff); }

.pinned-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b06a1b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pinned-flag .icon { width: 15px; height: 15px; }

.feed-end {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.home-feed { display: grid; gap: 14px; }

/* ------------------------------------------- the stream as the page itself */
/* No hero above it: the box you write in and the first card are the first things on the screen. */
.home-stream { display: grid; gap: 14px; }

.home-screen .page-layout { padding-top: 20px; }

.rail-write {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
}

.rail-write .icon { width: 17px; height: 17px; }

@media (max-width: 1199px) {
  .rail-write { display: none; }
}



.trending-text span .icon { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }