/* XRP Mission Control — design tokens
 *
 * Single source of truth for colours, type, and depth.
 * Consumed by styles.css and admin.css.
 * Mirror these values in tokens.json for the PHP OG-image generator
 * so the web and the social card share one palette.
 *
 * Rule: no raw hex values anywhere except in this file.
 * If you find yourself typing #xxxxxx in styles.css, stop —
 * either it maps to an existing token or you need to add one here.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  color-scheme: dark;

  /* === Surfaces — backgrounds & containers === */
  --surface-bg:        #05080c;   /* page background */
  --surface-panel:     #0d1623;   /* widget background */
  --surface-elevated:  #131e2e;   /* hover/modal/panel-soft */
  --surface-divider:   #1c2a3e;   /* hairline / faint border */

  /* === Borders & lines === */
  --border-default:    #26384f;
  --border-hover:      #3e5c78;
  --border-focus:      #35d6ff;   /* same hue as --signal-accent */

  /* === Text === */
  --text-primary:      #edf5ff;
  --text-secondary:    #c8d7e8;
  --text-muted:        #93a6bd;
  --text-inverse:      #07111b;   /* on light buttons */

  /* === Signal colours (used by score, deltas, charts, OG image) === */
  --signal-positive:   #3fe28f;
  --signal-neutral:    #ffc857;
  --signal-negative:   #ff647c;
  --signal-accent:     #35d6ff;   /* brand cyan: links, focus, brand mark */
  --signal-extended:   #b388ff;   /* violet: Extended regime, distinct from Strong */

  /* === Regime palette (one colour per MCS regime) ===
   * These map 1:1 to the six MCS regimes from scoring.php.
   */
  --regime-weak:       var(--signal-negative);
  --regime-lagging:    #ff8a6e;   /* red-amber */
  --regime-neutral:    var(--signal-neutral);
  --regime-improving:  var(--signal-positive);
  --regime-strong:     var(--signal-accent);
  --regime-extended:   var(--signal-extended);

  /* === Chart palette === */
  --chart-line-primary: var(--signal-accent);
  --chart-line-muted:   #6a7f99;
  --chart-line-soft:    #a3b2c3;
  --chart-fill-soft:    rgba(53, 214, 255, 0.10);
  --chart-grid:         #213248;
  --chart-bg:           #131e2e;

  /* === Accent surfaces (buttons, support row) === */
  --button-primary-bg:    #e8f7ff;
  --accent-positive-soft: #a9ffd0;
  --accent-positive-line: #2e7051;
  --border-hover-strong:  #6d9bc1;

  /* === Depth === */
  --shadow-card:        0 28px 90px rgba(0, 0, 0, 0.34);
  --shadow-glow-accent: 0 0 28px rgba(53, 214, 255, 0.14);
  --shadow-glow-positive: 0 0 28px rgba(63, 226, 143, 0.14);

  /* === Type families === */
  --font-display: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* === Type weights === */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-display:    800;
  --w-display-strong: 900;

  /* === Radii === */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    14px;
  --radius-pill:  999px;

  /* ============================================================
   * BACKWARDS-COMPATIBILITY ALIASES
   *
   * The existing styles.css declares its own --bg, --panel, --line etc.
   * These aliases let it keep working unchanged: every legacy variable
   * now points at a token from the new system.
   *
   * Goal: kill these aliases as we sweep styles.css.
   * ============================================================ */
  --bg:           var(--surface-bg);
  --panel:        rgba(13, 22, 35, 0.88);
  --panel-strong: var(--surface-panel);
  --panel-soft:   var(--surface-elevated);
  --line:         var(--border-default);
  --line-bright:  var(--border-hover);
  --text:         var(--text-primary);
  --muted:        var(--text-muted);
  --soft:         var(--text-secondary);
  --cyan:         var(--signal-accent);
  --green:        var(--signal-positive);
  --amber:        var(--signal-neutral);
  --red:          var(--signal-negative);
  --shadow:       var(--shadow-card);

  font-family:    var(--font-sans);
}

