/* ===========================================================================
   SyncNews — "Synchronized News" hero (master–detail).
   Left rail = list of cross-source clusters; right panel = large summary of the
   selected story with coverage grouped by language. Theme-aware (uses the same
   CSS variables as styles.css). Kept in its own file to stay out of the way.
   =========================================================================== */
.synchero {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.sh-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.sh-head .bolt { color: var(--accent); font-size: 15px; }
.sh-head .sh-title {
  font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--text);
  text-transform: uppercase;
}
.sh-head .sh-sub { font-size: 12px; color: var(--text-faint); font-weight: 500; }
.sh-head .sync-mode { font-size: 11px; color: var(--text-faint); margin-left: auto; }

/* ---- Social sharing bar (synchronized story: hero detail + cluster modal) ---- */
.shr-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 13px; }
.shr-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-right: 3px; }
.shr-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-faint);
  cursor: pointer; text-decoration: none; transition: color .12s, background .12s, border-color .12s, transform .12s; }
.shr-btn:hover { color: #fff; transform: translateY(-1px); }
.shr-btn:active { transform: none; }
.shr-btn svg { display: block; }
.shr-x:hover        { background: #0f1419; border-color: #0f1419; }
.shr-facebook:hover { background: #1877f2; border-color: #1877f2; }
.shr-linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.shr-whatsapp:hover { background: #25d366; border-color: #25d366; }
.shr-reddit:hover   { background: #ff4500; border-color: #ff4500; }
.shr-email:hover, .shr-copy:hover, .shr-native:hover { background: var(--accent); border-color: var(--accent); }

.sh-grid {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 0;
  align-items: stretch;
}

/* ---- left rail: list of synchronized stories ---- */
.sh-list {
  border-right: 1px solid var(--border);
  height: var(--synchero-h, 460px); max-height: var(--synchero-h, 460px);
  overflow-y: auto; scrollbar-width: thin;
  background: var(--bg-elev);
}
.sh-litem {
  display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  padding: 11px 13px; cursor: pointer; color: var(--text);
  border-left: 3px solid transparent;
}
.sh-litem:hover { background: var(--hover); }
.sh-litem.active {
  background: var(--bg-elev2);
  border-left-color: var(--accent);
}
.sh-litem .shl-rank {
  font-size: 11px; font-weight: 800; color: var(--text-faint); flex-shrink: 0; margin-top: 1px;
  min-width: 18px;
}
.sh-litem.active .shl-rank { color: var(--accent); }
.shl-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.shl-title {
  font-size: 13px; font-weight: 650; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sh-litem.active .shl-title { color: var(--accent); }
.shl-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); }
.shl-badge {
  font-weight: 700; color: #fff; background: var(--accent); border-radius: 5px;
  padding: 1px 6px; font-size: 10.5px; white-space: nowrap;
}
.shl-flags { letter-spacing: 1px; }

/* ---- right panel: the large summary ---- */
.sh-detail {
  padding: 18px 22px 22px;
  height: var(--synchero-h, 460px); max-height: var(--synchero-h, 460px);
  overflow-y: auto; scrollbar-width: thin;
  background: var(--bg-elev2);
  /* subtle accent wash (fallback first, then color-mix where supported) */
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-elev));
  min-width: 0;
}
.shd-eyebrow {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
}
/* the source count is a button that opens the full source list */
.shd-eyebrow-btn {
  border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer;
  padding: 2px 6px 2px 0; text-align: left; border-radius: 6px;
}
.shd-eyebrow-btn::after { content: ' ⤢'; font-size: 11px; opacity: .7; }
.shd-eyebrow-btn:hover { text-decoration: underline; }
.cm-langn {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px;
  font-size: 11px; font-weight: 700; color: var(--text-soft);
}
.shd-title {
  margin: 0 0 12px; font-size: 23px; line-height: 1.18; font-weight: 800;
  letter-spacing: -.01em; color: var(--text);
}
.shd-title a { color: inherit; }
.shd-title a:hover { color: var(--accent); text-decoration: none; }
/* smaller news picture, floated so the summary wraps around it */
.shd-img {
  float: right;
  width: 188px; height: 120px; object-fit: cover; border-radius: 10px;
  margin: 2px 0 10px 16px;
  background: var(--hover); border: 1px solid var(--border);
}
@media (max-width: 560px) {
  .shd-img { float: none; width: 100%; height: 150px; margin: 0 0 12px; }
}
/* lead sentence + attributed source quotes (deterministic digest formatting) */
.shd-lead { font-size: 15.5px; line-height: 1.55; font-weight: 650; color: var(--text); margin: 0 0 13px; }
.shd-quote {
  margin: 0 0 10px; padding: 8px 13px;
  border-left: 3px solid var(--accent); background: var(--bg-elev);
  border-radius: 0 9px 9px 0; box-shadow: var(--shadow);
}
.shd-quote .sq-src {
  display: block; font-size: 11px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.shd-quote .sq-text { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.shd-quote .cref { color: var(--accent); font-weight: 700; font-size: .72em; vertical-align: super; margin-left: 1px; }
.cm-note {
  font-size: 12px; color: var(--text-soft); background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 7px;
}
.shd-summary {
  font-size: 15px; line-height: 1.6; color: var(--text); margin-bottom: 18px;
}
.shd-summary p { margin: 0 0 11px; }
/* scannable briefing: a bold lead + key-point bullets */
.shd-lead, .cm-summary .shd-lead {
  font-weight: 600; font-size: 15px; line-height: 1.55; margin: 0 0 12px; color: var(--text);
}
.shd-bullets {
  margin: 4px 0 16px; padding: 0; list-style: none;
}
.shd-bullets li {
  position: relative; padding: 7px 0 7px 22px; font-size: 14px; line-height: 1.5;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.shd-bullets li:last-child { border-bottom: 0; }
.shd-bullets li::before {
  content: ''; position: absolute; left: 5px; top: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* disputed / controversial point: YELLOW warning icon + a red wash that fades
   left -> right across the row, plus a footnote with the same treatment. */
.shd-bullets li.disputed {
  background: linear-gradient(to right, rgba(220, 38, 38, .16), rgba(220, 38, 38, 0) 85%);
  border-radius: 6px;
}
.shd-bullets li.disputed::before { background: #dc2626; }
.disp-icon {
  color: #facc15; font-weight: 700; font-size: 15px; line-height: 1;
  /* vertically center the triangle with the text it precedes */
  display: inline-flex; align-items: center; vertical-align: middle;
  height: 1.5em; margin-right: 4px; position: relative; top: -1px;
  /* dark edge so the yellow triangle stays crisp on light backgrounds */
  text-shadow: 0 0 1px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .3);
}
.shd-disputed-note {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 14px;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: linear-gradient(to right, rgba(220, 38, 38, .24), rgba(220, 38, 38, 0) 92%);
  border: 1px solid rgba(220, 38, 38, .30); border-left: 4px solid #dc2626;
  border-radius: 8px; padding: 8px 11px;
}
/* in the footnote the icon is the headline of the warning — make it pop */
.shd-disputed-note .disp-icon { font-size: 18px; vertical-align: -3px; }
/* references list, right under the briefing — a compact, self-scrolling box so a
   story with many sources doesn't push the panel down. Capped height + its own
   thin scrollbar; each reference is one tight, truncated row. */
.shd-refs {
  margin: 4px 0 8px; padding: 4px 6px 4px 24px; font-size: 12px;
  max-height: 132px; overflow-y: auto; scrollbar-width: thin;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
}
.shd-refs::-webkit-scrollbar { width: 7px; }
.shd-refs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9px; }
.shd-refs li { margin: 0 0 1px; line-height: 1.35; padding: 1px 0; }
.shd-refs a {
  text-decoration: none; color: inherit; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shd-refs .ref-src { font-weight: 700; color: var(--accent); margin-right: 6px; }
.shd-refs .ref-ttl { color: var(--text-soft); }
.shd-refs a:hover .ref-ttl { text-decoration: underline; color: var(--text); }
.shd-summary .cref {
  color: var(--accent); font-weight: 700; font-size: .7em; vertical-align: super; cursor: default;
  margin-left: 1px;
}
/* citations and source names are now links to the cited outlet */
.shd-summary a.cref, .shd-quote a.cref { cursor: pointer; text-decoration: none; }
.shd-summary a.cref:hover, .shd-quote a.cref:hover { text-decoration: underline; }
.shd-quote a.sq-src { text-decoration: none; }
.shd-quote a.sq-src:hover { text-decoration: underline; }
.shd-sec-h {
  clear: both; /* sit below the floated picture */
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); margin: 4px 0 10px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.shd-langs { display: flex; flex-direction: column; gap: 14px; }
.shd-langrow { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.shd-langlabel {
  flex-shrink: 0; min-width: 116px; font-size: 12.5px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 6px; padding-top: 4px;
}
.shd-langlabel .flag { font-size: 15px; }
.shd-langn {
  font-size: 10.5px; font-weight: 700; color: var(--text-faint);
  background: var(--hover); border-radius: 999px; padding: 1px 6px;
}
.shd-srcpills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; }
.shd-srcpill {
  font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px; white-space: nowrap;
}
.shd-srcpill:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* richer source rows: outlet name + its own headline */
.shd-srclist { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.shd-srcitem {
  display: flex; gap: 9px; align-items: baseline; min-width: 0;
  padding: 4px 8px; border-radius: 7px;
}
.shd-srcitem:hover { background: var(--hover); text-decoration: none; }
.shd-srcitem .ssrc {
  font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; flex-shrink: 0;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.shd-srcitem .shead {
  font-size: 12.5px; color: var(--text-soft); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shd-srcitem:hover .shead { color: var(--accent); }
.cm-loading { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: 13px; padding: 20px 0; }
.spinner {
  width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; display: inline-block; animation: spin .7s linear infinite;
}
.spinner.sm { width: 12px; height: 12px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- drag-to-resize handle ---- */
.synchero-resize {
  height: 10px; cursor: ns-resize;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border-top: 1px solid var(--border);
  user-select: none; -webkit-user-select: none;
  transition: background 0.15s;
}
.synchero-resize:hover,
.synchero-resize.dragging { background: var(--hover); }
.synchero-resize-grip {
  width: 40px; height: 3px; border-radius: 99px;
  background: var(--border-strong); opacity: 0.5;
  transition: opacity 0.15s, width 0.15s;
}
.synchero-resize:hover .synchero-resize-grip,
.synchero-resize.dragging .synchero-resize-grip {
  opacity: 1; width: 60px;
}

/* ---- responsive: stack on narrow screens ---- */
@media (max-width: 760px) {
  .sh-grid { grid-template-columns: 1fr; }
  .sh-list { border-right: 0; border-bottom: 1px solid var(--border); height: 240px; max-height: 240px; }
  .sh-detail { height: auto; max-height: none; padding: 16px; }
  .shd-title { font-size: 20px; }
  .synchero-resize { display: none; }
}

/* ====================================================================
   MOBILE ACCORDION — on phones the Synchronized hero is an accordion:
   tapping a story header expands its content IN PLACE under that header
   (app.js relocates the single detail panel there) and tapping again
   collapses it. Desktop keeps the master–detail layout untouched.
   Scoped to mobile width AND the .acc class app.js sets only on mobile.
   ==================================================================== */
@media (max-width: 760px) {
  /* the list grows with its content instead of being a fixed-height scroller, so
     the expanded detail can sit inline beneath the active header */
  .synchero.acc .sh-list {
    height: auto; max-height: none; overflow: visible; border-bottom: 0;
  }
  /* a chevron affordance on each header; rotates when its story is expanded */
  .synchero.acc .sh-litem .shl-main { flex: 1 1 auto; }
  .synchero.acc .sh-litem::after {
    content: ''; flex-shrink: 0; align-self: center; margin-left: 10px;
    width: 8px; height: 8px; position: relative; top: -2px;
    border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
    transform: rotate(45deg); transition: transform .2s ease, border-color .2s ease, top .2s ease;
  }
  .synchero.acc .sh-litem.active::after {
    transform: rotate(225deg); top: 2px; border-color: var(--accent);
  }
  /* the relocated detail — now an inline expandable panel under its header */
  .synchero.acc .sh-detail { border-left: 3px solid var(--accent); }
  .synchero.acc .sh-detail[hidden] { display: none; }
  .synchero.acc .sh-detail.sh-acc-anim { animation: shAccIn .22s ease; }
}
@keyframes shAccIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
/* honor reduced-motion: no entrance slide (also avoids any residual offset for them) */
@media (prefers-reduced-motion: reduce) {
  .synchero.acc .sh-detail.sh-acc-anim { animation: none; }
}

/* ====================================================================
   Disputed DEEP DIVE — the disputed line item is an expandable trigger
   that reveals a head-to-head "VS" breakdown (the dispute widget), in
   the post's language. Hover-grow signals clickability on desktop; on
   touch (no hover) it is click/tap-only.
   ==================================================================== */
.shd-bullets li.shd-deep {
  cursor: pointer; border-radius: 6px; outline: none;
  transition: background .16s ease, padding .16s ease, box-shadow .16s ease;
}
.shd-bullets li.shd-deep:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
/* the "deep dive possible" signal chip sitting at the end of the line */
.shd-deep-sig {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--accent); vertical-align: 1px;
  background: rgba(225, 29, 72, .10); border: 1px solid rgba(225, 29, 72, .30);
  border-radius: 999px; padding: 1px 8px;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.shd-deep-sig .dds-x { font-size: 11px; line-height: 1; }
.shd-deep-sig .dds-c { font-weight: 800; display: inline-block; transition: transform .2s ease; }
/* expanded: rotate the caret to point down */
.shd-bullets li.shd-deep.on .shd-deep-sig { background: var(--accent); color: #fff; border-color: var(--accent); }
.shd-bullets li.shd-deep.on .shd-deep-sig .dds-c { transform: rotate(90deg); }
/* hover affordance — ONLY on devices that truly hover (desktop). The row grows
   slightly and the chip lights up to signal "click to open". Touch devices skip
   this entirely and rely on tap. */
@media (hover: hover) and (pointer: fine) {
  .shd-bullets li.shd-deep:hover {
    background: linear-gradient(to right, rgba(220, 38, 38, .22), rgba(220, 38, 38, 0) 88%);
    padding-top: 10px; padding-bottom: 10px; padding-right: 6px;
  }
  .shd-bullets li.shd-deep:hover .shd-deep-sig { background: var(--accent); color: #fff; border-color: var(--accent); }
  .shd-bullets li.shd-deep:hover .shd-deep-sig .dds-c { transform: translateX(2px); }
}

/* the collapsible panel — a list item so it can open in the clicked bullet's
   place (pushing the bullets below it down); animates open via max-height. The
   usual bullet chrome (dot, divider, indent) is stripped so it reads as a panel. */
.shd-bullets li.shd-dispanel {
  padding: 0; border-bottom: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .38s ease, opacity .3s ease, margin .3s ease;
}
.shd-bullets li.shd-dispanel::before { content: none; display: none; }
.shd-bullets li.shd-dispanel.open { max-height: 5000px; opacity: 1; margin: 10px 0 6px; }

/* the VS widget itself */
.vsw {
  background: var(--bg-elev2); border: 1px solid var(--border); border-left: 3px solid #dc2626;
  border-radius: 12px; padding: 13px 15px;
}
.vsw-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.vsw-badge { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; color: #dc2626; }
.vsw-score { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); }
.vsw-score b { font-size: 15px; color: var(--mc, #f59e0b); margin: 0 1px; }
.vsw-common {
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-soft);
  background: rgba(22, 163, 74, .09); border: 1px solid rgba(22, 163, 74, .26);
  border-left: 3px solid #16a34a; border-radius: 9px; padding: 8px 11px;
}
.vsw-common .vsw-ok { color: #16a34a; font-weight: 800; margin-right: 3px; }
.vsw-axis { margin-top: 14px; }
.vsw-q { font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 11px; }
.vsw-kind {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #0b0e13; background: #cbd5e1; border-radius: 5px; padding: 1px 6px; vertical-align: 1px; margin-left: 4px;
}
/* Sides ALWAYS sit next to each other (any side count), VS badges between them.
   Flex lets every side share width equally and shrink to fit; they only stack
   on a genuinely narrow viewport (mobile). */
.vsw-faceoff { display: flex; gap: 9px; align-items: stretch; }
.vsw-side {
  flex: 1 1 0; min-width: 0;
  background: var(--bg-elev); border: 1px solid var(--border); border-top: 3px solid var(--vc, #38bdf8);
  border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column;
}
.vsw-tag {
  align-self: flex-start; max-width: 100%; font-size: 12.5px; font-weight: 500; color: #0b0e13;
  border-radius: 7px; padding: 3px 10px; margin-bottom: 7px; line-height: 1.35;
}
.vsw-claim { font-size: 12.5px; line-height: 1.45; color: var(--text); margin: 0 0 8px; }
.vsw-n { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 700; margin-bottom: 7px; }
/* the count line doubles as the toggle that reveals this side's collapsed sources */
.vsw-srctoggle {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  background: transparent; border: 0; cursor: pointer; font-family: inherit; padding: 1px 0;
}
.vsw-srctoggle:hover { color: var(--text); }
.vsw-srctoggle:hover .vsw-ncount { text-decoration: underline; }
.vsw-caret { font-size: 12px; line-height: 1; font-weight: 800; display: inline-block; transition: transform .18s ease; }
.vsw-srctoggle[aria-expanded="true"] .vsw-caret { transform: rotate(90deg); }
.vsw-srctoggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); border-radius: 5px; }
.vsw-srcs[hidden] { display: none; }
/* show ~3 sources, then scroll within this segment for the rest — keeps the
   side card compact no matter how many outlets back the claim */
.vsw-srcs {
  list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 156px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.vsw-srcs::-webkit-scrollbar { width: 7px; }
.vsw-srcs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9px; }
.vsw-srcs::-webkit-scrollbar-track { background: transparent; }
.vsw-srcs::before { display: none; }
.vsw-srcs li { padding: 0; border: 0; }
.vsw-srcs li::before { display: none; }
.vsw-srcs a { display: flex; gap: 6px; align-items: flex-start; text-decoration: none; line-height: 1.3; min-width: 0; }
.vsw-flag { font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.vsw-ob { min-width: 0; flex: 1; }
/* outlet name: one line, truncated with an ellipsis so narrow columns stay tidy */
.vsw-ob b { display: block; font-size: 11.5px; color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* headline: at most two lines, then ellipsis */
.vsw-hl {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 11.5px; color: var(--link); margin-top: 1px;
}
.vsw-srcs a:hover .vsw-hl { text-decoration: underline; }
.vsw-vs {
  flex: 0 0 auto; align-self: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 900; font-size: 10px; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(225, 29, 72, .16); z-index: 1;
}
.vsw-tone {
  margin-top: 13px; font-size: 11.5px; line-height: 1.5; color: var(--text-soft);
  border-top: 1px dashed var(--border); padding-top: 10px;
}
.vsw-tone .dds-x { color: #facc15; text-shadow: 0 0 1px rgba(0, 0, 0, .55); }
/* stack vertically only on real mobile widths */
@media (max-width: 600px) {
  .vsw-faceoff { flex-direction: column; }
  .vsw-vs { margin: -3px auto; }
}