/* Payment Radar Roundups
   Dark theme to match /payment-radar (navy #0e1424 + cyan #079bd7 + teal #14d4c7)
   .prr-* = index (/payment-radar/roundups)
   .prd-* = detail (/payment-radar/roundup/:period/:key)
   */

/* ============================================================
   Shared tokens — theme-aware (site toggles [data-theme=light|dark] on <html>)
   Defaults below = LIGHT mode.  Dark overrides in the block that follows.
   ============================================================ */
.prr-shell, .prd-shell {
  /* Light-mode palette (matches site header/body: white bg, near-black ink) */
  --prr-navy:      #ffffff;   /* page bg */
  --prr-navy-2:    #f5f6f6;   /* subtle band */
  --prr-panel:     #f5f6f6;   /* card bg (matches site .card in light) */
  --prr-panel-2:   #eef0f2;   /* hover / inner-card */
  --prr-line:      rgba(0,0,0,.12);
  --prr-line-soft: rgba(0,0,0,.08);
  --prr-ink:       #1a1a1a;   /* primary text */
  --prr-ink-2:     #3a3f47;   /* secondary text */
  --prr-muted:     #6b7280;   /* muted / meta */
  --prr-cyan:      #079bd7;
  --prr-cyan-2:    #0286bb;   /* darker cyan for legibility on white */
  --prr-teal:      #0aa89e;   /* darker teal for legibility on white */
  --prr-teal-glow: rgba(20, 212, 199, 0.12);
  --prr-red:       #d43552;
  --prr-hero-a:    rgba(7,155,215,.10);
  --prr-hero-b:    rgba(20,212,199,.06);
  min-height: 60vh;
  color: var(--prr-ink);
  background: var(--prr-navy);
  font-family: Montserrat, "Avenir Next", Avenir, Arial, sans-serif;
  color-scheme: light;
}

/* DARK-mode overrides — activate when the site theme toggle sets data-theme=dark */
html[data-theme="dark"] .prr-shell,
html[data-theme="dark"] .prd-shell {
  --prr-navy:      #202430;   /* body bg used by site in dark */
  --prr-navy-2:    #131d33;
  --prr-panel:     #2e3346;   /* card bg used by site in dark */
  --prr-panel-2:   #1d2a44;
  --prr-line:      rgba(255,255,255,.12);
  --prr-line-soft: rgba(255,255,255,.08);
  --prr-ink:       #f5f6f6;
  --prr-ink-2:     #b9c5d4;
  --prr-muted:     #8695ab;
  --prr-cyan:      #079bd7;
  --prr-cyan-2:    #14b7ee;
  --prr-teal:      #14d4c7;
  --prr-teal-glow: rgba(20, 212, 199, 0.14);
  --prr-red:       #ff3355;
  --prr-hero-a:    rgba(7,155,215,.24);
  --prr-hero-b:    rgba(20,212,199,.10);
  color-scheme: dark;
}

/* Hide any element with the `hidden` attribute even when a component rule sets display */
.prr-shell [hidden], .prd-shell [hidden] { display: none !important; }

/* ============================================================
   INDEX PAGE  (.prr-*)
   /payment-radar/roundups
   ============================================================ */
