/* /radar/: the newest scam, hack and AI stories. A white list on paper, the top story bigger, a coloured pill
   for the kind of story, our plain line in big type and the sources underneath. Mobile first. */
.rd-hero { padding-bottom: 22px; gap: 14px; }
.rd-hero h1 { font-size: clamp(30px, calc((100vw - 40px) / 9.03), 104px); }   /* HAPPENING RIGHT NOW. is 8.72em in Anton */
.rd-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: -6px; font-size: 15px; color: var(--ink); }
.lobby-hero .rd-stamp { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--muted); }

.rd-wrap { max-width: 860px; margin: 0 auto; padding: 0 16px 40px; }
.rd-tabs { display: flex; gap: 6px; padding: 5px; margin: 0 0 14px; border-radius: 999px; background: var(--paper); width: max-content; max-width: 100%; overflow-x: auto; }
.rd-tab { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 700 15px/1 var(--body); cursor: pointer; white-space: nowrap; }
.rd-tab[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.rd-tab:not([aria-pressed="true"]):hover { background: #ECEAE4; }

.rd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-story { background: var(--white); border: 2px solid #E3E3E1; border-radius: 20px; padding: 16px 16px 15px; scroll-margin-top: 90px; transition: border-color .3s ease; }
.rd-story.is-top { border-color: var(--ink); }
.rd-story.is-picked { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(240, 100, 74, .18); }
.rd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.rd-kind { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; color: var(--ink); background: var(--line); }
.rd-kind.is-scam { background: var(--coral); }
.rd-kind.is-hack { background: var(--blue); }
.rd-kind.is-ai { background: var(--violet); }
.rd-count, .rd-talk { color: var(--ink); }
.rd-talk { text-decoration: none; }
a.rd-talk:hover { text-decoration: underline; text-underline-offset: 3px; }
.rd-line { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.rd-story.is-top .rd-line { font-size: clamp(22px, 5.6vw, 28px); line-height: 1.25; }
.rd-from { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rd-from a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(21, 24, 29, .3); }
.rd-from a:hover { text-decoration-color: var(--ink); }
.rd-empty { padding: 28px 18px; text-align: center; color: var(--muted); font-weight: 600; background: var(--paper); border-radius: 20px; }
.rd-note { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

@media (min-width: 641px) {
  .rd-wrap { padding: 0 20px 48px; }
  .rd-story { padding: 20px 24px 19px; border-radius: 24px; }
  .rd-line { font-size: 21px; }
}