/* ============================================================
   WorldSong — Community + Account pages
   Uses tokens & fonts from styles.css (Syne display, DM Sans body,
   teal-dark palette). Loaded only on community.html + account.html.
   ============================================================ */

/* Content pages have no hero, so the sticky header stays solid. */
.page-solid .site-header {
  background: rgba(6, 22, 22, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-subtle);
}
.page-solid .site-header::before { opacity: 0; }

.page-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ---------- PAGE BAND (compact header banner) ---------- */
.page-band {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 28px;
  border-bottom: 1px solid var(--border-subtle);
}
.page-band__eyebrow {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-primary);
  margin: 0 0 10px;
}
/* Display type earns its scale from weight and tracking, not size alone. At 46px
   a -0.01em track still reads loose and slightly generic; pulling it in and
   going up a weight is most of the difference between "big text" and a
   masthead. `balance` stops a two-line heading leaving one orphaned word. */
.page-band__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 50px);
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.page-band__sub {
  font-family: var(--f-body);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
  margin: 16px 0 0;
  max-width: 58ch;
  text-wrap: pretty;
}
.page-band__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 22px;
}
.page-band__stat { display: flex; flex-direction: column; gap: 2px; }
.page-band__stat b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--text-primary);
}
.page-band__stat span {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- LAYOUT ---------- */
.layout {
  display: grid;
  gap: 28px;
  margin-top: 32px;
  align-items: start;
}
.layout--3col { grid-template-columns: 220px minmax(0, 1fr) 300px; }
.layout--2col { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1080px) {
  .layout--3col { grid-template-columns: minmax(0, 1fr) 300px; }
  .layout--3col .col-left { display: none; }
}
@media (max-width: 820px) {
  .layout--3col, .layout--2col { grid-template-columns: 1fr; }
  .layout--3col .col-right, .layout--2col .col-right { order: 3; }
}
.col-sticky { position: sticky; top: 96px; }
@media (max-width: 820px) { .col-sticky { position: static; } }

/* ---------- PANEL (card) ---------- */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 20px;
}
.panel + .panel { margin-top: 20px; }
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.panel__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-primary); margin: 0;
}
.panel__link { color: var(--teal-primary); font-size: 13px; font-weight: 500; }
.panel__link:hover { text-decoration: underline; }

/* ---------- AVATAR ---------- */
.avatar {
  --size: 44px;
  width: var(--size); height: var(--size);
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 600;
  color: var(--bg-deepest);
  background: linear-gradient(150deg, var(--teal-bright), var(--teal-deep));
  overflow: hidden;
  font-size: calc(var(--size) * 0.4);
  border: 1px solid rgba(255,255,255,0.08);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--sm { --size: 36px; }
.avatar--lg { --size: 96px; }
.avatar--xl { --size: 120px; }

/* ---------- CHIP ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 4px 12px;
}
.chip--teal { color: var(--teal-primary); border-color: var(--border-default); }

/* ---------- SMALL BUTTONS ---------- */
.btn-sm {
  font-family: var(--f-body); font-weight: 500; font-size: 13px;
  letter-spacing: 0.04em;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--border-default);
  color: var(--text-primary); background: transparent;
  cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-sm:hover { border-color: var(--teal-primary); background: rgba(45,212,191,0.08); }
.btn-sm--teal { background: linear-gradient(180deg, var(--teal-bright), var(--teal-primary)); color: var(--text-on-teal); border-color: transparent; }
.btn-sm--teal:hover { color: var(--text-on-teal); filter: brightness(1.03); }
.btn-sm.is-following { color: var(--text-muted); border-color: var(--border-subtle); }

/* ---------- SIDEBAR NAV (community left rail) ---------- */
.rail { display: flex; flex-direction: column; gap: 4px; }
.rail a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-family: var(--f-body); font-weight: 500;
  font-size: 15px; transition: background .16s ease, color .16s ease;
}
.rail a:hover { background: var(--bg-card); color: var(--text-primary); }
.rail a.active { background: var(--bg-card); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--teal-primary); }
.rail a svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--teal-primary); }
.rail__label {
  font-family: var(--f-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); margin: 20px 0 8px 14px;
}