/* Font files are served from Google Fonts via the @import at top of this file —
 * single line, no PHP edits, globally cached. The OG image generator
 * uses local TTF files in /cron/assets/fonts/ (JetBrains Mono) because
 * PHP-GD's imagettftext requires on-disk fonts, not browser-cached WOFF2. */

/* ============================================================
 * Share-preview modal — opens from any .x-share-btn or from the
 * homepage "Share Today's Brief" CTA. Shows the live OG image,
 * editable tweet text, and one-click Post to X.
 * ============================================================ */
.share-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 8, 0.72);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  z-index: 200;
  padding: 20px;
  animation: share-modal-fade 200ms ease;
}
@keyframes share-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.share-modal-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px;
  background: var(--surface-panel);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  animation: share-modal-lift 280ms cubic-bezier(0.2, 0.82, 0.2, 1);
}
@keyframes share-modal-lift {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.share-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-bg);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.share-modal-close:hover { border-color: var(--border-hover-strong); color: var(--text-primary); }
.share-modal-eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal-accent);
}
.share-modal-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 28px;
  letter-spacing: -0.01em;
}
.share-modal-preview {
  margin-bottom: 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-bg);
  overflow: hidden;
}
.share-modal-preview img { display: block; width: 100%; height: auto; }
.share-modal-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.share-modal-text {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-bg);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}
.share-modal-text:focus { border-color: var(--border-focus); outline: 0; }
.share-modal-helper {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.share-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ============================================================
 * Sticky "Share on X" button — injected on every public page.
 * Pre-fills the tweet composer with page-specific copy; X
 * fetches the og:image meta when composing.
 * ============================================================ */
.x-share-btn {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease, border-color 200ms ease, color 200ms ease, background 200ms ease;
  backdrop-filter: blur(12px);
}
.x-share-btn:hover {
  transform: translateY(-2px);
  border-color: var(--border-focus);
  color: var(--signal-accent);
  background: var(--surface-elevated);
}
.x-share-btn__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: currentColor;
}
@media (max-width: 640px) {
  .x-share-btn__text { display: none; }
  .x-share-btn { padding: 12px; }
}

/* ============================================================
 * Sticky "Embed" button — stacks above the share button. Opens
 * a modal with live iframe preview + one-click copy of the
 * <iframe> snippet. Aim: passive distribution / backlinks.
 * ============================================================ */
.xmc-embed-btn {
  position: fixed;
  bottom: 78px;
  right: 22px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease, border-color 200ms ease, color 200ms ease, background 200ms ease;
  backdrop-filter: blur(12px);
}
.xmc-embed-btn:hover {
  transform: translateY(-2px);
  border-color: var(--border-focus);
  color: var(--signal-accent);
  background: var(--surface-elevated);
}
.xmc-embed-btn__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: currentColor;
}
@media (max-width: 640px) {
  .xmc-embed-btn__text { display: none; }
  .xmc-embed-btn { padding: 12px; bottom: 74px; }
}

/* Single-column variant of widget-grid — used for full-width sections
 * (e.g. the MCS heatmap) that should sit between hero and the main grid
 * without breaking the column layout below. */
.widget-grid.widget-grid--single { grid-template-columns: 1fr; }

/* ============================================================
 * MCS 90-day regime heatmap. Each cell is one UTC day, colored
 * by the regime XRP closed in. Squares = links to that day's
 * brief. Unique XMC visual — nobody else has the MCS series.
 * ============================================================ */
