/* ─────────────────────────────────────────────────────────────
   Capraseo — backlinks & referring-domains pages
   Shared layout extras on top of health.css/account.css/main.css.
   Specifically: hero (chart + KPI tiles), link-type pills, country
   chips, and table cell helpers.
   ───────────────────────────────────────────────────────────── */

/* ── Briefing: LEDE + 3 action cards + collapsible appendix ──
   The page used to land on raw tables (Ahrefs/Semrush school). The
   briefing reframe leads with a one-paragraph LEDE + three action
   cards (Recover / Promote / Investigate) so a non-expert sees what
   to do next in 10 seconds. The original tables live in <details>
   collapsed below — pros open them when they want raw data. */
.briefing-lede {
  padding: 20px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lede-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lede-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #e8e8ea;
  letter-spacing: -0.005em;
}
.lede-health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
.lede-health-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted-2);
}
.lede-health[data-health="green"]   { background: rgba(99, 102, 241, 0.12);  color: #9fdcf3; }
.lede-health[data-health="green"]   .lede-health-dot   { background: #6366f1; }
.lede-health[data-health="amber"]   { background: rgba(230, 196, 122, 0.14); color: #e6c47a; }
.lede-health[data-health="amber"]   .lede-health-dot   { background: #e6c47a; }
.lede-health[data-health="red"]     { background: rgba(226, 75, 74, 0.14);   color: #f3a4a4; }
.lede-health[data-health="red"]     .lede-health-dot   { background: #e24b4a; }
.lede-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #d1d1d6;
  max-width: 78ch;
}
.lede-body strong { color: #f1f1f4; font-weight: 500; }

/* The 4 action cards */
.action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1400px) {
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .action-grid { grid-template-columns: 1fr; }
}
.action-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 60%, rgba(0,0,0,0.05));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 168px;
}
.action-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.action-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.action-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d1d1d6;
}
.action-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.action-recover    .action-dot { background: #e24b4a; }
.action-recover    .action-eyebrow { color: #f3a4a4; }
.action-promote    .action-dot { background: #6366f1; }
.action-promote    .action-eyebrow { color: #9fdcf3; }
.action-investigate .action-dot { background: #e6c47a; }
.action-investigate .action-eyebrow { color: #e6c47a; }
.action-acquired   .action-dot { background: #6366f1; }
.action-acquired   .action-eyebrow { color: #6cd9ee; }

.action-card-body { flex: 1 1 auto; font-size: 13px; color: #cfcfd5; min-width: 0; }
.action-card-body .action-empty {
  color: var(--muted-2);
  font-style: italic;
  font-size: 12.5px;
}
.action-card-body .action-headline {
  font-size: 14px;
  font-weight: 500;
  color: #e8e8ea;
  margin-bottom: 8px;
  line-height: 1.35;
}
.action-card-body ul.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.action-card-body ul.action-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
  color: #d1d1d6;
  min-width: 0;
}
/* Clickable rows: each item is wrapped in <a class="action-row-link">
   that participates in the existing two-column grid via
   display:contents, so the row layout is unchanged when the link is
   present. Hover lifts the whole row so it's obvious it's clickable. */
.action-card-body ul.action-list li:has(> a.action-row-link) {
  padding: 2px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  transition: background-color 120ms ease;
}
.action-card-body ul.action-list li:has(> a.action-row-link):hover {
  background: rgba(255, 255, 255, 0.045);
}
.action-card-body ul.action-list a.action-row-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.action-card-body ul.action-list a.action-row-link:hover .a-primary,
.action-card-body ul.action-list a.action-row-link:focus-visible .a-primary {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}
.action-card-body ul.action-list a.action-row-link:focus-visible {
  outline: none;
}
.action-card-body ul.action-list li:has(> a.action-row-link:focus-visible) {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}
.action-card-body ul.action-list .a-primary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-card-body ul.action-list .a-meta {
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  white-space: nowrap;
}
.action-card-body ul.action-list .a-anchor {
  display: block;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-card-foot {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.action-cta {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #e8e8ea;
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.action-cta:hover { background: rgba(255, 255, 255, 0.10); }
.action-cta.is-primary {
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(99, 102, 241, 0.32);
  color: #c2f0dc;
}
.action-cta.is-primary:hover { background: rgba(99, 102, 241, 0.24); }
.action-cta.is-danger {
  background: rgba(226, 75, 74, 0.14);
  border-color: rgba(226, 75, 74, 0.32);
  color: #f3a4a4;
}
.action-cta.is-danger:hover { background: rgba(226, 75, 74, 0.22); }
.action-foot-meta {
  font-size: 11px;
  color: var(--muted);
}

/* ── Ask-Capraseo-AI prompt card ─────────────────────────────
   Sits between the briefing action cards and the detail dashboard.
   Reuses the front-page composer's .chip/.dropdown/.menu styles
   (loaded via chat.css here). Layout intentionally mirrors a
   composer row so users recognise it as "this is where chat
   starts". */
.ai-prompt-card {
  /* No padding on the card itself — the avatar runs flush to the top,
     left and bottom edges. The .aip-body wrapper restores the inner
     padding for the text/controls. No own margins: every page stacks
     cards with the container's flex gap, which must stay uniform. */
  padding: 0;
  display: flex;
  /* Avatar on the left, the question/controls column on the right. */
  flex-direction: row;
  /* stretch → the avatar fills the full card height, no margins around it. */
  align-items: stretch;
  gap: 0;
  /* .card defaults to overflow:hidden which clips the model picker's
     absolutely-positioned .menu inside this card. */
  overflow: visible;
}
/* Transparent character cutout that fronts the Ask-AI card. Rendered as a
   background on a <div> (not an <img>) on purpose: a div has no intrinsic
   size, so the card height is driven by the text column — the avatar then
   stretches to match it instead of an <img>'s natural pixels blowing the
   card up. It sits flush to the top / left / bottom edges, left corners
   rounded to the card (14px), with a single divider rule on its right. */
.aip-avatar {
  /* Definite width + stretch height — NOT a height-driven square. The old
     rule made the avatar a square whose width tracked its stretched height
     (aspect-ratio 1/1). That is circular: the avatar's width sets the
     body's width, which sets the body's height, which the avatar stretches
     back to. The browser resolves that flex line to a too-short cross-size,
     so a tall body (e.g. the /content/ plays grid, or any narrow content
     column when the sidebar is open) overflows the card — and because we
     run overflow:visible for the model menu, it spills onto the card below.
     A definite width breaks the loop: the avatar is a fixed-width strip
     that cover-fills whatever height the body needs, so the body always
     drives the card height and never overflows. clamp() keeps it a sensible
     proportion of the card (min 150px on tight columns, ~square on wide
     desktop cards). Mobile (≤560px) overrides this to a full-width banner. */
  flex: 0 0 clamp(150px, 26%, 280px);
  align-self: stretch;
  height: auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 14px 0 0 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
/* The original card column (head + ask + controls + status) lives here so it
   can sit beside the avatar, and carries the inner padding now that the card
   itself has none. */
.aip-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 20px;
}
/* Narrow center column: stack the avatar above the content, full width, with
   the divider moving to the bottom edge. */
@media (max-width: 560px) {
  .ai-prompt-card { flex-direction: column; align-items: stretch; }
  .aip-avatar {
    width: 100%;
    height: 140px;
    border-radius: 14px 14px 0 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}
.aip-head { display: flex; flex-direction: column; gap: 4px; }
.aip-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #e8e8ea;
  letter-spacing: -0.005em;
}
.aip-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
/* Optional typed-question field — sits above the model/CTA row. */
.aip-ask { display: flex; }
.aip-question {
  flex: 1;
  appearance: none;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.aip-question::placeholder { color: #5a5a63; }
.aip-question:focus {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(255, 255, 255, 0.05);
}
.aip-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.aip-controls .dropdown { flex: 0 0 auto; }
/* Size the pickers to match the "Find answer" CTA next to them — the
   default composer chip (26px / 11.5px) reads as tiny beside the button —
   and give them a readable solid fill + full-strength label text. The
   faint composer chip (0.22 bg / 0.42 text) is right on the front page but
   illegible here, where these are primary controls beside the green CTA. */
.aip-controls .dropdown .chip {
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
  background: rgba(28, 28, 32, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
.aip-controls .dropdown .chip .chip-label { color: var(--text); }
.aip-controls .dropdown .chip:hover:not(.open),
.aip-controls .dropdown .chip.open {
  background: rgba(40, 40, 46, 0.95);
  border-color: rgba(255, 255, 255, 0.18);
}
/* Open the section menu UPWARD, like the model picker beside it. The AI
   card's entrance transform (.anim) makes it its own stacking context, so
   a downward menu gets trapped behind the later KPI/section cards it opens
   over — no z-index can lift it out. Opening upward over the (earlier,
   lower-painted) hero keeps the list on top and fully readable. */
.aip-controls .dropdown[data-dropdown="section"] .menu {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(4px);
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Fully opaque (no alpha, no backdrop blur) so nothing behind shows
     through — the shared frosted-glass menu reads fine over the dark
     composer but ghosts against the bright hero up here. */
  background: linear-gradient(180deg, #1e1e23, #141418);
  backdrop-filter: none;
}
.aip-controls .dropdown[data-dropdown="section"] .menu.open {
  transform: translateY(0);
}
/* Find-answer primary CTA — accent green, matches Capraseo brand. */
.aip-find-btn {
  appearance: none;
  border: 1px solid rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.18);
  color: #c2f0dc;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, filter 0.15s ease;
}
.aip-find-btn:hover:not([disabled]) {
  background: rgba(99, 102, 241, 0.28);
  filter: brightness(1.05);
}
.aip-find-btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}
.aip-btn-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #c2f0dc;
  animation: aip-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes aip-spin {
  to { transform: rotate(360deg); }
}
.aip-status {
  font-size: 12.5px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}
.aip-status[data-kind="error"] {
  background: rgba(226, 75, 74, 0.12);
  color: #f3a4a4;
}


/* ── Hero: big trend chart + KPI tiles to the right ────────── */
.links-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.links-hero::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
.links-hero::after {
  content: "";
  position: absolute;
  left: 28%;
  top: 50%;
  width: 700px;
  height: 460px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(99, 102, 241,0.07), transparent 70%);
  pointer-events: none;
}

.links-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(420px, 1fr);
  gap: 28px;
  padding: 24px 24px 22px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .links-hero-grid { grid-template-columns: 1fr; }
}

.links-hero-chart {
  display: flex;
  flex-direction: column;
}
.hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  color: rgba(232, 232, 234, 0.45);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hero-chart-wrap {
  flex: 1;
  min-height: 280px;
}

.links-hero-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch;
}
.links-hero-kpis.kpis-3x2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
/* Hero KPI tiles use the same .kpi-card recipe but flatter so they
   sit cleanly inside the hero card. */
.links-hero-kpis .kpi-card {
  padding: 14px 14px 0;
  background: linear-gradient(180deg, rgba(28,28,32,0.65), rgba(18,18,21,0.7));
}
.links-hero-kpis .kpi-spark { margin: 4px -14px 0; height: 40px; }
.links-hero-kpis .kpi-value { font-size: 22px; }

/* ── Link-type pills (Dofollow / Nofollow / UGC / Sponsored) ── */
.type-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.type-pill.dofollow  { color: #b8e6f5; background: rgba(99, 102, 241,0.10); border-color: rgba(99, 102, 241,0.22); }
.type-pill.nofollow  { color: #cfd0d6; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
.type-pill.ugc       { color: #f1d99a; background: rgba(230,196,122,0.08); border-color: rgba(230,196,122,0.22); }
.type-pill.sponsored { color: #ffc4c4; background: rgba(255,122,122,0.08); border-color: rgba(255,122,122,0.22); }
.type-pill.text      { color: #cfd0d6; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }

/* ── Source-page cell (favicon + url) ─────────────────────── */
.src-cell {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.src-cell .src-fav {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #f3f3f5;
  background: linear-gradient(135deg, #2f3742, #1d2129);
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.src-cell .src-meta { min-width: 0; }
.src-cell .src-domain {
  font-size: 13px;
  font-weight: 500;
  color: #e8e8ea;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.src-cell .src-path {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Clickable source cell — the whole favicon+url block opens the actual
   backlink in a new tab. Quiet by default, obvious on hover. */
a.src-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.src-link:hover .src-domain,
a.src-link:focus-visible .src-domain {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.src-link:hover .src-domain::after,
a.src-link:focus-visible .src-domain::after {
  content: ' ↗';
  text-decoration: none;
  color: var(--muted);
}
a.src-link:hover .src-fav { border-color: rgba(255,255,255,0.22); }

.anchor-cell {
  font-size: 12.5px;
  color: #d8d8de;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.anchor-cell.empty { color: var(--muted-2); font-style: italic; }

/* ── Country / flag chip ──────────────────────────────────── */
.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.country-chip .flag {
  font-size: 14px;
  line-height: 1;
}

/* ── Tables tweaks for these pages ────────────────────────── */
.tbl-bl tbody td,
.tbl-rd tbody td {
  vertical-align: middle;
}

.first-seen {
  font-size: 11.5px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Spam-score KPI color ─────────────────────────────────── */
.kpi-value.kpi-spam[data-spam-band="low"]  { color: #b8e6f5; }
.kpi-value.kpi-spam[data-spam-band="mid"]  { color: #f1d99a; }
.kpi-value.kpi-spam[data-spam-band="high"] { color: #ffc4c4; }

/* ── Last-updated indicator ───────────────────────────────── */
.last-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
}
.last-updated .lu-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241,0.18);
}
.last-updated.is-stale .lu-dot { background: #e6c47a; box-shadow: 0 0 0 3px rgba(230,196,122,0.18); }
.last-updated.is-loading .lu-dot { background: #8a8a92; box-shadow: 0 0 0 3px rgba(255,255,255,0.08); animation: lu-pulse 1.1s ease-in-out infinite; }
@keyframes lu-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.last-updated .lu-refresh {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 120ms, color 120ms, transform 200ms;
}
.last-updated .lu-refresh:hover { background: rgba(255,255,255,0.04); color: #e8e8ea; }
.last-updated.is-loading .lu-refresh svg { animation: lu-spin 0.9s linear infinite; }
/* Gated (locked / out of tokens) — no disabled style existed for .lu-refresh. */
.last-updated .lu-refresh:disabled,
.last-updated .lu-refresh.is-gated,
.last-updated .lu-refresh.is-gated:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  color: var(--muted);
}
.last-updated.is-empty .lu-dot { background: #8a8a92; box-shadow: none; }
@keyframes lu-spin { to { transform: rotate(360deg); } }

/* ── Country / TLD strip under hero ───────────────────────── */
.geo-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 0 24px 18px;
  font-size: 12px;
  color: var(--muted);
}
.geo-strip .geo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.geo-strip .geo-chip .flag { font-size: 13px; line-height: 1; }
.geo-strip .geo-chip strong {
  color: #e8e8ea;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.geo-strip .geo-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.06);
  margin: 2px 4px;
}

/* ── Toxicity dial wrap (in composition section) ──────────── */
.toxicity-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.toxicity-wrap .chart-wrap { width: 100%; min-height: 260px; }
.toxicity-legend {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px 18px;
  font-size: 11.5px;
  color: var(--muted);
  padding-bottom: 8px;
}
.tox-row { display: inline-flex; align-items: center; gap: 6px; }
.tox-swatch {
  width: 9px; height: 9px; border-radius: 2px;
  display: inline-block;
}
.tox-swatch.low  { background: #6366f1; }
.tox-swatch.mid  { background: #e6c47a; }
.tox-swatch.high { background: #ff7a7a; }

/* ── Anchor table (under chart) ───────────────────────────── */
.tbl-anchors tbody td,
.tbl-pages tbody td { vertical-align: middle; }
/* Center the numeric columns — Ref. domains (2), Backlinks (3),
   Dofollow (5). The "% of total" column (4) keeps its left-aligned
   bar+value cell. Scoped by position so the shared .col-tight class
   isn't disturbed on other tables. */
.tbl-anchors thead th:nth-child(2),
.tbl-anchors thead th:nth-child(3),
.tbl-anchors thead th:nth-child(5),
.tbl-anchors tbody td:nth-child(2),
.tbl-anchors tbody td:nth-child(3),
.tbl-anchors tbody td:nth-child(5) { text-align: center; }
.tbl-anchors .anchor-text {
  font-size: 13px;
  color: #e8e8ea;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.tbl-anchors .anchor-text.empty { color: var(--muted-2); font-style: italic; }
.tbl-anchors .pct-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.tbl-anchors .pct-bar {
  width: 56px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.tbl-anchors .pct-bar > span {
  position: absolute; inset: 0;
  width: var(--w, 0%);
  background: #6366f1;
  border-radius: 999px;
}

/* ── Anchor classification badges + spam toggle bar ──────── */
/* Brand / spam markers live alongside the anchor text. We keep them
   subtle for brand (informational) and conspicuous for spam (red),
   because seeing the spam tag is what makes the report trustworthy to
   a reader who'd otherwise wonder why we'd surface PBN ad copy as a
   "top anchor". */
.anchor-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.anchor-badge-brand {
  color: #9aa1ad;
  background: rgba(255, 255, 255, 0.06);
}
.anchor-badge-spam {
  color: #fff;
  background: rgba(226, 75, 74, 0.85);
}
/* Spam rows get a conspicuous red left bar + tinted background so a
   non-expert can tell at a glance which anchors are the flagged spam
   (the small badge alone reads as decoration; the bar reads as a
   warning). We tint rather than dim — dimming made spam look *less*
   important, the opposite of the intent. */
.tbl-anchors tr.is-spam td { background: rgba(226, 75, 74, 0.07); }
.tbl-anchors tr.is-spam td:first-child {
  box-shadow: inset 3px 0 0 0 #e24b4a;
}
.tbl-anchors tr.is-spam .anchor-text { color: #d8b3b3; }
.tbl-anchors tr.is-spam:hover td { background: rgba(226, 75, 74, 0.12); }

/* "See the actual link" expander on spam rows — reveals the real
   source URLs so the user can open and disavow them. */
.anchor-src-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 1px 8px;
  border: 1px solid rgba(226, 75, 74, 0.45);
  border-radius: 999px;
  background: rgba(226, 75, 74, 0.10);
  color: #e79a9a;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
}
.anchor-src-toggle:hover { background: rgba(226, 75, 74, 0.18); color: #f2b4b4; }
.anchor-src-toggle .asrc-caret { font-size: 9px; transition: transform 0.15s ease; }
.anchor-src-toggle.is-open .asrc-caret { transform: rotate(180deg); }
/* Neutral variant for real (non-spam) anchors — these are assets, not
   warnings, so drop the red and use a quiet outline. */
.anchor-src-toggle.is-neutral {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}
.anchor-src-toggle.is-neutral:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #e8e8ea;
}
.tbl-anchors tr.anchor-src-detail.is-neutral td {
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 3px 0 0 0 rgba(255, 255, 255, 0.22);
}
.tbl-anchors tr.anchor-src-detail.is-neutral .anchor-src-note strong { color: #e8e8ea; }

.tbl-anchors tr.anchor-src-detail td {
  padding: 0;
  background: rgba(226, 75, 74, 0.05);
  box-shadow: inset 3px 0 0 0 #e24b4a;
}
.tbl-anchors tr.anchor-src-detail > td { padding: 12px 14px 14px; }
.anchor-src-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 10px;
  max-width: 640px;
}
.anchor-src-note strong { color: #e79a9a; }
.anchor-src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.anchor-src-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 8px;
  border-radius: 6px;
}
.anchor-src-list li:hover { background: rgba(255, 255, 255, 0.04); }
.anchor-src-list a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  text-decoration: none;
}
.anchor-src-list a:hover .asrc-url { text-decoration: underline; }
.asrc-domain { font-size: 12.5px; font-weight: 600; color: #e8e8ea; }
.asrc-url {
  font-size: 11.5px;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.asrc-date {
  font-size: 11px;
  color: var(--muted-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.anchor-src-more {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0 0 8px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.anchor-src-more:hover { background: rgba(255, 255, 255, 0.09); color: #e8e8ea; }
.anchor-src-more .asrc-caret { font-size: 9px; }
.anchor-src-more-meta { font-size: 11px; color: var(--muted-2); margin-top: 10px; padding-left: 8px; }
.anchor-src-empty {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 640px;
}
.anchor-src-empty em { color: #e79a9a; font-style: normal; font-weight: 600; }

/* Spam summary chip in the card-head + inline reveal bar. */
.anchor-spam-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #d8a0a0;
  background: rgba(226, 75, 74, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.anchor-spam-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  color: var(--muted);
}
.anchor-spam-bar-text { line-height: 1.3; }
.anchor-spam-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e8e8ea;
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.anchor-spam-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.anchor-spam-toggle[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ── Pages table ──────────────────────────────────────────── */
.tbl-pages .page-cell {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tbl-pages .page-cell .page-fav {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  color: #f3f3f5;
  background: linear-gradient(135deg, #2f3742, #1d2129);
  border: 1px solid rgba(255,255,255,0.06);
}
.tbl-pages .page-url {
  font-size: 13px;
  color: #e8e8ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

/* ── Mode toggle (One per domain / All links) ─────────────── */
.mode-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  gap: 2px;
}
.mode-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 11.5px/1 'Inter', sans-serif;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.mode-toggle button.active {
  background: rgba(99, 102, 241,0.12);
  color: #b8e6f5;
}
.mode-toggle button:not(.active):hover { color: #e8e8ea; }

/* ── Filter bar (Status / Toxicity / Type) ───────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 12px 18px 6px;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin: 0 -18px 0;
  background: rgba(255,255,255,0.012);
}
.filter-group { display: inline-flex; align-items: center; gap: 8px; }
.filter-label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Sortable table headers ──────────────────────────────── */
.tbl thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.tbl thead th.sortable:hover { color: #e8e8ea; }
.tbl thead th.sortable .sort-ind {
  display: inline-block;
  margin-left: 4px;
  width: 8px;
  opacity: 0.35;
}
.tbl thead th.sortable[data-dir="asc"]  .sort-ind::before { content: "▲"; opacity: 1; font-size: 9px; }
.tbl thead th.sortable[data-dir="desc"] .sort-ind::before { content: "▼"; opacity: 1; font-size: 9px; }

/* ── New columns: spam pill + last-seen ──────────────────── */
.spam-pill {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.spam-pill.low  { color: #b8e6f5; background: rgba(99, 102, 241,0.10); border-color: rgba(99, 102, 241,0.22); }
.spam-pill.mid  { color: #f1d99a; background: rgba(230,196,122,0.08); border-color: rgba(230,196,122,0.22); }
.spam-pill.high { color: #ffc4c4; background: rgba(255,122,122,0.08); border-color: rgba(255,122,122,0.22); }

.last-seen {
  font-size: 11.5px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
tr.is-lost .last-seen { color: #ffc4c4; }

/* ── Table footer (Load more) ─────────────────────────────── */
.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px 4px;
}
.foot-meta {
  font-size: 11.5px;
  color: var(--muted-2);
}

/* ── Empty + loading states ───────────────────────────────── */
.empty-row td {
  text-align: center;
  color: var(--muted);
  padding: 28px 12px;
  font-size: 13px;
}
.empty-row .empty-title {
  display: block;
  color: #e8e8ea;
  font-weight: 500;
  margin-bottom: 4px;
}
.empty-row .empty-sub {
  display: block;
  font-size: 12px;
  color: var(--muted-2);
}

.skeleton-block {
  background: linear-gradient(90deg, rgba(255,255,255,0.025), rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: 8px;
  min-height: 100%;
}
.skeleton-row td {
  padding: 14px 12px;
}
.skeleton-row .skel-bar {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.025), rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
}
@keyframes skel {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}
.is-loading .chart-wrap > * { opacity: 0.0; }
.is-loading .chart-wrap { position: relative; }
.is-loading .chart-wrap::after {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.025), rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
}

/* ── Referring-domains table: search box ──────────────────── */
.rd-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  min-width: 240px;
  transition: border-color 160ms ease;
}
.rd-search:focus-within { border-color: rgba(255,255,255,0.20); }
.rd-search svg { color: var(--muted-2); flex-shrink: 0; }
.rd-search input {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  width: 100%;
  outline: none;
}
.rd-search input::placeholder { color: var(--muted-2); }
.rd-search input::-webkit-search-cancel-button { filter: invert(0.6); cursor: pointer; }

/* ── Referring-domains table: real favicons ───────────────── */
/* The letter chip (.src-fav text) stays as the fallback; the favicon
   sits on top and is removed by JS if it fails to load, revealing the
   letter. Scoped to .tbl-rd so the bare letter chips on the backlinks
   / competitor pages are untouched. */
.tbl-rd .src-cell .src-fav { position: relative; overflow: hidden; }
.tbl-rd .src-cell .src-fav .rd-fav-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* ── Referring-domains table: expandable rows ─────────────── */
.tbl-rd tbody tr.rd-row { cursor: pointer; }
.tbl-rd tbody tr.rd-row:hover { background: rgba(255,255,255,0.025); }
/* The base .src-cell grid is `18px 1fr` (favicon + text). This table
   adds an expand caret as a third child, so it needs a third column —
   otherwise the favicon takes the 1fr and the domain name collapses
   into an undefined implicit column and can't be read. */
.tbl-rd .src-cell { grid-template-columns: auto 18px 1fr; }
/* Domain + inline status badge on one line: the name ellipsizes,
   the "Lost" pill stays visible. */
.tbl-rd .src-cell .src-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tbl-rd .src-cell .src-domain { min-width: 0; }
.tbl-rd .rd-row-flag {
  flex-shrink: 0;
  height: 17px;
  padding: 0 7px;
  font-size: 10px;
}
.tbl-rd .rd-caret {
  display: inline-block;
  width: 11px;
  color: var(--muted-2);
  font-size: 8px;
  transition: transform 140ms ease;
}
.tbl-rd tr.is-open .rd-caret { transform: rotate(90deg); color: var(--text); }
.tbl-rd tr.is-open { background: rgba(255,255,255,0.03); }
.tbl-rd tr.is-lost .src-domain { color: #ffc4c4; }

/* ── "All referring domains" — section layout polish ──────── */
/* .section-card has no padding, and the shared .filter-bar / .table-foot
   use negative-margin bleeds tuned for a padded parent — here that left
   "Status" at 18px, the cells at 16px and "Load more" at 4px, all
   cramped and misaligned. Scope a single consistent 20px inset (matching
   .card-head) so the filter row, the columns and the footer line up and
   breathe. Scoped to this section only — the backlinks table is untouched. */
[data-section="all_domains"] .filter-bar,
[data-section="top_backlinks"] .filter-bar {
  margin: 0;
  padding: 14px 20px;
}
[data-section="all_domains"] .table-foot,
[data-section="top_backlinks"] .table-foot {
  margin: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

/* Filter buttons that map to zero rows in the cached sample render
   muted + unclickable. The tooltip carries the explanation so the
   user knows it isn't a bug — these types just aren't in the top-N
   sample we cache. */
.toggle-pill button.is-empty {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto; /* keep tooltip + aria-disabled discoverable */
}
.toggle-pill button.is-empty:hover {
  background: transparent;
  color: inherit;
}

.tbl-rd tr.rd-detail > td { padding: 0; }
.rd-detail-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 28px;
  padding: 14px 18px 18px 42px;
  background: rgba(255,255,255,0.015);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
/* The expanded detail repeats the domain as a heading. Hidden on desktop —
   the row already shows it — but on mobile the row collapses to just the
   favicon, so the detail is where the full domain becomes readable. */
.rd-detail-dom { display: none; }
.rd-fact { display: flex; flex-direction: column; gap: 4px; }
.rd-fact-k {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.rd-fact-v {
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rd-flags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rd-flag {
  display: inline-grid;
  place-items: center;
  height: 19px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  border: 1px solid transparent;
}
.rd-flag.live { color: #b8e6f5; background: rgba(99, 102, 241,0.10);  border-color: rgba(99, 102, 241,0.22); }
.rd-flag.new  { color: #9ad7ff; background: rgba(56,160,255,0.10); border-color: rgba(56,160,255,0.22); }
.rd-flag.lost { color: #ffc4c4; background: rgba(255,122,122,0.08); border-color: rgba(255,122,122,0.22); }

/* ── Mode-toggle / filter-bar responsive ──────────────────── */
@media (max-width: 720px) {
  .filter-bar { gap: 10px 16px; }
  .links-hero-kpis.kpis-3x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-search { min-width: 0; width: 100%; }
}
/* Phone: single-column KPI strips and full-width charts. */
@media (max-width: 600px) {
  .action-grid,
  .links-hero-kpis,
  .links-hero-kpis.kpis-3x2 { grid-template-columns: 1fr; }
  .links-hero-chart { max-width: 100%; }
}

/* Phone: the "All referring domains" table's first column collapses to just
   the favicon/letter chip (the domain name never fit beside the DR / backlinks
   / country columns). The full domain moves into the expandable row detail. */
@media (max-width: 768px) {
  /* caret + favicon only — meta shrinks to content (empty on live rows, just
     the "Lost" chip on lost ones) so the data columns get the width back. */
  .tbl-rd .src-cell { grid-template-columns: auto 18px auto; gap: 8px; }
  .tbl-rd .src-cell .src-domain { display: none; }

  /* Reveal the domain heading inside the opened detail. */
  .rd-detail-dom {
    display: block;
    grid-column: 1 / -1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
    margin-bottom: 2px;
  }
  .tbl-rd tr.is-lost .rd-detail-dom { color: #ffc4c4; }
  /* The big left indent existed to align facts under the row's domain text,
     which is now gone — pull it back so the detail uses the full width. */
  .rd-detail-inner { padding: 14px 16px 16px; }
}

/* ── Opportunities: "Links your competitors have that you can buy" ──
   The buyable-competitor-links card on /backlinks/. Compact list of
   marketplace picks; rendered by js/backlinks-opportunities.js. */
.blo-card .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* Match the .card-head 20px horizontal inset so rows line up under the
   headline; small vertical breathing room top/bottom of the list. */
.blo-body { padding: 6px 20px 10px; }
.blo-loading { color: var(--muted); font-size: 13px; padding: 12px 0; }

.blo-list { display: flex; flex-direction: column; }
/* Flush list rows, not nested cards. Text aligns to the body's 20px inset
   (padding 0 sides); the negative margin lets the hover tint + divider go
   full-bleed to the card edge without shifting the text. */
.blo-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 20px; margin: 0 -20px;
  text-decoration: none; color: inherit;
  transition: background .12s ease;
}
.blo-row + .blo-row { border-top: 1px solid var(--line); }
.blo-row:hover { background: rgba(255,255,255,0.025); }

.blo-row-main { min-width: 0; }
.blo-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blo-site { font-weight: 600; font-size: 14px; color: var(--text); word-break: break-all; }

.blo-pill {
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.blo-rel-high { color: #7ee0b8; background: rgba(46,204,140,0.12); border: 1px solid rgba(46,204,140,0.24); }
.blo-rel-some { color: var(--accent-bright); background: var(--accent-faint); border: 1px solid rgba(99,102,241,0.24); }

.blo-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.blo-sep { color: var(--muted-2); }

/* Which competitors this site links to — one chip each. */
.blo-comps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.blo-comps-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted-2); }
.blo-comps-label svg { opacity: .7; }
.blo-comp-chip {
  font-size: 12px; font-weight: 500; color: #c8c9e6;
  background: var(--accent-faint); border: 1px solid rgba(99,102,241,0.22);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}

.blo-row-end { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.blo-price { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.blo-view { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: var(--accent-bright); white-space: nowrap; }

.blo-nudge { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 10px; flex-wrap: wrap; }
.blo-nudge p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 46ch; }
.blo-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }

@media (max-width: 600px) {
  .blo-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .blo-row-end { justify-content: space-between; }
}