/* ---------- POST COMPOSER ---------- */
.composer-box { display: flex; gap: 14px; align-items: flex-start; }
.composer-box__field { flex: 1; }
.composer-box input[type="text"] {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-primary);
  font-family: var(--f-body); font-size: 15px;
  padding: 12px 18px;
  outline: none; transition: border-color .18s ease;
}
.composer-box input[type="text"]:focus { border-color: var(--teal-primary); }
.composer-box input::placeholder { color: var(--text-muted); }
.composer-box__actions {
  display: flex; align-items: center; justify-content: space-between; margin-top: 12px;
}
.composer-box__tools { display: flex; gap: 6px; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-secondary); font-family: var(--f-body); font-size: 13px; font-weight: 500;
  padding: 7px 12px; border-radius: var(--radius-sm);
  background: transparent; border: none; cursor: pointer; transition: background .16s ease, color .16s ease;
}
.icon-btn:hover { background: var(--bg-card-elevated); color: var(--text-primary); }
.icon-btn svg { width: 18px; height: 18px; color: var(--teal-primary); }

/* ---------- FEED POST ---------- */
.post { }
.post + .post { margin-top: 20px; }
.post__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.post__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.post__name { font-family: var(--f-body); font-weight: 700; font-size: 15px; letter-spacing: -0.006em; color: var(--text-primary); }
.post__name .post__role { font-weight: 400; color: var(--text-secondary); font-size: 13px; margin-left: 6px; }
/* The timestamp is a footnote, so it is set like one - small, spaced, quiet. */
.post__meta {
  font-family: var(--f-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.post__more { margin-left: auto; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 4px; }
.post__body {
  font-family: var(--f-body); font-size: 16px; line-height: 1.65;
  color: var(--text-primary); max-width: 62ch; text-wrap: pretty;
}
.post__body a { color: var(--teal-primary); }

/* attached media / track */
.post__track {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 12px;
  background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.post__track-art {
  width: 54px; height: 54px; border-radius: 8px; flex-shrink: 0;
  background-size: cover; background-position: center;
  position: relative;
}
.post__track-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,0.28); border-radius: 8px;
}
.post__track-play svg { width: 22px; height: 22px; }
.post__track-meta { min-width: 0; }
.post__track-title { font-family: var(--f-body); font-weight: 700; font-size: 14.5px; }
.post__track-sub { font-family: var(--f-body); font-size: 13px; color: var(--text-secondary); }
.post__img {
  margin-top: 14px; width: 100%; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

.post__actions {
  display: flex; gap: 8px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border-subtle);
}
.post-action {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body); font-size: 13.5px; font-weight: 500;
  color: var(--text-secondary);
  background: transparent; border: none; cursor: pointer;
  padding: 6px 12px; border-radius: var(--radius-sm);
  transition: background .16s ease, color .16s ease;
}
.post-action:hover { background: var(--bg-card-elevated); color: var(--text-primary); }
.post-action svg { width: 18px; height: 18px; }
.post-action.is-liked { color: var(--teal-primary); }
.post-action .count { color: var(--text-muted); }

/* ---------- SIDE LISTS (who to follow / trending) ---------- */
.side-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.side-item + .side-item { border-top: 1px solid var(--border-subtle); }
.side-item__meta { min-width: 0; flex: 1; }
.side-item__name { font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--text-primary); }
.side-item__sub { font-family: var(--f-body); font-size: 12.5px; color: var(--text-muted); }

.tag-list { display: flex; flex-direction: column; gap: 12px; }
.tag-row__topic { font-family: var(--f-body); font-weight: 600; font-size: 14.5px; color: var(--text-primary); }
.tag-row__count { font-family: var(--f-body); font-size: 12.5px; color: var(--text-muted); }

.event-item { padding: 12px 0; }
.event-item + .event-item { border-top: 1px solid var(--border-subtle); }
.event-item__date { font-family: var(--f-body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-primary); }
.event-item__title { font-family: var(--f-body); font-weight: 600; font-size: 14.5px; color: var(--text-primary); margin: 3px 0; }
.event-item__loc { font-family: var(--f-body); font-size: 12.5px; color: var(--text-muted); }

/* ============================================================
   ACCOUNT / USER SPACE
   ============================================================ */
.profile-cover {
  height: 220px;
  border-radius: var(--radius-lg);
  margin: 28px 0 0;
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(94,234,212,0.22), transparent 60%),
    linear-gradient(120deg, var(--bg-card-elevated), var(--bg-card) 60%, #0e2a2a);
  border: 1px solid var(--border-subtle);
  position: relative; overflow: hidden;
}
.profile-cover__wave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  opacity: 0.35; color: var(--teal-primary);
}
.profile-cover__wave svg { width: 100%; height: 100%; }