.prr-hero {
  padding: 68px max(24px, calc((100vw - 1180px) / 2)) 44px;
  background:
    radial-gradient(circle at 82% 18%, var(--prr-hero-a), transparent 34%),
    radial-gradient(circle at 12% 82%, var(--prr-hero-b), transparent 42%),
    var(--prr-navy);
  border-bottom: 1px solid var(--prr-line-soft);
}
.prr-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--prr-muted);
  font-size: 13px;
  font-weight: 700;
}
.prr-crumb a { color: var(--prr-cyan-2); text-decoration: none; }
.prr-crumb a:hover { text-decoration: underline; }
.prr-crumb span { color: var(--prr-muted); }
.prr-kicker {
  margin: 0 0 12px;
  color: var(--prr-teal);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.prr-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--prr-ink);
}
.prr-lead {
  max-width: 640px;
  margin: 0;
  color: var(--prr-ink-2);
  font-size: 17px;
  line-height: 1.55;
}
.prr-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 90px;
}
.prr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
  padding: 6px;
  background: var(--prr-panel);
  border: 1px solid var(--prr-line);
  border-radius: 999px;
  width: fit-content;
}
.prr-tabs button {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--prr-ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: .18s;
}
.prr-tabs button:hover { color: var(--prr-ink); }
.prr-tabs button.active {
  background: var(--prr-cyan);
  color: var(--prr-ink);
  box-shadow: 0 4px 14px rgba(7,155,215,.35);
}
.prr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.prr-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--prr-line);
  border-radius: 18px;
  background: linear-gradient(160deg, var(--prr-panel), var(--prr-panel-2));
  color: var(--prr-ink);
  text-decoration: none;
  transition: .18s;
}
.prr-card:hover {
  transform: translateY(-3px);
  border-color: var(--prr-cyan);
  box-shadow: 0 20px 46px rgba(7,20,42,.55), 0 0 0 1px rgba(7,155,215,.25);
}
.prr-card-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--prr-teal);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.prr-card-title {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.2;
  color: var(--prr-ink);
  font-weight: 800;
}
.prr-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--prr-line-soft);
  color: var(--prr-muted);
  font-size: 13px;
  font-weight: 600;
}
.prr-card-count {
  color: var(--prr-cyan-2);
  font-weight: 800;
}
.prr-empty, .prr-loading {
  padding: 42px;
  border: 1px dashed var(--prr-line);
  border-radius: 18px;
  background: var(--prr-panel);
  text-align: center;
  color: var(--prr-muted);
}
.prr-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.prr-pager button {
  padding: 10px 20px;
  border: 1px solid var(--prr-line);
  border-radius: 10px;
  background: var(--prr-panel);
  color: var(--prr-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: .18s;
}
.prr-pager button:hover:not(:disabled) {
  border-color: var(--prr-cyan);
  background: var(--prr-panel-2);
}
.prr-pager button:disabled { opacity: .35; cursor: not-allowed; }
.prr-page-info { color: var(--prr-muted); font-size: 13px; font-weight: 700; }

/* ============================================================
   DETAIL PAGE  (.prd-*)
   /payment-radar/roundup/:period/:period_key
   ============================================================ */
.prd-hero {
  padding: 60px max(24px, calc((100vw - 1180px) / 2)) 44px;
  background:
    radial-gradient(circle at 78% 22%, var(--prr-hero-a), transparent 32%),
    radial-gradient(circle at 10% 88%, var(--prr-hero-b), transparent 45%),
    var(--prr-navy);
  border-bottom: 1px solid var(--prr-line-soft);
}
.prd-hero-inner { max-width: 1180px; margin: 0 auto; }
.prd-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  color: var(--prr-muted);
  font-size: 13px;
  font-weight: 700;
}
.prd-crumb a { color: var(--prr-cyan-2); text-decoration: none; }
.prd-crumb a:hover { text-decoration: underline; }
.prd-crumb span { color: var(--prr-muted); }

.prd-kicker {
  margin: 0 0 14px;
  color: var(--prr-teal);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.prd-title {
  margin: 0 0 20px;
  font-size: clamp(34px, 4.8vw, 54px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--prr-ink);
  max-width: 900px;
}
.prd-dek {
  max-width: 780px;
  margin: 0 0 26px;
  color: var(--prr-ink-2);
  font-size: 18px;
  line-height: 1.55;
}
.prd-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.prd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--prr-ink-2);
  font-size: 13px;
  font-weight: 700;
}
.prd-meta > * {
  display: inline-flex;
  align-items: center;
}
.prd-meta > * + *::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 16px;
  border-radius: 50%;
  background: var(--prr-muted);
  opacity: .6;
}
.prd-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prd-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  transition: .18s;
  cursor: pointer;
  border: 1px solid transparent;
}
.prd-btn-ghost {
  color: var(--prr-ink);
  border-color: var(--prr-line);
  background: transparent;
}
.prd-btn-ghost:hover {
  border-color: var(--prr-cyan);
  color: var(--prr-ink);
  background: rgba(7,155,215,.14);
}
.prd-btn-primary {
  color: var(--prr-ink);
  background: var(--prr-cyan);
  box-shadow: 0 6px 18px rgba(7,155,215,.4);
}
.prd-btn-primary:hover { background: var(--prr-cyan-2); }

.prd-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 90px;
}

