/* ox-content Social Embeds - Twitter/X, Bluesky, WebContainer, media iframes */

/* Static link cards (<Tweet>/<XPost>/<Bluesky> without build-time fetch) */
.ox-tweet,
.ox-bluesky {
  display: block;
  margin: 1.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
}

.ox-tweet > a,
.ox-bluesky > a {
  display: block;
  padding: 1rem 0;
  text-decoration: none;
  color: var(--octc-color-text);
}

/* A fetched tweet renders `<figure><header>…` rather than wrapping its body in
   one anchor, so the rule above never matches it. Pad the card itself to keep
   it level with the Bluesky card. */
.ox-tweet--fetched {
  padding: 1rem 0;
}

.ox-tweet > a:hover,
.ox-bluesky > a:hover {
  text-decoration: none;
}

.ox-tweet > a > span,
.ox-bluesky > a > span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--octc-color-text-muted);
  margin-bottom: 0.375rem;
}

.ox-tweet > a > strong,
.ox-bluesky > a > strong {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--octc-color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ox-tweet > a:hover > strong,
.ox-bluesky > a:hover > strong {
  text-decoration: underline;
}

.ox-tweet > a > p,
.ox-bluesky > a > p {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--octc-color-text-muted);
}

.ox-bluesky__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.ox-bluesky__avatar-wrap {
  flex: 0 0 auto;
}

.ox-bluesky__avatar,
.ox-bluesky__avatar-fallback {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--octc-color-primary) 16%, var(--octc-color-bg-alt));
  color: var(--octc-color-primary);
  font-weight: 700;
}

.ox-bluesky__avatar {
  object-fit: cover;
}

.ox-bluesky__identity {
  display: grid;
  min-width: 0;
  gap: 0.125rem;
}

.ox-bluesky__author-name,
.ox-bluesky__handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ox-bluesky__author-name {
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--octc-color-text);
}

.ox-bluesky__handle,
.ox-bluesky__network,
.ox-bluesky__meta {
  color: var(--octc-color-text-muted);
}

.ox-bluesky__network {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
}

.ox-bluesky__body {
  margin: 0.875rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--octc-color-text);
}

.ox-bluesky__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  margin-top: 0.875rem;
  font-size: 0.75rem;
}

.ox-bluesky__source {
  color: var(--octc-color-primary);
  font-weight: 600;
}

/* Fetched tweet cards (<Tweet> with `twitter: { fetch: true }`) */
.ox-tweet--fetched > a {
  padding: 1rem 0;
}

.ox-tweet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.ox-tweet__profile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.ox-tweet__avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--octc-color-bg-alt);
}

.ox-tweet__author-name {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--octc-color-text);
}

.ox-tweet__author-handle {
  display: block;
  font-size: 0.8125rem;
  color: var(--octc-color-text-muted);
}

.ox-tweet__body {
  margin: 0 0 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--octc-color-text);
  white-space: pre-wrap;
}

.ox-tweet__media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.ox-tweet__media-item {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  background: var(--octc-color-bg-alt);
}

.ox-tweet__media-fallback {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ox-tweet__media-fallback > img {
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.ox-tweet__watch {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
}

.ox-tweet__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--octc-color-text-muted);
}

.ox-tweet__permalink {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ox-tweet__source {
  color: var(--octc-color-primary);
  font-weight: 600;
}

.ox-tweet__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--octc-color-text-muted);
}

.ox-tweet__metric strong {
  color: var(--octc-color-text);
}

.ox-tweet__reply {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
}

.ox-tweet__reply-link {
  color: var(--octc-color-text-muted);
  text-decoration: none;
}

.ox-tweet__reply-link:hover {
  text-decoration: underline;
}

.ox-tweet__quote {
  margin: 0 0 0.625rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  border-radius: 8px;
}

.ox-tweet__quote-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ox-tweet__quote .ox-tweet__avatar {
  width: 28px;
  height: 28px;
}

.ox-tweet__quote-body {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--octc-color-text);
  white-space: pre-wrap;
}