.mcs-heatmap { margin-top: 4px; }
.mcs-heatmap__grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 3px;
  padding: 4px 0;
}
.mcs-heatmap__cell {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: var(--surface-bg);
  border: 1px solid var(--border-default);
  transition: transform 120ms ease, outline-color 120ms ease;
  text-decoration: none;
  outline: 1px solid transparent;
  outline-offset: 1px;
}
.mcs-heatmap__cell:hover {
  transform: scale(1.4);
  z-index: 2;
  outline-color: var(--signal-accent);
}
.mcs-heatmap__cell--weak      { background: var(--regime-weak);      border-color: var(--regime-weak); }
.mcs-heatmap__cell--lagging   { background: var(--regime-lagging);   border-color: var(--regime-lagging); }
.mcs-heatmap__cell--neutral   { background: var(--regime-neutral);   border-color: var(--regime-neutral); }
.mcs-heatmap__cell--improving { background: var(--regime-improving); border-color: var(--regime-improving); }
.mcs-heatmap__cell--strong    { background: var(--regime-strong);    border-color: var(--regime-strong); }
.mcs-heatmap__cell--extended  { background: var(--regime-extended);  border-color: var(--regime-extended); }
.mcs-heatmap__cell--empty {
  background: transparent;
  border-color: var(--border-default);
  opacity: 0.35;
}
.mcs-heatmap__cell--today {
  outline: 2px solid var(--signal-accent);
  outline-offset: 2px;
  animation: mcs-heatmap-pulse 2.4s ease-in-out infinite;
  z-index: 1;
}
@keyframes mcs-heatmap-pulse {
  0%, 100% { outline-color: var(--signal-accent); }
  50%      { outline-color: transparent; }
}
/* Date scale strip sitting directly under the heatmap grid. The center
 * arrow gives the at-a-glance "left = oldest, right = today" cue without
 * cluttering every cell. Month ticks appear when the window crosses a
 * month boundary. */
.mcs-heatmap__scale {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.mcs-heatmap__scale-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
}
.mcs-heatmap__scale-label--right { font-weight: var(--w-bold); }
.mcs-heatmap__scale-axis {
  position: relative;
  height: 18px;
  border-top: 1px solid var(--surface-divider);
}
.mcs-heatmap__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-panel);
  padding: 0 8px;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mcs-heatmap__month-tick {
  position: absolute;
  top: 100%;
  transform: translate(-50%, 2px);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

.mcs-heatmap__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 22px 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.mcs-heatmap__summary-counts { color: var(--text-primary); }
.mcs-heatmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.mcs-heatmap__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mcs-heatmap__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
@media (max-width: 640px) {
  .mcs-heatmap__grid { grid-template-columns: repeat(10, 1fr); }
}

/* ============================================================
 * Dominance trend chart — 3 indexed lines (BTC/ETH/XRP) showing
 * relative dominance trajectory. Sits under the XRP Dominance
 * widget bars. Grows daily as the dominance_daily table fills.
 * ============================================================ */
.dom-chart {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-divider);
}
.dom-chart__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.dom-chart__title { color: var(--text-primary); font-weight: var(--w-bold); }
.dom-chart__range { font-size: 10px; }
.dom-chart__svg {
  width: 100%;
  height: 120px;
  display: block;
}
.dom-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}
.dom-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dom-chart__legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* ============================================================
 * XRPL movers — gainers + losers 24h, two columns. Sits on
 * /xrpl-trustlines/ (and homepage if added).
 * ============================================================ */
.xrpl-movers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 4px;
}
@media (max-width: 640px) { .xrpl-movers { grid-template-columns: 1fr; } }
.xrpl-movers__heading {
  font-size: 13px;
  font-family: var(--font-display);
  margin: 0 0 10px;
  color: var(--text-muted);
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
}
.xrpl-movers__list { list-style: none; padding: 0; margin: 0; }
.xrpl-mover {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-divider);
}
.xrpl-mover:last-child { border-bottom: 0; }
.xrpl-mover__icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  flex: 0 0 auto;
  background: var(--surface-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.xrpl-mover__icon--placeholder {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.xrpl-mover__body { flex: 1 1 auto; min-width: 0; }
.xrpl-mover__body strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
}
.xrpl-mover__body small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.xrpl-mover__pct {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: 13px;
  flex: 0 0 auto;
}

/* Shared token icon — used by homepage trustline list, /xrpl-trustlines/
 * table, and elsewhere. Square, small, gracefully degrades to a dotted
 * placeholder when the issuer hasn't supplied a logo. */
.token-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex: 0 0 auto;
  object-fit: cover;
  background: var(--surface-bg);
  vertical-align: middle;
}
.token-icon--placeholder {
  border: 1px dashed var(--border-default);
  background: transparent;
}
.trustline-ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.token-row .token-icon { margin: 0 2px 0 4px; }