/* Period switcher / edition nav bar */
.prd-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 30px;
  padding: 14px 18px;
  border: 1px solid var(--prr-line);
  border-radius: 16px;
  background: var(--prr-panel);
}
.prd-switch-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prd-nav-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--prr-line);
  background: var(--prr-panel-2);
  color: var(--prr-ink);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: .18s;
}
.prd-nav-btn:hover {
  border-color: var(--prr-cyan);
  background: var(--prr-cyan);
  color: var(--prr-ink);
}
.prd-nav-btn.disabled { opacity: .3; pointer-events: none; }
.prd-switch-current {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 18px;
  min-width: 200px;
}
.prd-switch-label {
  color: var(--prr-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.prd-switch-key {
  color: var(--prr-ink);
  font-size: 15px;
  font-weight: 800;
}
.prd-switch-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--prr-panel-2);
  border-radius: 999px;
  border: 1px solid var(--prr-line-soft);
}
.prd-tab {
  padding: 7px 16px;
  border-radius: 999px;
  color: var(--prr-ink-2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  transition: .18s;
}
.prd-tab:hover { color: var(--prr-ink); }
.prd-tab.active {
  background: var(--prr-cyan);
  color: var(--prr-ink);
  box-shadow: 0 3px 10px rgba(7,155,215,.35);
}

/* ---------- Editor's Letter (2026-09-07) ---------- */
/* Replaces the compact editor note. The intro block is now a full-width
   "editor's letter" that reads like the top of an editorial page: kicker,
   decorative rule with an SVG signal mark, dated dateline, then two
   paragraphs of body prose with a subtle drop cap on the first paragraph. */
.prd-intro {
  margin: 8px 0 40px;
  color: var(--prr-ink);
}
.prd-intro:not(.prd-letter) {
  /* Legacy fallback if the letter wrapper isn't present */
  padding: 18px 22px;
  border-left: 3px solid var(--prr-teal);
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(90deg, var(--prr-teal-glow), transparent 40%);
  font-size: 15px;
  line-height: 1.55;
}
.prd-intro:not(.prd-letter) p { margin: 0 0 10px; }
.prd-intro:not(.prd-letter) p:last-child { margin: 0; }

.prd-letter {
  position: relative;
  padding: 32px 34px 34px;
  border: 1px solid var(--prr-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% -10%, var(--prr-teal-glow), transparent 40%),
    linear-gradient(180deg, var(--prr-panel-2), var(--prr-panel));
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 20px 40px -30px rgba(7,155,215,.35);
}
.prd-letter::before {
  /* Thin accent bar on the leading edge — like a masthead rule */
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--prr-cyan), var(--prr-teal));
}
.prd-letter-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--prr-line-soft);
  color: var(--prr-teal);
}
.prd-letter-kicker {
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--prr-teal);
}
.prd-letter-mark {
  width: 44px;
  height: 12px;
  color: var(--prr-cyan-2);
  opacity: .85;
  flex-shrink: 0;
}
.prd-letter-date {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--prr-ink-2);
}
.prd-letter-body {
  color: var(--prr-ink);
  font-size: 17.5px;
  line-height: 1.62;
  max-width: 68ch;
}
.prd-letter-body p {
  margin: 0 0 16px;
}
.prd-letter-body p:last-child { margin: 0; }

/* Interim note (period still in progress) — added 2026-09-08.
   A drop cap on a "we're still working on it" notice reads as a mistake, so the
   editorial flourish is reserved for the real letter. */
.prd-letter-body.is-interim p:first-child::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.prd-letter-body.is-interim {
  font-size: 16.5px;
  color: var(--prr-ink-2);
}
.prd-letter-interim .prd-letter-kicker { color: var(--prr-ink-2); }
.prd-letter-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--prr-cyan-2);
}
.prd-letter-cta:hover { text-decoration: underline; }
.prd-letter-body p:first-child::first-letter {
  /* Drop cap on paragraph one, editorial-magazine style */
  float: left;
  font-size: 3.6em;
  line-height: .92;
  padding: 4px 12px 0 0;
  color: var(--prr-cyan-2);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Section label above the story list, once the letter is present */
.prd-letter + .prd-items-heading,
.prd-intro + .prd-items-heading {
  display: block;
  margin: 4px 0 14px;
  padding: 0;
  color: var(--prr-ink-2);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .19em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .prd-letter { padding: 24px 22px 26px; border-radius: 16px; }
  .prd-letter-head { gap: 10px; margin-bottom: 16px; padding-bottom: 12px; }
  .prd-letter-mark { width: 32px; height: 10px; }
  .prd-letter-body { font-size: 16px; line-height: 1.6; }
  .prd-letter-body p:first-child::first-letter {
    font-size: 3em;
    padding-right: 8px;
  }
}

/* Numbered story rows */
.prd-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prd-item {
  display: grid;
  grid-template-columns: 56px 1fr 160px;
  gap: 22px;
  align-items: start;
  padding: 22px 22px 22px 18px;
  border: 1px solid var(--prr-line);
  border-radius: 16px;
  background: var(--prr-panel);
  transition: .18s;
}
.prd-item:hover {
  border-color: var(--prr-cyan);
  background: var(--prr-panel-2);
}
.prd-item-num {
  display: grid;
  place-items: center;
  color: var(--prr-cyan-2);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.prd-item-body { min-width: 0; }
.prd-item-title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--prr-ink);
  font-weight: 800;
}
.prd-item-title a {
  color: inherit;
  text-decoration: none;
}
.prd-item-title a:hover { color: var(--prr-cyan-2); }
.prd-item-dek {
  margin: 0 0 12px;
  color: var(--prr-ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.prd-item-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  color: var(--prr-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.prd-item-tags > * { display: inline-flex; align-items: center; }
.prd-item-tags > * + *::before {
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 10px;
  border-radius: 50%;
  background: var(--prr-line);
}
.prd-item-tags .prd-topic { color: var(--prr-teal); }

/* Right-side vendor / Radar copy chip */
.prd-item-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--prr-line-soft);
  border-radius: 10px;
  background: var(--prr-navy-2);
  text-align: right;
  font-size: 12px;
}
.prd-item-side-vendor {
  color: var(--prr-cyan-2);
  font-weight: 800;
  text-decoration: none;
}
.prd-item-side-vendor:hover { text-decoration: underline; }
.prd-item-side-radar {
  color: var(--prr-muted);
  font-weight: 700;
}

.prd-loading {
  padding: 42px;
  border: 1px dashed var(--prr-line);
  border-radius: 16px;
  background: var(--prr-panel);
  color: var(--prr-muted);
  text-align: center;
}

.prd-empty {
  padding: 42px;
  border: 1px dashed var(--prr-line);
  border-radius: 18px;
  background: var(--prr-panel);
  color: var(--prr-ink-2);
  text-align: center;
}
.prd-back, .prd-radar {
  display: inline-block;
  margin-top: 16px;
  color: var(--prr-cyan-2);
  text-decoration: none;
  font-weight: 800;
}
.prd-back:hover, .prd-radar:hover { text-decoration: underline; }

.prd-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--prr-line-soft);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 820px) {
  .prd-item {
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 18px;
  }
  .prd-item-num { font-size: 32px; }
  .prd-item-side {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--prr-line-soft);
    border-radius: 0;
  }
  .prd-switch {
    flex-direction: column;
    align-items: stretch;
  }
  .prd-switch-nav {
    justify-content: space-between;
  }
  .prd-switch-tabs {
    justify-content: center;
    flex-wrap: wrap;
  }
  .prd-meta-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .prd-actions { align-self: stretch; }
}

