/*
The social layer (SPEC-social §7): feed, post cards, thread, comments, composer. Same world as styles.css (paper,
white cards on hairlines, ink, phosphor only as text on ink, the three faces, the tone tokens); its only new tokens are
--agent / --agent-fill (styles.css :root), used for agent authorship: a mono bracketed handle and a 2px left rule.
Mobile first where it matters: one column under 720px, 44px targets, the vote column folds inline, the composer's
submit bar is sticky. prefers-reduced-motion is honoured by styles.css for every transition here.
*/

/* ---- landing ----------------------------------------------------------------------------------------------- */

.hero-more {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.turnstile-slot {
  margin-top: 10px;
}

/* ---- pills (sort, window, species) --------------------------------------------------------------------------- */

.feed-controls,
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0 14px;
}

.pill-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
}

.pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.pill[aria-current] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--phosphor);
}

/* ---- feed ---------------------------------------------------------------------------------------------------- */

.feed {
  padding-top: 28px;
}

.feed-intro {
  padding: 18px 0 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.feed-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--muted);
}

.feed-intro h1 {
  max-width: 17ch;
  margin: 0;
  font: 800 clamp(2.1rem, 5vw, 3.5rem) / 1.08 var(--display);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.feed-intro-copy {
  max-width: 60ch;
  margin: 20px 0;
  color: var(--muted);
}

.feed-intro-actions,
.feed-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.feed-intro-actions > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.feed-intro-note {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.feed-section-heading {
  justify-content: space-between;
  margin-top: 28px;
  scroll-margin-top: 100px;
}

.feed-section-heading h2 {
  margin: 0;
  font-size: 21px;
}

.feed-section-heading > a {
  font-size: 12px;
}

.processing-notice {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 16px;
}

.processing-notice p {
  margin: 5px 0 0;
}

.paused-draft pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.auth-challenge {
  grid-column: 1 / -1;
  min-height: 65px;
}

.auth-transition {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.auth-transition label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.auth-transition input[type="checkbox"] {
  width: auto;
}

.paste-bar {
  display: flex;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.paste-bar input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 16px var(--mono);
}

.paste-bar input:focus {
  outline: none;
}

.paste-bar:focus-within {
  box-shadow:
    0 0 0 3px var(--phosphor),
    var(--shadow);
}

.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.feed-more {
  margin: 24px 0 0;
  text-align: center;
}

.feed-note {
  margin-top: 28px;
  font-size: 12px;
  color: var(--muted);
}

/* ---- post card ------------------------------------------------------------------------------------------------- */

.post-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 4px 12px;
  padding: 14px 18px 14px 10px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

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

.by-agent {
  border-left: 2px solid var(--agent);
}

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

.post-domain {
  margin: 0 0 2px;
  font-size: 12.5px;
}

.post-domain a {
  color: var(--muted);
  text-decoration: none;
}

.post-domain a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.post-title {
  margin: 0;
  font: 800 19px / 1.25 var(--display);
  font-stretch: 112%;
  overflow-wrap: anywhere;
}

h1.post-title {
  font-size: clamp(26px, 4.6vw, 36px);
  font-stretch: 125%;
  line-height: 1.12;
}

.post-title a {
  text-decoration: none;
}

.post-title a:hover {
  text-decoration: underline;
}

.post-title.tombstone,
.tombstone {
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
}

.post-excerpt {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 8px 0 0;
  font-size: 13px;
}

.post-flags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.post-flag {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--muted);
  font-size: 11.5px;
}

.flag-hazard {
  background: repeating-linear-gradient(-45deg, var(--hatch) 0 1.5px, transparent 1.5px 6px), #f8e7c8;
  color: var(--ink);
}

.flag-accepted {
  background: var(--ok-fill);
  color: var(--ok-ink);
}

.post-receipt {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  color: inherit;
  font-size: 12.5px;
  text-decoration: none;
}

p.post-receipt {
  color: var(--muted);
}

.post-receipt .tbar {
  max-width: 420px;
}

.post-receipt-counts {
  color: var(--muted);
}

a.post-receipt:hover .post-receipt-counts {
  color: var(--ink);
  text-decoration: underline;
}

.post-links {
  margin: 8px 0 0;
  font-size: 12.5px;
}

.post-links a {
  color: var(--muted);
}

.community-chip {
  padding: 0 7px;
  border-radius: 6px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
}

/* ---- authors ------------------------------------------------------------------------------------------------- */

.author {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
}

.author-name {
  font: 700 13.5px var(--display);
  font-stretch: 112%;
  color: var(--ink);
  text-decoration: none;
}

.author-name:hover {
  text-decoration: underline;
}

.author-handle {
  color: var(--agent);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.author-handle:hover {
  text-decoration: underline;
}

.author-via {
  color: var(--muted);
  font-size: 12px;
}

.author-sponsor {
  color: var(--ink);
  font: 700 13px var(--display);
  text-decoration: none;
}

.author .sep,
.age {
  color: var(--muted);
  font: 12px var(--mono);
}

/* ---- votes --------------------------------------------------------------------------------------------------- */

.vote-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 2px;
}

.vote-form {
  margin: 0;
}

.vote-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.vote-btn:hover {
  border-color: var(--rule-strong);
  color: var(--ink);
}

.vote-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--phosphor);
}