.ox-tweet__quote .ox-tweet__media {
  margin-bottom: 0;
}
/* WebContainer lazy placeholder */
.ox-webcontainer {
  margin: 1.5rem 0;
  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  border-radius: 8px;
  overflow: hidden;
  background: var(--octc-color-bg);
}

.ox-webcontainer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  background: var(--octc-color-bg-alt);
}

.ox-webcontainer__title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.55rem;
}

.ox-webcontainer__title strong {
  font-size: 0.875rem;
  color: var(--octc-color-text);
}

.ox-webcontainer__title code {
  color: var(--octc-color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ox-webcontainer__status,
.ox-webcontainer__meta {
  font-size: 0.75rem;
  color: var(--octc-color-text-muted);
}

.ox-webcontainer__status {
  padding: 0.16rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--octc-color-primary) 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--octc-color-primary) 8%, transparent);
  color: var(--octc-color-primary);
  white-space: nowrap;
}

.ox-webcontainer__preview {
  background: var(--octc-color-code-bg);
}

.ox-webcontainer pre {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.ox-webcontainer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  background: color-mix(in srgb, var(--octc-color-bg-alt) 54%, transparent);
}

.ox-webcontainer__meta code {
  color: var(--octc-color-text);
}
/* ox-content media iframes - Spotify, Apple Music, Speaker Deck, StackBlitz,
   and the native audio/video players. */

.ox-spotify,
.ox-apple-music,
.ox-speaker-deck,
.ox-stackblitz,
.ox-audio,
.ox-video {
  display: block;
  width: 100%;
  margin: 1.5rem 0;
  border: 0;
  border-radius: 12px;
}

.ox-stackblitz {
  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  border-radius: 8px;
}

/* Slide decks are 4:3. The iframe is emitted with a fixed `height`, which
   letterboxes the deck on any column narrower than the width that height
   assumes — most of them, on a phone. The class is on the figure as well as the
   iframe, so this has to name the iframe. */
iframe.ox-speaker-deck {
  height: auto;
  aspect-ratio: 4 / 3;
}
/* Provider cards for static article, place, community, and social embeds */
/* One quiet frame, no bands. The header and footer used to be filled strips
   with their own rules, which turned every embed into three stacked boxes and
   made the provider, not the linked page, the loudest thing on the card. They
   are plain muted lines now: the border is the only chrome. */
.ox-provider-card {
  display: block;
  margin: 1rem 0;
  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  border-radius: 4px;
  overflow: hidden;
  background: var(--octc-color-bg);
  transition: border-color 0.2s ease;
}

.ox-provider-card:hover {
  border-color: color-mix(in srgb, var(--octc-color-primary) 40%, var(--octc-color-border));
}

.ox-provider-card__main {
  display: grid;
  color: var(--octc-color-text);
  text-decoration: none;
}

.ox-provider-card__main:hover {
  text-decoration: none;
}

.ox-provider-card__header,
.ox-provider-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  color: var(--octc-color-text-muted);
}

.ox-provider-card__header {
  padding: 0.7rem 0.9rem 0;
  font-size: 0.72rem;
}

.ox-provider-card__network,
.ox-provider-card__source {
  font-weight: 600;
}

.ox-provider-card__network {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ox-provider-card__body-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.4rem 0.9rem 0;
}

.ox-provider-card__avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--octc-color-bg-alt);
}

/* No counts means no footer, so the copy closes the card and carries the
   bottom padding the footer used to. */
.ox-provider-card__body-wrap:last-child {
  padding-bottom: 0.8rem;
}

.ox-provider-card__copy {
  min-width: 0;
}

.ox-provider-card .ox-provider-card__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--octc-color-text);
}

.ox-provider-card__main:hover .ox-provider-card__title {
  text-decoration: underline;
}

.ox-provider-card .ox-provider-card__excerpt {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--octc-color-text-muted);
  white-space: pre-wrap;
}

.ox-provider-card__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  border-width: 1px 0 0;
  border-radius: 0;
  object-fit: cover;
  background: var(--octc-color-bg-alt);
}

.ox-provider-card__meta {
  padding: 0.55rem 0.9rem 0.85rem;
  font-size: 0.72rem;
}

