/* Naija Decides live components. Colours come from CSS variables so any theme can restyle them. */
:root {
  --nd-paper: #f6f4ee;
  --nd-card: #ffffff;
  --nd-ink: #141413;
  --nd-muted: #4a4843;
  --nd-soft: #5a5852;
  --nd-line: #d9d5ca;
  --nd-line-soft: #e6e2d8;
  --nd-green: #0b6b3a;
  --nd-green-dark: #0b4f2b;
  --nd-live: #c2410c;
  --nd-radius: 14px;
  --nd-serif: 'Newsreader', Georgia, serif;
  --nd-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --nd-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

.nd-feed, .nd-latest, .nd-ask { font-family: var(--nd-sans); color: var(--nd-ink); }

.nd-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.nd-pills::-webkit-scrollbar { display: none; }
.nd-pill {
  flex-shrink: 0; min-height: 44px; padding: 0 18px; border-radius: 22px; cursor: pointer;
  font: 500 15px/1 var(--nd-sans); white-space: nowrap;
  background: var(--nd-card); color: var(--nd-ink); border: 1.5px solid #cfcabe;
}
.nd-pill[aria-pressed="true"] { background: var(--nd-ink); color: #fff; border-color: var(--nd-ink); }

.nd-feed__list { display: flex; flex-direction: column; gap: 16px; }

.nd-card {
  background: var(--nd-card); border: 1px solid #ddd8cc; border-radius: var(--nd-radius);
  padding: 24px 26px; display: flex; flex-direction: column; gap: 12px;
}
.nd-card.is-pinned { border-color: var(--nd-ink); }
.nd-card.is-new { box-shadow: 0 0 0 3px #f7c9b3; }
.nd-card:focus { outline: 3px solid var(--nd-green); outline-offset: 2px; }
.nd-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; color: var(--nd-soft); }
.nd-card__meta time { font: 500 13px var(--nd-mono); }
.nd-card__place { margin-left: auto; }
.nd-card__title { margin: 0; font: 500 clamp(21px, 2.2vw, 27px)/1.25 var(--nd-serif); }
.nd-card__title a { color: inherit; text-decoration: none; }
.nd-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nd-card__summary { margin: 0; font-size: 16px; line-height: 1.55; color: var(--nd-muted); max-width: 70ch; }
.nd-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--nd-line-soft); }
.nd-card__sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--nd-soft); }
.nd-card__sources a { padding: 4px 10px; border-radius: 12px; background: #f1eee6; color: var(--nd-ink); text-decoration: none; }
.nd-card__sources a:hover { background: #e6e2d8; }
.nd-card__actions { display: flex; align-items: center; gap: 8px; }
.nd-verified { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--nd-green-dark); }
.nd-verified::before { content: ''; width: 14px; height: 8px; border: solid var(--nd-green); border-width: 0 0 2.4px 2.4px; transform: rotate(-45deg) translate(1px, -2px); }
.nd-share { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--nd-line); background: var(--nd-card); font: 500 14px var(--nd-sans); cursor: pointer; }

.nd-card--compact { border: 0; border-bottom: 1px solid var(--nd-line-soft); border-radius: 0; padding: 16px 20px; gap: 6px; }
.nd-card--compact .nd-card__title { font-size: 19px; }

.nd-tag { font: 500 11px var(--nd-mono); letter-spacing: .03em; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; background: #ece9e0; color: var(--nd-ink); }
.nd-tag--inec { background: #dcebdf; color: var(--nd-green-dark); }
.nd-tag--campaign { background: #e6e3f3; color: #3b2f7a; }
.nd-tag--courts { background: #eae4d6; color: #4a3f2a; }
.nd-tag--security { background: #fbe3d6; color: #8a2d0a; }
.nd-tag--fact-check { background: var(--nd-ink); color: #fff; }
.nd-tag--voter-info { background: #dde7f2; color: #1e3a5f; }
.nd-tag--results { background: #fff1c2; color: #5e4a0b; }
.nd-flag { font: 500 11px var(--nd-mono); padding: 2px 7px; border-radius: 4px; border: 1px solid var(--nd-ink); color: var(--nd-ink); text-transform: uppercase; }
.nd-flag--new { background: var(--nd-live); border-color: var(--nd-live); color: #fff; }

.nd-new {
  position: sticky; top: 12px; z-index: 5; align-self: center; display: block; margin: 0 auto 16px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 24px; cursor: pointer;
  background: var(--nd-live); color: #fff; font: 600 15px var(--nd-sans); box-shadow: 0 4px 14px rgba(194, 65, 12, .3);
}
.nd-new::before { content: '↑ '; }
.nd-more { display: block; width: 100%; min-height: 52px; margin-top: 16px; border-radius: 26px; border: 1.5px solid var(--nd-ink); background: none; font: 600 15px var(--nd-sans); cursor: pointer; }
.nd-empty { padding: 40px 24px; text-align: center; border: 1px dashed #cfcabe; border-radius: var(--nd-radius); color: var(--nd-soft); }
.nd-status:empty, .nd-status[hidden] { display: none; }
.nd-status { padding: 12px 16px; border-radius: 10px; background: #fbe3d6; color: #8a2d0a; font-size: 14px; }
.nd-feed[aria-busy="true"] .nd-feed__list { opacity: .5; }

.nd-ask { display: flex; flex-direction: column; gap: 10px; }
.nd-ask label { font-weight: 600; }
.nd-ask__row { display: flex; gap: 8px; }
.nd-ask input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--nd-line); font: 16px var(--nd-sans); background: var(--nd-card); color: var(--nd-ink); }
.nd-ask button { min-height: 48px; padding: 0 20px; border-radius: 10px; border: 0; background: var(--nd-ink); color: #fff; font: 600 15px var(--nd-sans); cursor: pointer; }
.nd-ask button:disabled { opacity: .6; cursor: progress; }
.nd-ask__note { margin: 0; font-size: 13px; color: var(--nd-soft); line-height: 1.45; }
.nd-ask__answer:empty { display: none; }
.nd-ask__answer { padding: 14px 16px; border-radius: 10px; background: #f1eee6; font-size: 15px; line-height: 1.5; }
.nd-ask__answer p { margin: 0 0 8px; }
.nd-ask__answer p:last-child { margin: 0; }
.nd-ask__cites { font-size: 13px; color: var(--nd-soft); }

.nd-langs { display: flex; gap: 2px; }
.nd-langs button { min-height: 44px; padding: 0 10px; border: 0; background: none; color: inherit; font: inherit; opacity: .75; cursor: pointer; }
.nd-langs button[aria-pressed="true"] { opacity: 1; font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }

@media (max-width: 640px) {
  .nd-card { padding: 16px; gap: 10px; }
  .nd-card__summary { font-size: 15px; }
  .nd-card__place { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .nd-card.is-new { animation: nd-in .4s ease-out; }
  @keyframes nd-in { from { opacity: 0; transform: translateY(-6px); } }
}