/* Social Signature — carbon-copy form / chain-of-custody aesthetic.
   One committed look: cool carbon paper, duplicate-form blue ink, mono as the
   record's voice. The one bold element is the record card with its perforated
   tear-off reply strip; everything else stays quiet. */

:root {
  --paper: #eef0f4;        /* cool carbon paper, not cream */
  --paper-deep: #e2e6ee;
  --ink: #1d2433;          /* near-black blue ink */
  --carbon: #3b4bd8;       /* duplicate-form carbon blue */
  --carbon-soft: #c7cdf3;
  --caveat: #8a6d1f;       /* record-office ochre for caveats */
  --caveat-bg: #f3ead1;
  --rule: #b9c0cf;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  padding: 0 1rem 4rem;
}

.masthead { max-width: 44rem; margin: 3rem auto 2rem; }
.wordmark {
  font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.42em;
  color: var(--carbon); margin: 0 0 0.6rem; font-weight: 600;
}
.wordmark a { color: inherit; text-decoration: none; }
.wordmark a:hover, .wordmark a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; }
/* Site menu: one row in the record's mono voice, wraps on narrow screens.
   No script, no toggle — four destinations do not need a hamburger. */
.review { border: 1px solid var(--carbon-soft); background: #fff; padding: 0.7rem 0.9rem; margin: 0.6rem 0; }
.review .post-text { white-space: pre-wrap; }
button.quiet { background: none; color: var(--ink); border: 1px solid var(--ink); }
.site-nav { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0 0 1rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.site-nav a {
  display: inline-block; padding: 0.55rem 0; font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #5a6478; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--carbon); border-bottom-color: var(--carbon); }
.tagline { margin: 0; max-width: 36rem; color: #414a5e; }
.tagline em { font-style: italic; }

main { max-width: 44rem; margin: 0 auto; }

/* The intake slip */
.slip {
  background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--carbon);
  padding: 1.1rem 1.2rem 1.2rem; margin-bottom: 2rem;
}
.slip label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #5a6478; }
.slip-row { display: flex; gap: 0.6rem; margin-top: 0.4rem; flex-wrap: wrap; }
#post-url {
  flex: 1 1 16rem; font-family: var(--mono); font-size: 0.9rem; padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
}
#post-url:focus { outline: 2px solid var(--carbon); outline-offset: 1px; }
#check-btn {
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.06em; cursor: pointer;
  background: var(--carbon); color: #fff; border: none; padding: 0.6rem 1.1rem;
}
#check-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#check-btn[disabled] { opacity: 0.55; cursor: wait; }
.ts-widget { margin-top: 0.8rem; }
.status { font-family: var(--mono); font-size: 0.82rem; color: #5a6478; min-height: 1.2em; margin: 0.7rem 0 0; }
.status.error { color: #a03030; }

/* The record card */
.record {
  background: #fff; border: 1px solid var(--rule); margin-bottom: 2rem;
  box-shadow: 3px 3px 0 var(--carbon-soft);
}
.record-head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding: 0.7rem 1.1rem;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: #5a6478;
}
.record-head .obs { color: var(--carbon); }
.record-body { padding: 1.1rem; }
.field { margin: 0 0 0.85rem; }
.field-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7b8499; display: block; }
.post-text { white-space: pre-wrap; font-size: 1.02rem; margin: 0.15rem 0 0; }
.author-line { font-family: var(--mono); font-size: 0.88rem; }
.record img, .record video { max-width: 100%; border: 1px solid var(--rule); margin-top: 0.3rem; }

/* Caveat tags */
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0 1.1rem 0.9rem; }
.tag {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em;
  background: var(--caveat-bg); color: var(--caveat); border: 1px solid #d9c98f;
  padding: 0.2rem 0.55rem;
}
.tag.note-user { background: #e6e9fb; color: var(--carbon); border-color: var(--carbon-soft); }

/* Community-note attestation + links */
.attest { padding: 0 1.1rem 0.9rem; font-size: 0.92rem; }
.attest label { display: flex; gap: 0.5rem; align-items: baseline; cursor: pointer; }
.links { padding: 0 1.1rem 1rem; }
.links a { display: inline-block; margin-right: 1rem; color: var(--carbon); text-underline-offset: 0.2em; }

/* The tear-off reply strip — the signature element */
.tearoff {
  border-top: 2px dashed var(--rule); background: var(--paper-deep);
  padding: 0.9rem 1.1rem 1rem; position: relative;
}
.tearoff::before {
  content: "✂"; position: absolute; top: -0.72em; left: 0.9rem;
  background: var(--paper-deep); padding: 0 0.3rem; color: #7b8499; font-size: 0.85rem;
}
.tearoff .field-label { color: var(--carbon); }
.reply-text { font-family: var(--mono); font-size: 0.85rem; white-space: pre-wrap; margin: 0.3rem 0 0.6rem; }
.tearoff-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.copy-btn {
  font-family: var(--mono); font-size: 0.8rem; cursor: pointer;
  background: #fff; color: var(--carbon); border: 1px solid var(--carbon); padding: 0.4rem 0.9rem;
}
.copy-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.x-count { font-family: var(--mono); font-size: 0.75rem; color: #5a6478; }

.ai-opt { display: flex; gap: 0.5rem; align-items: baseline; margin-top: 0.7rem; font-size: 0.85rem; color: #414a5e; cursor: pointer; }

/* AI reading — visually subordinate to the measured record, never blended in */
.ai-reading { padding: 0.9rem 1.1rem; border-top: 1px solid var(--rule); background: #f7f4ec; }
.ai-reading .field-label { color: var(--caveat); }
.reading-notes { white-space: pre-wrap; font-size: 0.92rem; margin: 0.3rem 0 0; }

/* Report */
.report { padding: 0.9rem 1.1rem 1.1rem; border-top: 1px solid var(--rule); }
.report summary { font-family: var(--mono); font-size: 0.8rem; color: #5a6478; cursor: pointer; }
.report textarea {
  width: 100%; min-height: 4.5rem; font-family: var(--sans); font-size: 0.9rem;
  border: 1px solid var(--rule); background: var(--paper); padding: 0.5rem; margin: 0.5rem 0;
}
.report button { font-family: var(--mono); font-size: 0.8rem; background: var(--ink); color: #fff; border: none; padding: 0.45rem 0.9rem; cursor: pointer; }

.method { border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.method h2 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #5a6478; }
.method li { margin-bottom: 0.4rem; }

footer { max-width: 44rem; margin: 3rem auto 0; border-top: 1px solid var(--rule); padding-top: 1rem; font-size: 0.85rem; color: #5a6478; }
footer a { color: var(--carbon); }
.fine { font-size: 0.78rem; }

@media (prefers-reduced-motion: no-preference) {
  .record { transition: box-shadow 160ms ease; }
}
@media (max-width: 480px) {
  .masthead { margin-top: 1.6rem; }
  .wordmark { letter-spacing: 0.3em; }
  .site-nav ul { gap: 0 1.1rem; }
}
.reviews { list-style: none; padding: 0.2rem 0 0.4rem; margin: 0; }
.reviews li { margin-bottom: 0.15rem; }
.reviews a { margin-right: 0; }
#log h2 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #5a6478; margin-top: 1.4rem; }
#log .meta { font-family: var(--mono); font-size: 0.78rem; color: #5a6478; }
/* Async panels are laid out from the first paint with room reserved, so the
   list landing does not push the page (Lighthouse CLS 0.21 → reserved). */
.panel { min-height: 9rem; }
#daily.panel { min-height: 12rem; }
.placeholder { color: #5a6478; list-style: none; }
/* Claim cards (QA B03) */
.claims { padding-left: 1.2rem; margin: 0.6rem 0; }
.claim { margin-bottom: 0.9rem; }
.claim-head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.status { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.45rem; border: 1px solid var(--ink); white-space: nowrap; }
.status-supported { background: #e7f3ea; } .status-contradicted { background: #f9ecec; } .status-missing-context { background: #fbf3dc; } .status-unverified { background: var(--paper-deep); } .status-opinion-prediction-or-satire { background: #eef0fb; }
.claim-text { font-weight: 600; }
.claim-quote { font-size: 0.85rem; color: #5a6478; margin: 0.2rem 0; }
.rhetoric { margin-top: 0.6rem; }

/* Account investigation (F04 / B07) and comparison over time (B08) */
.posts li { margin: 0 0 0.45rem; }
.post-date { font-family: var(--mono); font-size: 0.72rem; color: #5a6478; white-space: nowrap; }
.compare { margin-top: 1rem; }
.pair { border: 1px solid var(--ink); padding: 0.6rem 0.8rem; margin: 0.5rem 0 0.8rem; }
.pair-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.5rem; }
@media (max-width: 640px) { .pair-body { grid-template-columns: 1fr; } }
.excerpt .post-text { margin: 0.2rem 0; }
.kind-contradiction .status { background: #f9ecec; } .kind-change_of_position .status { background: #fbf3dc; } .kind-different_period_or_scope .status { background: #eef0fb; } .kind-correction .status { background: #eef0fb; } .kind-consistent .status { background: #e7f3ea; }

/* Community Notes from the public dataset (B09) */
.notes-index { margin: 0.6rem 0 0.4rem; }
.notes li { margin: 0 0 0.6rem; }
.note-currently_rated_helpful { background: #e7f3ea; } .note-currently_rated_not_helpful { background: #f9ecec; } .note-needs_more_ratings { background: #fbf3dc; }

/* Support banner (Commander, 2026-09-09): one line, one link, at the bottom of every page */
footer .support { border: 1px solid var(--ink); padding: 0.55rem 0.8rem; margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--ink); background: var(--paper-deep); }
footer .support a { font-weight: 600; text-underline-offset: 0.2em; }