/* ============================================================
 * News article cards on /xrp-news-attention/. No scroll bar;
 * full grid flows naturally. Each card surfaces source +
 * relative time + title so the reader can scan at a glance.
 * ============================================================ */
.news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.news-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--surface-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
  min-height: 130px;
}
.news-card:hover {
  border-color: var(--signal-accent);
  transform: translateY(-2px);
}
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.news-card__source {
  color: var(--signal-accent);
  font-weight: var(--w-bold);
  text-transform: uppercase;
}
.news-card__age::before { content: "·"; margin-right: 8px; color: var(--text-muted); }
.news-card__title {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.4;
  font-weight: var(--w-bold);
  margin: 0;
  color: var(--text-primary);
}
.news-card__snippet {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.news-card:hover .news-card__cta { color: var(--signal-accent); }

/* ============================================================
 * Native <input type="date"> styling for the briefs archive
 * date jumper. Forces the dark-theme palette on the calendar
 * indicator (Chromium would otherwise paint a black icon on
 * dark bg) and gives the input a consistent look across browsers.
 * ============================================================ */
.brief-filter__input,
input.brief-filter__input {
  color-scheme: dark;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  min-width: 200px;
  padding: 10px 12px;
  background: var(--surface-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color 200ms ease;
}
.brief-filter__input:focus,
.brief-filter__input:hover {
  border-color: var(--signal-accent);
  outline: none;
}
.brief-filter__input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.7);
}
.brief-filter__input::-webkit-calendar-picker-indicator:hover { filter: invert(1); }
.brief-filter__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Modal-specific: live iframe preview tile. */
.xmc-embed-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px 0 8px;
  padding: 24px;
  background: var(--surface-bg);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
}
.xmc-embed-preview iframe {
  max-width: 100%;
}

/* ============================================================
 * Sticky "Post to r/XRP" button — stacks above the embed button.
 * Opens Reddit's compose form pre-filled with the brief's title
 * and URL. One click per day, no OAuth, no credentials.
 * ============================================================ */
.xmc-reddit-btn {
  position: fixed;
  bottom: 134px;
  right: 22px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease, border-color 200ms ease, color 200ms ease, background 200ms ease;
  backdrop-filter: blur(12px);
}
.xmc-reddit-btn:hover {
  transform: translateY(-2px);
  border-color: var(--border-focus);
  color: #ff4500; /* Reddit orange */
  background: var(--surface-elevated);
}
.xmc-reddit-btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: currentColor;
}
@media (max-width: 640px) {
  .xmc-reddit-btn__text { display: none; }
  .xmc-reddit-btn { padding: 12px; bottom: 126px; }
}

/* ============================================================
 * Footer badge — subtle "Powered by XRP donations" pill on every
 * public page. Passive funnel to /tip/. Sits below content,
 * doesn't interfere with floating buttons.
 * ============================================================ */
.xmc-footer-badge {
  margin: 48px auto 24px;
  padding: 0 24px 80px; /* bottom padding clears the floating buttons */
  display: flex;
  justify-content: center;
}
.xmc-footer-badge__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--surface-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 200ms ease;
}
.xmc-footer-badge__link:hover {
  color: var(--signal-accent);
  border-color: var(--signal-accent);
  background: var(--surface-panel);
}
.xmc-footer-badge__diamond {
  font-size: 14px;
  color: var(--signal-accent);
}