/* A cover photo is whatever the member uploaded: it can be blinding white or
   near-black, and no scrim is strong enough to guarantee legible text over all
   of them without turning the photograph into mud. So nothing sits on the
   image. It behaves like an album sleeve - the picture is the picture, and the
   credits sit underneath in type that can be trusted to read.

   The gradient that remains is doing a different job: dissolving the bottom of
   the photograph into the page instead of ending it on a hard rule. */
.profile-cover.has-banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.profile-cover.has-banner .profile-cover__wave { display: none; }
.profile-cover.has-banner::after {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 72%,
    color-mix(in srgb, var(--bg-deepest) 55%, transparent) 100%);
}

/* Two rows: the avatar rides up over the photograph, everything that has to be
   read sits below it on solid ground.

   z-index matters here. The cover's gradient is a positioned pseudo-element, so
   without this the head paints underneath it and every name renders through a
   layer of grey - which is exactly what happened the first time. */
.profile-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar ."
    "info   actions";
  column-gap: 24px;
  margin: -60px 0 0;
  padding: 0 8px 0 24px;
  position: relative;
  z-index: 2;
}
.profile-head .avatar {
  grid-area: avatar;
  border: 4px solid var(--bg-deepest);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
}
.profile-head__info { grid-area: info; padding-top: 18px; min-width: 0; }
/* Aligned to the top of the text block, level with the name, rather than
   floating in the whitespace beside a bio of unpredictable length. */
.profile-head__actions {
  grid-area: actions; display: flex; gap: 10px;
  align-self: start; padding-top: 26px;
}

/* The name is the loudest thing on the page, and it is allowed to be. Display
   weight, tight tracking and a line-height under 1.1 are what stop a large
   heading reading as merely big. */
.profile-head__name {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.032em; line-height: 1.02;
  margin: 0; text-wrap: balance;
}
/* The credits line: small, spaced and quiet, so it frames the name instead of
   competing with it. */
.profile-head__handle {
  font-family: var(--f-body); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin: 14px 0 0;
}
.profile-head__bio {
  font-family: var(--f-body); font-size: 16px; line-height: 1.65;
  color: var(--text-secondary); margin: 18px 0 0;
  max-width: 58ch; text-wrap: pretty;
}
@media (max-width: 640px) {
  .profile-head {
    grid-template-columns: 1fr;
    grid-template-areas: "avatar" "info" "actions";
    padding-left: 8px; row-gap: 4px;
  }
  .profile-head__actions { padding-bottom: 0; }
  .profile-head__info { padding-top: 14px; }
}

/* Four numbers do not need a box drawn round them. Hairline rules and real
   space read as considered; a bordered card of stat tiles reads as a template. */
.stat-row {
  display: flex; flex-wrap: wrap; gap: 18px clamp(30px, 6vw, 64px);
  margin: 34px 8px 6px; padding: 22px 24px;
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.stat { display: flex; flex-direction: column; gap: 6px; }
/* Body font for the figures, not the display face. Syne draws a very geometric
   zero that reads as a thin hollow ring at this weight - and a brand-new member
   sees four zeros here, so that is the first impression the page makes. Tabular
   figures keep the columns from shifting as counts change. */
.stat b {
  font-family: var(--f-body); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1; color: var(--text-primary);
}
.stat span {
  font-family: var(--f-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}

/* tabs */
.tabs {
  display: flex; gap: 4px; margin: 8px 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.tab {
  font-family: var(--f-body); font-weight: 500; font-size: 14px; letter-spacing: 0.04em;
  color: var(--text-secondary); background: none; border: none; cursor: pointer;
  padding: 14px 16px; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .16s ease, border-color .16s ease;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--teal-primary); }

/* track list (account) */
.track-list { display: flex; flex-direction: column; }
.track-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 8px;
  border-radius: var(--radius-sm); transition: background .16s ease;
}
.track-row:hover { background: var(--bg-card-elevated); }
.track-row + .track-row { border-top: 1px solid var(--border-subtle); }
.track-row__art { width: 46px; height: 46px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.track-row__meta { flex: 1; min-width: 0; }
.track-row__title { font-family: var(--f-body); font-weight: 600; font-size: 14.5px; }
.track-row__sub { font-family: var(--f-body); font-size: 13px; color: var(--text-secondary); }
.track-row__dur { font-family: var(--f-body); font-size: 13px; color: var(--text-muted); }

/* quick actions */
.qa-list { display: flex; flex-direction: column; gap: 10px; }
.qa {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg-base); border: 1px solid var(--border-subtle);
  color: var(--text-primary); font-family: var(--f-body); font-weight: 500; font-size: 14px;
  transition: border-color .16s ease, background .16s ease;
}
.qa:hover { border-color: var(--teal-primary); background: var(--bg-card-elevated); }
.qa svg { width: 20px; height: 20px; color: var(--teal-primary); flex-shrink: 0; }
.qa .qa__sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-muted); }

