/* "What's new" — landing hero activity feed + dedicated page.
 *
 * Adapted from the design handoff (release-timeline.css): the abstract reference
 * tokens (--stroke, --fg-1, --r-lg, --font-display, --kw-brand-blue, --kw-success,
 * --kw-gold-ink, --glow-glass) are translated to our --kw-* tokens, and
 * .theme-dark/.theme-light → html.dark/.light. Only the .feed* + split-hero rules
 * are shipped (the .cl* and .clfeed* timeline options use physical left/right and
 * are not needed here). Logical properties only (RTL lint). Icons stay white/gold.
 */

/* ---- Split hero: copy left, activity feed right (Home) ---- */
.kw-hero--split .kw-hero__inner {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 3rem;
  align-items: center;
  text-align: start;
  max-width: var(--kw-width-content);
}
.kw-hero--split .kw-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.kw-hero--split .kw-hero__title { max-width: none; }
.kw-hero--split .kw-hero__eyebrow { margin-bottom: 1.375rem; }
.kw-hero--split .kw-hero__lede { margin-inline: 0; margin-block: 1.375rem 1.875rem; max-width: 33rem; }
.kw-hero--split .kw-hero__ctas { justify-content: flex-start; }
@media (max-width: 900px) {
  .kw-hero--split .kw-hero__inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .kw-hero--split .kw-hero__copy { align-items: center; }
  .kw-hero--split .kw-hero__lede { margin-inline: auto; }
  .kw-hero--split .kw-hero__ctas { justify-content: center; }
}

/* ---- The activity panel ---- */
.feed {
  border-radius: var(--kw-radius-xl);
  border: 1px solid var(--kw-border-color);
  background: var(--kw-surface);
  overflow: hidden;
  text-align: start;
}
html.dark .feed {
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
  box-shadow: var(--kw-glow-glass);
}
.feed__head { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 1.125rem; border-bottom: 1px solid var(--kw-border-color); }
.feed__head .eyebrow {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-family: var(--kw-font-mono); font-size: 12px; font-weight: 500; color: var(--kw-muted-lavender);
}
.feed__head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kw-electric-indigo); box-shadow: 0 0 9px var(--kw-electric-indigo); }
.feed__viewall {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.3125rem;
  font-family: var(--kw-font-headline); font-weight: 500; font-size: 13px; color: var(--kw-soft-lavender);
}
html.light .feed__viewall { color: var(--kw-blue); }
.feed__viewall .kw-ico { width: 14px; height: 14px; }

.feed__list {
  display: flex; flex-direction: column;
  max-height: 26.25rem; overflow-y: auto;
  /* Scrollbar comes from the app-wide rule in base.css (theme-aware tokens). */
}

.feed__item {
  display: flex; gap: 0.8125rem; align-items: flex-start;
  padding: 0.875rem 1.125rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--kw-border-soft); transition: background 130ms;
}
.feed__item:last-child { border-bottom: 0; }
.feed__item:hover { background: var(--kw-bg-subtle); }
html.dark .feed__item:hover { background: rgba(77, 96, 251, 0.07); }

.feed__marker {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; border: 1px solid var(--kw-border-color);
}
.feed__marker .kw-ico { width: 17px; height: 17px; }

/* typed accents — marker tint + tag colour (brand-derived literals, matching the
   dark-theme rgba convention already used in update_banner.css) */