/* v20260906-3: edition picker + disabled tab */
.prd-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.prd-picker-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--prr-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 2px 22px 2px 6px;
  margin: 0 -6px;
  cursor: pointer;
  border-radius: 6px;
  transition: .15s;
}
.prd-picker-select:hover,
.prd-picker-select:focus {
  border-color: var(--prr-line-soft);
  background: rgba(20, 183, 238, .08);
  outline: none;
}
.prd-picker-select option {
  background: var(--prr-panel);
  color: var(--prr-ink);
}
.prd-picker-caret {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #14b7ee;
  pointer-events: none;
}
.prd-tab.disabled {
  opacity: .35;
  pointer-events: none;
  cursor: not-allowed;
}


/* ---- Edition language selector -------------------------------------------
 * Reuses the article index's .np-language-nav markup so it looks like the bar
 * readers already know, but NOT its CSS: every np-language-nav rule in live.css
 * is scoped under #np-payment-radar and this page's shell is #np-radar-roundup,
 * so those rules never apply here.
 *
 * Re-declared with this page's own --prr-* tokens rather than live.css's --line
 * / --card / --cyan, which are not defined on this page -- using them would
 * leave the bar with no border and no active colour. The --prr-* tokens also
 * carry light/dark variants, so the bar follows the site theme toggle for free.
 * ------------------------------------------------------------------------- */
#np-radar-roundup .np-language-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0 14px;padding:12px 14px;border:1px solid var(--prr-line);border-radius:14px;background:var(--prr-panel)}
#np-radar-roundup .np-language-nav[hidden]{display:none}
#np-radar-roundup .np-language-nav>span{color:var(--prr-muted);font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
#np-radar-roundup .np-language-nav>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
#np-radar-roundup .np-language-nav button{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--prr-line);border-radius:999px;color:var(--prr-muted);background:var(--prr-panel-2);font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:color .18s ease,background .18s ease,border-color .18s ease}
#np-radar-roundup .np-language-nav button:hover{border-color:var(--prr-cyan);color:var(--prr-cyan-2)}
#np-radar-roundup .np-language-nav button.active{border-color:var(--prr-cyan);color:#fff;background:var(--prr-cyan)}
#np-radar-roundup .np-language-nav button em{padding-left:6px;border-left:1px solid currentColor;font-size:9px;font-style:normal;letter-spacing:.07em;text-transform:uppercase;opacity:.8}

@media (max-width:760px){
  #np-radar-roundup .np-language-nav{align-items:flex-start;flex-direction:column;gap:10px}
  #np-radar-roundup .np-language-nav>div{justify-content:flex-start}
}

/* Shown when the page is in another language but this edition's letter has no
 * translation -- the reader would otherwise see English prose under translated
 * chrome with no explanation. Muted and small: a note, not an error. */
#np-radar-roundup .prd-letter-untranslated{margin:0 0 12px;padding:8px 11px;border-left:2px solid var(--prr-cyan);border-radius:0 8px 8px 0;background:var(--prr-panel-2);color:var(--prr-muted);font-size:12px;font-weight:650;line-height:1.45}