/* Pulse updates (updates.html): the public changelog, on top of the homepage's site.css. */
.updates main { padding-top: calc(var(--ribbon-h) + var(--bar-h) + clamp(28px, 5vw, 64px)); }

/* Hero */
.up-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.up-hero__h {
  margin: 0; font-family: inherit; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height: .9; letter-spacing: -.04em;
  background: linear-gradient(135deg, #7427c8 0%, #8f3cfa 45%, #e43ffb 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #e43ffb;
}
.up-hero__lede { margin: 22px 0 0; max-width: 40rem; font-size: clamp(1.14rem, .98rem + .5vw, 1.45rem); line-height: 1.42; font-weight: 500; color: var(--sc-ink); }
.up-hero__sub { margin: 14px 0 0; max-width: 40rem; color: var(--sc-ink-soft); line-height: 1.6; }
.up-hero__sub a { color: var(--violet-text); }

/* Tag colors: one per area of Pulse. */
.up-tag, .up-filter__btn { --tc: #b996ff; }
[data-tag="events"]   { --tc: oklch(72% .17 300); }
[data-tag="video"]    { --tc: oklch(72% .2 335); }
[data-tag="pages"]    { --tc: oklch(76% .13 185); }
[data-tag="promote"]  { --tc: oklch(80% .15 72); }
[data-tag="people"]   { --tc: oklch(76% .12 225); }
[data-tag="email"]    { --tc: oklch(74% .15 30); }
[data-tag="payments"] { --tc: oklch(78% .15 150); }
[data-tag="team"]     { --tc: oklch(72% .14 262); }
[data-tag="max"]      { --tc: oklch(84% .08 300); }
[data-tag="phone"]    { --tc: oklch(80% .1 110); }

/* Filter row: wraps on wide screens, scrolls sideways inside itself on phones. Not sticky: the week dates are. */
.up-filter { padding: 4px 0; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.up-filter__row { display: flex; flex-wrap: wrap; gap: 8px; }
.up-filter__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #15111f; color: var(--sc-ink-soft);
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.up-filter__btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.up-filter__btn[data-tag="all"]::before { background: linear-gradient(135deg, #8f3cfa, #e43ffb); }
.up-filter__btn:hover { color: #fff; border-color: var(--tc); }
.up-filter__btn[aria-pressed="true"] { color: #fff; border-color: var(--tc); background: color-mix(in oklab, var(--tc) 18%, #15111f); }
.up-filter__btn:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 2px; }

/* A week's release: date column + body. */
.up-list { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.up-week { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; scroll-margin-top: calc(var(--ribbon-h) + var(--bar-h) + 80px); }
.up-week__side { position: sticky; top: calc(var(--bar-h) + 32px); display: grid; gap: 6px; padding-left: 18px; border-left: 2px solid transparent; border-image: linear-gradient(180deg, #8f3cfa, #e43ffb 60%, transparent) 1; }
.up-week__date { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }
.up-week__label { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-text); }
.up-week__count { margin: 0; font-size: .88rem; color: var(--sc-ink-soft); }
.up-week__link { justify-self: start; font-size: .85rem; color: var(--sc-ink-soft); text-decoration: none; }
.up-week__link:hover { color: #fff; text-decoration: underline; }
.up-week__h { margin: 0 0 20px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; font-weight: 700; color: #fff; text-wrap: balance; }

/* Highlights: the week's biggest changes as cards. */
.up-highs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.up-high {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2vw, 26px); border-radius: 22px; border: 1px solid var(--line-strong);
  background: linear-gradient(165deg, #1e1a29 0%, #14111c 55%, #100e16 100%);
}
.up-high::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--tc) 30%, transparent), transparent); pointer-events: none; }
.up-high__h { position: relative; margin: 0; font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem); line-height: 1.25; font-weight: 700; color: #fff; }
.up-high p { position: relative; margin: 0; color: var(--sc-ink-soft); line-height: 1.55; }
.up-high a { color: var(--violet-text); }

/* Tag chip */
.up-tag { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tc); background: color-mix(in oklab, var(--tc) 14%, transparent); border: 1px solid color-mix(in oklab, var(--tc) 35%, transparent); white-space: nowrap; }

/* New / Improved / Fixed groups */
.up-group { margin-top: clamp(28px, 3vw, 40px); }
.up-group__h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.up-group__h::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--gc, #8f3cfa); }
.up-group--new      { --gc: linear-gradient(135deg, #8f3cfa, #e43ffb); }
.up-group--improved { --gc: #b996ff; }
.up-group--fixed    { --gc: #6b627f; }
.up-group__h::before { background: var(--gc); }
.up-items { list-style: none; margin: 0; padding: 0; }
.up-item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.up-item:last-child { border-bottom: 0; }
.up-item .up-tag { margin-top: 2px; justify-self: start; }
.up-item__h { margin: 0; font-size: 1.04rem; font-weight: 700; color: #fff; }
.up-item p { margin: 4px 0 0; color: var(--sc-ink-soft); line-height: 1.58; max-width: 62ch; }
.up-item a { color: var(--violet-text); }
.up-item__body { min-width: 0; }

.up-empty { margin: 0; padding: 28px; border-radius: 18px; border: 1px dashed var(--line-strong); color: var(--sc-ink-soft); text-align: center; }
.up-start { margin: 0; color: var(--sc-ink-soft); font-size: .92rem; text-align: center; }

.up-close { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }

[hidden] { display: none !important; }

@media (max-width: 860px) {
  .up-week { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .up-week__side { position: static; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 4px 14px; padding-left: 14px; }
  .up-week__label { grid-column: 1 / -1; }
  .up-week__link { display: none; }
  .up-filter__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); }
  .up-filter__row::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
  .up-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .up-filter__btn { transition: none; }
}