/* signed-in user chip in header */
.user-chip { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.user-chip__name { font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--text-primary); }
.user-chip svg { color: var(--text-secondary); }
@media (max-width: 560px) { .user-chip__name { display: none; } }

/* misc */
.muted { color: var(--text-muted); }
.empty-note { font-family: var(--f-body); color: var(--text-muted); font-size: 14px; padding: 24px 4px; text-align: center; }
.notif { display: flex; gap: 12px; padding: 12px 0; }
.notif + .notif { border-top: 1px solid var(--border-subtle); }
.notif__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--teal-primary); margin-top: 6px; flex-shrink: 0; }
.notif__text { font-family: var(--f-body); font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.notif__text b { color: var(--text-primary); font-weight: 600; }
.notif__time { font-family: var(--f-body); font-size: 12px; color: var(--text-muted); }

/* ============================================================
   LINK EMBED — "share your links, we format & play them"
   (proof of concept)
   ============================================================ */
.embed-intro { max-width: 720px; }
.embed-supported {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}

.embed-form {
  display: flex; gap: 10px; align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 8px 8px 8px 20px;
  max-width: 720px; margin-top: 22px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.embed-form:focus-within { border-color: var(--teal-primary); box-shadow: 0 0 0 4px var(--teal-glow); }
.embed-form input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: var(--f-body); font-size: 15px; padding: 11px 4px;
}
.embed-form input::placeholder { color: var(--text-muted); }
.embed-hint { font-family: var(--f-body); font-size: 13px; color: var(--text-muted); margin-top: 12px; }
.embed-hint b { color: var(--text-secondary); font-weight: 600; }

.embed-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; margin-top: 34px;
}
@media (max-width: 760px) { .embed-grid { grid-template-columns: 1fr; } }

.embed-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.embed-card__media {
  position: relative; aspect-ratio: 16 / 9; background: var(--bg-base);
  overflow: hidden;
}
.embed-card__media.is-audio { aspect-ratio: auto; }
.embed-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.embed-card__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; color: #fff;
}
.embed-card__ph svg { width: 44px; height: 44px; opacity: .95; }
.embed-card__ph span { font-family: var(--f-body); font-weight: 600; letter-spacing: .04em; font-size: 14px; }
.embed-card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6,22,22,0.28); border: none; cursor: pointer; color: #fff;
  transition: background .18s ease;
}
.embed-card__media:hover .embed-card__play { background: rgba(6,22,22,0.42); }
.embed-card__play svg { width: 56px; height: 56px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5)); }
.embed-card__media iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed-card__media.is-audio iframe { height: var(--embed-h, 166px); }

.embed-card__body { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.embed-card__body .embed-card__meta { min-width: 0; flex: 1; }
.embed-card__title { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-card__sub { font-family: var(--f-body); font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-plat {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle); border-radius: 999px; padding: 4px 10px;
}
.embed-plat .dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }

/* fallback link-button card (non-media links) */
.embed-card--link { flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
.embed-card--link .embed-linkicon {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card-elevated); border: 1px solid var(--border-subtle); color: var(--teal-primary);
}
.embed-card--link .embed-linkicon svg { width: 22px; height: 22px; }
.embed-card--link .embed-card__meta { flex: 1; min-width: 0; }
.embed-card--link .embed-card__title { white-space: normal; }

/* On a phone the button and the title fight over one line, and the title loses:
   it wraps to three words a line beside a pill taking half the width. Below
   560px the card stacks instead, so the title gets the full measure and the
   action sits under it where there is room for it. */
@media (max-width: 560px) {
  .embed-card--link {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .embed-card--link .embed-card__meta { flex: 1 1 100%; order: 2; }
  .embed-card--link .btn-sm { order: 3; flex: 1 1 100%; text-align: center; }
}
.embed-remove {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; flex-shrink: 0;
  border-radius: 8px; transition: color .16s ease, background .16s ease;
}
.embed-remove:hover { color: var(--text-primary); background: var(--bg-card-elevated); }
.embed-remove svg { width: 18px; height: 18px; }