.feed__item--new .feed__marker { background: rgba(131, 82, 232, 0.14); border-color: rgba(131, 82, 232, 0.4); color: #8352E8; }
html.dark .feed__item--new .feed__marker { color: #B79AF2; }
.feed__item--available .feed__marker { background: rgba(43, 182, 115, 0.14); border-color: rgba(43, 182, 115, 0.4); color: #1B8E5A; }
html.dark .feed__item--available .feed__marker { color: #36C588; }
.feed__item--release .feed__marker { background: rgba(77, 96, 251, 0.14); border-color: rgba(77, 96, 251, 0.4); color: var(--kw-blue); }
html.dark .feed__item--release .feed__marker { color: var(--kw-soft-lavender); }
.feed__item--breaking .feed__marker { background: rgba(253, 202, 19, 0.16); border-color: rgba(253, 202, 19, 0.5); color: var(--kw-yellow-ink); }
html.dark .feed__item--breaking .feed__marker { color: var(--kw-signal-gold); }
.feed__item--news .feed__marker { background: rgba(77, 96, 251, 0.10); color: var(--kw-fg-muted); }

.feed__body { min-width: 0; flex: 1; }
.feed__type { font-family: var(--kw-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.feed__item--new .feed__type { color: #8352E8; }
html.dark .feed__item--new .feed__type { color: #B79AF2; }
.feed__item--available .feed__type { color: #1B8E5A; }
html.dark .feed__item--available .feed__type { color: #36C588; }
.feed__item--release .feed__type { color: var(--kw-blue); }
html.dark .feed__item--release .feed__type { color: var(--kw-soft-lavender); }
.feed__item--breaking .feed__type { color: var(--kw-yellow-ink); }
html.dark .feed__item--breaking .feed__type { color: var(--kw-signal-gold); }
.feed__item--news .feed__type { color: var(--kw-fg-subtle); }

.feed__title { font-size: 14px; font-weight: 600; color: var(--kw-fg); line-height: 1.35; margin: 2px 0 0; }
.feed__ver { color: var(--kw-fg-muted); font-family: var(--kw-font-mono); font-size: 0.85em; }
.feed__meta { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Dedicated /whats-new page ---- */
.kw-news-hero { display: flex; align-items: flex-start; gap: 1.125rem; margin-bottom: 0.5rem; }
.kw-news-hero__orb {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--kw-radius-lg);
  display: grid; place-items: center; color: var(--kw-white);
  background: var(--kw-glass-fill); border: 1px solid var(--kw-glass-stroke);
}
html.light .kw-news-hero__orb { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; }
.kw-news-hero__orb .kw-ico { width: 28px; height: 28px; }
.kw-news-hero h1 { font-size: 2.125rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; color: var(--kw-fg); }
.kw-news-hero p { color: var(--kw-fg-muted); margin: 0.375rem 0 0; font-size: 0.9375rem; max-width: 35rem; }

.kw-news-filter { display: flex; gap: 0.5rem; margin: 1.5rem 0 1.375rem; flex-wrap: wrap; align-items: center; }
.kw-news-filter__lbl { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); margin-inline-end: 0.125rem; }
.kw-news-filter__pill {
  font-family: var(--kw-font-mono); font-size: 12px; padding: 0.4375rem 0.9375rem;
  border-radius: var(--kw-radius-pill); border: 1px solid var(--kw-border-color);
  background: transparent; color: var(--kw-fg-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.kw-news-filter__pill .kw-ico { width: 13px; height: 13px; }
.kw-news-filter__pill[aria-pressed="true"] { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; }

/* On the dedicated page the list is uncapped (no internal scroll). */
.feed--page { max-width: 55rem; }
.feed--page .feed__list { max-height: none; overflow: visible; }
.feed__monthhead {
  font-family: var(--kw-font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--kw-fg-subtle);
  padding: 0.875rem 1.125rem 0.375rem; border-bottom: 1px solid var(--kw-border-soft);
}
.kw-news-empty { padding: 2rem 1.125rem; }

/* ---- Home: horizontal "What's new" rail (relocated below the synced hero —
   the hero's inline-end side is now the live demo console). Same .feed__item
   data/markup as the panel, laid out as 4 glass cards. ---- */
.whatsnew__eyebrow {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-family: var(--kw-font-mono); font-size: 12px; font-weight: 500; color: var(--kw-muted-lavender);
}
.whatsnew__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kw-electric-indigo); box-shadow: 0 0 9px var(--kw-electric-indigo); }
.whatsnew__rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
  margin-top: 1.375rem;
}
.whatsnew__rail .feed__item {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  border: 1px solid var(--kw-border-color);
  border-radius: var(--kw-radius-xl);
  background: var(--kw-surface);
}
html.dark .whatsnew__rail .feed__item {
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
  box-shadow: var(--kw-glow-glass);
}
@media (max-width: 1000px) { .whatsnew__rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .whatsnew__rail { grid-template-columns: 1fr; } }