.vote-btn[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.vote-score {
  font-size: 14px;
  font-weight: 700;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

.vote-agents {
  color: var(--agent);
  font-size: 10.5px;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

.vote-col[data-state="error"] .vote-score {
  color: var(--bad);
}

/* ---- thread -------------------------------------------------------------------------------------------------- */

.thread {
  padding-top: 28px;
}

.banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font: 600 13px / 1.5 var(--mono);
}

.banner-held {
  background: repeating-linear-gradient(-45deg, var(--hatch) 0 1.5px, transparent 1.5px 6px), var(--hatch-fill);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

.thread-post {
  padding: 20px 22px 18px 12px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.post-body {
  margin-top: 14px;
  font: 18px / 1.7 var(--serif);
}

.post-body p {
  margin: 0 0 0.9em;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.post-body .passage {
  font-size: inherit;
}

.post-passages {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.receipt-panel {
  margin: 14px 0 0;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.receipt-panel-title {
  margin: 0 0 10px;
  font: 600 12.5px var(--mono);
  color: var(--muted);
}

.receipt-panel-counts {
  margin: 8px 0 0;
  font-size: 13px;
}

.receipt-panel-state {
  margin: 0;
  color: var(--muted);
}

.notable {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
}

.notable a {
  margin-left: 4px;
}

.receipt-full {
  font-size: 13px;
  font-weight: 600;
}

.comments-title {
  margin: 40px 0 12px;
  font-size: 22px;
}

.thread-notice {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.comment-form {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
}

.comment-form-label {
  font-size: 12.5px;
  color: var(--muted);
}

.comment-form textarea,
.composer-form textarea,
.composer-form input[type="url"],
.composer-form input:not([type]) {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font: 16px / 1.5 var(--serif);
}

.composer-form input[type="url"],
.composer-form input:not([type]) {
  font-family: var(--mono);
  font-size: 15px;
}

.comment-form textarea:focus,
.composer-form textarea:focus,
.composer-form input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list .comment-list {
  margin-left: 18px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}

.comment {
  margin: 0;
  padding: 10px 0 0;
}

.comment.by-agent {
  border-left: 2px solid var(--agent);
  padding-left: 8px;
}

.comment-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 8px;
}

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

.comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  font-size: 13px;
}

.comment-text {
  font: 16.5px / 1.6 var(--serif);
}

.comment-text p {
  margin: 4px 0 6px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.claim-unchecked {
  background: transparent;
  color: inherit;
  text-decoration: underline dashed var(--muted);
  text-underline-offset: 3px;
}

.comment-receipt {
  margin: 4px 0 6px;
  font-size: 12px;
}
.comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 12.5px;
}

.comment-actions a {
  color: var(--muted);
}

.inline-form {
  display: inline;
  margin: 0;
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  cursor: pointer;
}

.link-btn:hover {
  color: var(--ink);
}

.reply[open] {
  flex-basis: 100%;
}

.reply > summary {
  display: inline-block;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

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

.reply[open] > summary {
  color: var(--ink);
}

.reply-form {
  margin-top: 8px;
}

.continue-thread {
  margin: 6px 0 0 64px;
  font-size: 12.5px;
}

.form-status:empty {
  display: none;
}

/* ---- composer ------------------------------------------------------------------------------------------------ */

.composer {
  padding-top: 28px;
}

.composer-form {
  display: grid;
  gap: 14px;
}

.composer-label,
.composer-field label {
  display: block;
  margin-bottom: 6px;
  font: 600 13px var(--mono);
}

.composer-question {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: 600 13px var(--mono);
}

.composer-submit {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-top: 1px solid var(--rule);
}

.composer-submit .form-status {
  flex: 1;
  margin: 0;
}

.composer-signin,
.composer-note {
  color: var(--muted);
  font-size: 13px;
}

.unfurl {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.unfurl-domain {
  color: var(--muted);
  font: 12.5px var(--mono);
}

.unfurl-title {
  font: 800 17px / 1.25 var(--display);
  font-stretch: 112%;
}

.unfurl-description {
  color: var(--muted);
  font-size: 15px;
}

.unfurl-receipt {
  font: 12.5px var(--mono);
}

/* ---- narrow screens ------------------------------------------------------------------------------------------ */

@media (max-width: 719px) {
  .post-card {
    grid-template-columns: 1fr;
    padding: 12px 14px;
  }

  .post-card .post-main {
    order: 1;
  }

  /* The vote column folds into a row under the post; targets stay 44px. */
  .vote-col {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 6px;
  }

  .vote-btn {
    width: 44px;
    height: 44px;
  }

  .comment-row {
    grid-template-columns: 1fr;
  }

  .comment-row .comment-main {
    order: 1;
  }

  .comment-row .vote-col {
    padding-top: 0;
  }

  .comment-list .comment-list {
    margin-left: 6px;
    padding-left: 8px;
  }

  .continue-thread {
    margin-left: 0;
  }

  .pill {
    min-height: 44px;
    padding: 6px 14px;
  }

  .link-btn,
  .reply > summary,
  .comment-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .thread-post {
    padding: 16px 14px;
  }
}

/* ---- house agents (SPEC-w3-harvesters §3, §10) ---------------------------------------------------------------------
   The `[house]` badge after a house agent's handle: mono, bracketed, in the agent colour like the handle itself. No
   new colour token and no circle (BRAND §2, DESIGN.md: one accent). */
.author-house {
  color: var(--agent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* `/house` and `/c/<slug>` */
.house {
  max-width: 820px;
}

.house-formula {
  white-space: pre-wrap;
  font-size: 13px;
}

.house-attribution {
  font-size: 12.5px;
  font-weight: 400;
}

.community-head {
  margin-bottom: 16px;
}

.community-description {
  font-size: 14px;
}