.ox-provider-card__metric {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ox-provider-card__metric > span {
  font-weight: 600;
  color: var(--octc-color-text);
}

.ox-provider-card__logo {
  display: block;
  flex: 0 0 auto;
  color: var(--octc-color-text);
}

/* With the label gone, the value is the whole of what the metric says, so it
   takes the reading colour and the mark stays quiet beside it. */
.ox-provider-card__metric--icon {
  color: var(--octc-color-text);
}

.ox-provider-card__metric-icon {
  flex: 0 0 auto;
  color: var(--octc-color-text-muted);
}

/* The word a mark replaced: off the page, still on the accessibility tree. */
.ox-provider-card__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The source ends the network line rather than owning a row of its own. The
   header was a short phrase with the whole right of the line empty, and under
   it sat a footer saying two more words; a card whose provider reports no
   counts spent two rows of chrome on that. */
.ox-provider-card__source {
  margin-left: auto;
  color: var(--octc-color-text-muted);
}

.ox-provider-card__map {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  background: var(--octc-color-bg-alt);
}
.ox-tweet--rich .ox-tweet__card {
  display: block;
  padding: 1rem 0;
  color: var(--octc-color-text);
  text-decoration: none;
}

.ox-tweet--rich .ox-tweet__profile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.ox-tweet--rich .ox-tweet__avatar-wrap {
  flex: 0 0 auto;
}

.ox-tweet--rich .ox-tweet__avatar,
.ox-tweet--rich .ox-tweet__avatar-fallback {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--octc-color-text) 10%, var(--octc-color-bg-alt));
  color: var(--octc-color-text);
  font-weight: 800;
}

.ox-tweet--rich .ox-tweet__avatar {
  object-fit: cover;
}

.ox-tweet--rich .ox-tweet__identity {
  display: grid;
  min-width: 0;
  gap: 0.125rem;
}

.ox-tweet--rich .ox-tweet__author-name,
.ox-tweet--rich .ox-tweet__author-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ox-tweet--rich .ox-tweet__network {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--octc-color-text-muted);
}

.ox-tweet--rich .ox-tweet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: var(--octc-color-text-muted);
}

.ox-tweet--rich .ox-tweet__source {
  color: var(--octc-color-primary);
  font-weight: 600;
}
/* Reddit post cards */
.ox-reddit-card {
  display: block;
  margin: 1.5rem 0;
  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  border-radius: 8px;
  overflow: hidden;
  background: var(--octc-color-bg);
}

.ox-reddit-card__main,
.ox-reddit-card__original {
  display: block;
  color: var(--octc-color-text);
  text-decoration: none;
}

.ox-reddit-card__main {
  padding: 1rem;
}

.ox-reddit-card__main:hover,
.ox-reddit-card__original:hover {
  text-decoration: none;
}

.ox-reddit-card__header,
.ox-reddit-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  color: var(--octc-color-text-muted);
}

.ox-reddit-card__header {
  margin-bottom: 0.625rem;
  font-size: 0.75rem;
}

.ox-reddit-card__network,
.ox-reddit-card__subreddit,
.ox-reddit-card__source,
.ox-reddit-card__original {
  font-weight: 600;
}

.ox-reddit-card__network {
  color: #ff4500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ox-reddit-card__subreddit,
.ox-reddit-card__source,
.ox-reddit-card__original {
  color: var(--octc-color-primary);
}

.ox-reddit-card__author,
.ox-reddit-card__time {
  color: var(--octc-color-text-muted);
}

.ox-reddit-card__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--octc-color-text);
}

.ox-reddit-card__body {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--octc-color-text-muted);
}

.ox-reddit-card__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  margin-top: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  border-radius: 8px;
  object-fit: cover;
  background: var(--octc-color-bg-alt);
}

.ox-reddit-card__meta {
  margin-top: 0.875rem;
  font-size: 0.75rem;
}

.ox-reddit-card__metric strong {
  color: var(--octc-color-text);
}

.ox-reddit-card__original {
  padding: 0.625rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--octc-color-border) 74%, transparent);
  background: var(--octc-color-bg-alt);
  font-size: 0.8125rem;
}

.ox-reddit-card--fallback,
.ox-reddit-card.error {
  border-style: dashed;
}