/* ── Social embeds (TW family: ::tweet) ──────────────────────────────────────
   Shipped by post.twig only when the article embeds one ('apw-tw' in the
   rendered HTML). Self-contained on purpose — a post may carry a tweet and
   nothing else, so no other component stylesheet is guaranteed to be loaded.

   This card is a REPRODUCTION of X's embed, so its metrics follow X rather than
   our house component style: X's 550px width, 12px radius, #cfd9de hairline,
   17px body on a system stack, 16px media radius. Two deliberate departures
   from the house rules (radius > 6px, non-house link blue) are the point — a
   quoted artifact that looks like one of our own panels misreads as our claim
   rather than someone else's words. Everything the widget does that we do NOT
   want is simply absent: like counts, Reply, Copy link, the info circle, and
   the "Read N replies" bar.

   No JS ships with this file — the component is pure markup + CSS. */

.apw-tw {
  /* X's own embed width. Stretched to a full article column the card stops
     reading as a quoted artifact. Fluid below that. */
  max-width: 550px;
  margin: 1.75rem 0;
  /* X's stack, not the site's Poppins/Inter — the type is a large part of why
     the card reads as a tweet. Scoped here so it cannot leak into the article. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
.apw-tw .apw-tw-card,
.apw-tw .apw-tw-card *,
.apw-tw .apw-tw-cap { font-family: inherit; }

/* our one-line editorial framing above the quote (the doc-card convention) */
.apw-tw .apw-tw-note {
  margin: 0 0 .5rem;
  color: #5b6470;
  font-size: .88rem;
  line-height: 1.5;
}

/* ── the card ─────────────────────────────────────────────────────────────── */

.apw-tw .apw-tw-card {
  margin: 0;                      /* reset the blog theme's blockquote */
  padding: 12px 16px;
  border: 1px solid #cfd9de;
  border-left: 1px solid #cfd9de;
  border-radius: 12px;
  background: #fff;
  font-style: normal;
  quotes: none;
  /* Constant and barely there. The card is a quotation, not something to
     interact with, so it should not react to the cursor. */
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.apw-tw .apw-tw-card::before,
.apw-tw .apw-tw-card::after { content: none; }

/* ── chain: one statement split across consecutive posts ──────────────────── */

.apw-tw .apw-tw-item { position: relative; }
.apw-tw .apw-tw-item + .apw-tw-item { margin-top: 4px; }

/* The connector runs down the avatar column from one post to the next, so the
   chain reads as a single statement rather than several quotations. */
.apw-tw .apw-tw-item--linked::before {
  content: "";
  position: absolute;
  left: 19px;          /* the 40px avatar's centre, less half the line width */
  top: 44px;           /* just below the avatar */
  bottom: -4px;
  width: 2px;
  background: #cfd9de;
  border-radius: 1px;
}
/* the last post's body should not sit tight under the connector */
.apw-tw .apw-tw-item--linked { padding-bottom: 4px; }

/* A post that continues below it takes X's threaded shape: the avatar leaves the
   flow so the connector has a clear column, everything else shifts into one
   indented column, and the header collapses to a single line. The closing post
   has no line beneath it, so it keeps the stacked header and a full-width body —
   which is how X ends a thread, and how a lone post already reads. */
.apw-tw-thread .apw-tw-item--linked { padding-left: 47px; }   /* 40 avatar + 7 gap */
.apw-tw-thread .apw-tw-item--linked .apw-tw-avatar { position: absolute; left: 0; top: 0; }
.apw-tw-thread .apw-tw-item--linked .apw-tw-head { margin-bottom: 2px; gap: 0; }
/* the row variant itself is defined with the other header rules below, so it
   lands after .apw-tw-who and actually beats its column direction */

/* ── header: who said it ──────────────────────────────────────────────────── */

.apw-tw .apw-tw-head {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 12px;
}

.apw-tw .apw-tw-avatar {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: 50%;             /* an avatar, not a pill button */
  object-fit: cover;
  background: #eef2f7;
}
.apw-tw .apw-tw-avatar--mono {
  display: flex; align-items: center; justify-content: center;
  color: #5b6470;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
  font-style: normal;
}

.apw-tw .apw-tw-who {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 48px;               /* centre the two lines against the avatar */
}
/* A chain runs a smaller avatar than a lone post. Measured off X's own thread
   rendering: there the avatar is 3.81x the name's cap height, where ours at 48px
   was 4.57x — 1.2x too large. 40px puts the ratio back, and everything keyed to
   the avatar (indent, connector position) follows it down.
   NOTE: these must stay BELOW the base .apw-tw-avatar / .apw-tw-who rules — same
   specificity, so source order is what decides. */
.apw-tw-thread .apw-tw-avatar { flex: 0 0 40px; width: 40px; height: 40px; }
.apw-tw-thread .apw-tw-avatar--mono { font-size: .92rem; }
.apw-tw-thread .apw-tw-who { min-height: 40px; }

.apw-tw .apw-tw-name {
  display: flex; align-items: center; gap: 3px;
  color: #0f1419;
  font-size: 15px; font-weight: 700; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apw-tw .apw-tw-sub {
  display: flex; align-items: center; gap: 4px;
  font-size: 15px; line-height: 20px;
}

/* single-line header for a post that continues below it */
.apw-tw .apw-tw-who--row {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 4px;
  min-height: 0;
}
.apw-tw .apw-tw-who--row .apw-tw-name { overflow: visible; }
.apw-tw .apw-tw-who--row .apw-tw-badge { align-self: center; }
.apw-tw .apw-tw-inline-date {
  color: #536471;
  font-size: 15px; line-height: 20px;
}
.apw-tw .apw-tw-handle,
.apw-tw .apw-tw-dot { color: #536471; text-decoration: none; }
.apw-tw .apw-tw-handle:hover { color: #536471; text-decoration: none; }
.apw-tw .apw-tw-follow {
  color: #1d9bf0;
  font-weight: 700;
  text-decoration: none;
}
.apw-tw .apw-tw-follow:hover { color: #1a8cd8; text-decoration: underline; }

/* X's verified seal. Grey = government body, blue = individual, gold = org. */
.apw-tw .apw-tw-badge { flex: 0 0 auto; display: block; }
.apw-tw .apw-tw-badge--blue { fill: #1d9bf0; }
.apw-tw .apw-tw-badge--gray { fill: #829aab; }
.apw-tw .apw-tw-badge--gold { fill: #e2b719; }

.apw-tw .apw-tw-xlink {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  color: #0f1419;
  text-decoration: none;
}
.apw-tw .apw-tw-xlink:hover { color: #0f1419; opacity: .7; }
.apw-tw .apw-tw-x { display: block; }
/* A hair of weight on the filled glyph — 1.6 was too heavy against the header. */
.apw-tw .apw-tw-x path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.6;
  stroke-linejoin: round;
}

/* ── body: the verbatim quote ─────────────────────────────────────────────── */

/* 0-2-0 so it beats the blog theme's .post-content p / a (0-1-1) */
.apw-tw .apw-tw-body {
  color: #0f1419;
  font-size: 17px;
  line-height: 1.45;
  white-space: pre-wrap;          /* the post's own line breaks are part of it */
  overflow-wrap: break-word;
}
/* X's link blue. Lower contrast than our house #0057fe, and kept anyway: this
   is a reproduction, and the links sit inside quoted text rather than carrying
   any action of ours. */
.apw-tw .apw-tw-body a {
  color: #1d9bf0;
  text-decoration: none;
}
.apw-tw .apw-tw-body a:hover { color: #1a8cd8; text-decoration: underline; }

/* ── media ────────────────────────────────────────────────────────────────── */

.apw-tw .apw-tw-media {
  margin-top: 12px;
  border: 1px solid #cfd9de;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}
.apw-tw .apw-tw-media img {
  width: 100%; height: auto;
  display: block;
}
.apw-tw .apw-tw-media--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #cfd9de;
}
.apw-tw .apw-tw-media--grid img { height: 100%; object-fit: cover; }

/* ── footer: when ─────────────────────────────────────────────────────────── */

/* No rule above it: X's separator belongs to the engagement row, which we do
   not carry. */
.apw-tw .apw-tw-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.apw-tw .apw-tw-time {
  color: #536471;
  font-size: 15px;
}
/* retained-quote notice: the post was removed upstream but the citation stands */
.apw-tw .apw-tw-gone {
  color: #8a6d3b;
  background: #fdf6e3;
  border: 1px solid #f0e2bd;
  border-radius: 4px;
  padding: .1rem .4rem;
  font-size: .76rem;
}

/* ── TW2: the curated strip ───────────────────────────────────────────────── */

.apw-tw-feed {
  border: 1px solid #cfd9de;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  overflow: hidden;
}

.apw-tw-feed .apw-tw-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f7;
}
.apw-tw-feed .apw-tw-feed-title {
  margin: 0;
  color: #0f1419;
  font-size: 1.05rem; font-weight: 800; line-height: 1.2;
}
/* the one real action in the header: go to the source, not our selection */
.apw-tw-feed .apw-tw-feed-follow {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 6px;
  background: #0f1419;
  color: #fff;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.apw-tw-feed .apw-tw-feed-follow:hover { background: #272c30; color: #fff; text-decoration: none; }

.apw-tw-feed .apw-tw-feed-scroll {
  max-height: 640px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.apw-tw-feed .apw-tw-feed-scroll:focus-visible { outline: 2px solid #0057fe; outline-offset: -2px; }

.apw-tw-feed .apw-tw-feed-item { padding: 12px 16px; }
.apw-tw-feed .apw-tw-feed-item + .apw-tw-feed-item { border-top: 1px solid #eef2f7; }

.apw-tw-feed .apw-tw-time--link { color: #536471; text-decoration: none; }
.apw-tw-feed .apw-tw-time--link:hover { color: #536471; text-decoration: underline; }

/* ── caption: our framing, outside the quote ──────────────────────────────── */

.apw-tw .apw-tw-cap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-top: .55rem;
  font-size: .82rem;
}
.apw-tw .apw-tw-cta {
  color: #0057fe;                 /* ours, so it follows the house link colour */
  font-weight: 600;
  text-decoration: none;
}
.apw-tw .apw-tw-cta:hover { color: #0057fe; text-decoration: underline; }
.apw-tw .apw-tw-cta i { font-size: .68rem; margin-left: .15rem; }
.apw-tw .apw-tw-authority { color: #536471; }

@media (max-width: 600px) {
  .apw-tw .apw-tw-card { padding: 12px; }
  .apw-tw .apw-tw-body { font-size: 16px; }
  .apw-tw .apw-tw-media--grid { grid-template-columns: 1fr; }
}