/* Screen-top "updates available" banner (templates/components/_update_banner.html).
 * Shown site-wide to admins. Four on-brand states keyed off update_summary
 * (priority: running-yanked/yanked = danger, restart = warn, updates = info).
 * Self-coloured gradients with white text, so it reads the same on the dark
 * public shell and the light admin shell. The state is chosen server-side. */
.kw-update-banner {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 0.6875rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  /* info — updates available (signature indigo) */
  background: linear-gradient(90deg, #2A33A8 0%, #4D60FB 55%, #5E54E8 100%);
  box-shadow: inset 0 0 40px rgba(197, 185, 246, 0.18);
}
.kw-update-banner--warn {
  background: linear-gradient(90deg, #5A4500 0%, #8A6A00 100%);
  box-shadow: none;
}
.kw-update-banner--danger {
  background: linear-gradient(90deg, #7A1A1A 0%, #C23434 100%);
  box-shadow: none;
}
.kw-update-banner__msg {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
}
.kw-update-banner__msg .kw-ico { color: var(--kw-soft-lavender); }
.kw-update-banner--warn .kw-update-banner__msg .kw-ico { color: var(--kw-signal-gold); }
.kw-update-banner--danger .kw-update-banner__msg .kw-ico { color: #FFC9C9; }
.kw-update-banner__msg strong { font-weight: 700; }
.kw-update-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-family: var(--kw-font-headline);
  font-weight: 600;
  font-size: 0.84375rem;
  color: #fff;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--kw-radius-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms;
}
.kw-update-banner__cta:hover { background: rgba(255, 255, 255, 0.26); }
/* Direct-accept clickwrap on the disclaimer lock banner (§5.4 G3(a)). */
.kw-update-banner__link { color: #fff; text-decoration: underline; white-space: nowrap; }
.kw-update-banner__ack { display: inline-flex; align-items: center; }
.kw-update-banner__ack label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: #fff; cursor: pointer; font-size: 0.84375rem; line-height: 1.3;
}
.kw-update-banner__ack input[type="checkbox"] {
  accent-color: var(--kw-signal-gold); width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer;
}
button.kw-update-banner__cta { appearance: none; cursor: pointer; }
.kw-update-banner__cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* Inline "→ vX available" / "pulled" pills in the installed-agents table. */
.kw-update-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--kw-radius-pill);
  font-family: var(--kw-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.4;
  background: rgba(43, 182, 115, 0.14);
  color: #1B8E5A;
  border: 1px solid #B6E6CF;
}
html.dark .kw-update-pill { color: #36C588; border-color: rgba(43, 182, 115, 0.35); }
.kw-update-pill--danger {
  background: #FDECEC;
  color: #C23434;
  border-color: #F4C4C4;
}
.kw-update-pill--warn {
  background: #FEF6DC;
  color: var(--kw-yellow-ink);
  border-color: #F6E0A0;
}

/* Upgrade callout — top of the version-history panel. */
.kw-upgrade-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.875rem 1rem;
  margin: 0.25rem 0 1.25rem 0;
  background: linear-gradient(180deg, #EEF1FE, #F8F9FE);
  border: 1px solid #CBD2F4;
  border-radius: var(--kw-radius-lg);
  font-size: 0.8125rem;
}
html.dark .kw-upgrade-callout { background: rgba(77, 96, 251, 0.10); border-color: rgba(77, 96, 251, 0.32); }
.kw-upgrade-callout__msg { display: inline-flex; align-items: center; gap: 0.6875rem; color: var(--kw-fg); }
.kw-upgrade-callout__msg .kw-ico { color: var(--kw-electric-indigo); flex-shrink: 0; }
.kw-upgrade-callout code {
  font-family: var(--kw-font-mono);
  font-size: 0.78em;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  background: #E3E8FB;
  color: var(--kw-blue);
}
html.dark .kw-upgrade-callout code { background: rgba(77, 96, 251, 0.16); color: var(--kw-soft-lavender); }

/* Version-history / changelog list (admin detail + public "What's new").
 * The list is rendered as a vertical TIMELINE — the rail, node dots, item
 * spacing, --current/--newer highlights live in components/version_history.css
 * (loaded after this file). The head/ver/date/tag/body/downgrade rules below
 * are shared by the timeline. */
.kw-changelog { list-style: none; margin: 0; padding: 0; }
.kw-changelog__head {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.375rem;
}
.kw-changelog__ver { font-family: var(--kw-font-mono); font-weight: 600; color: var(--kw-fg); }
.kw-changelog__date { margin-inline-start: auto; font-family: var(--kw-font-mono); font-size: 0.72rem; color: var(--kw-fg-subtle); }
.kw-changelog__tag {
  font-family: var(--kw-font-mono);
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: var(--kw-radius-pill); font-weight: 600;
  background: #EAEDFB; color: var(--kw-blue); border: 1px solid #CBD2F4;
}
html.dark .kw-changelog__tag { background: rgba(77, 96, 251, 0.16); color: var(--kw-soft-lavender); border-color: rgba(77, 96, 251, 0.4); }
.kw-changelog__tag--latest { background: #E6F7EF; color: #1B8E5A; border-color: #B6E6CF; }
html.dark .kw-changelog__tag--latest { background: rgba(43, 182, 115, 0.16); color: #36C588; border-color: rgba(43, 182, 115, 0.4); }
.kw-changelog__body {
  white-space: pre-wrap;
  font-size: 0.8125rem; line-height: 1.55; color: var(--kw-fg-muted);
}
.kw-changelog__body--empty { color: var(--kw-fg-subtle); font-style: italic; }
.kw-changelog__body--md { white-space: normal; }
.kw-changelog__body--md > :first-child { margin-top: 0; }
.kw-changelog__body--md > :last-child { margin-bottom: 0; }
.kw-changelog__h {
  font-family: var(--kw-font-mono);
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--kw-fg-subtle);
  margin: 0.75rem 0 0.25rem 0;
}
.kw-changelog__body--md p { margin: 0.25rem 0; }
.kw-changelog__list { margin: 0.25rem 0; padding-inline-start: 1.1rem; }
.kw-changelog__list li { margin: 0.1875rem 0; }
.kw-changelog__body--md code {
  font-family: var(--kw-font-mono); font-size: 0.78em;
  background: var(--kw-bg-subtle); padding: 0.05em 0.3em; border-radius: 4px;
}
html.dark .kw-changelog__body--md code { background: rgba(77, 96, 251, 0.14); color: var(--kw-soft-lavender); }
.kw-changelog__body--md strong { color: var(--kw-fg); font-weight: 650; }

/* Per-version downgrade (rollback) control, end-aligned in the release head. */
.kw-changelog__action { margin-inline-start: auto; }
.kw-changelog__downgrade {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: var(--kw-font-headline);
  font-size: 0.75rem; line-height: 1; padding: 0.3rem 0.55rem;
  border: 1px solid var(--kw-border-color); border-radius: var(--kw-radius-md);
  background: var(--kw-bg-elevated); color: var(--kw-fg); cursor: pointer;
}
.kw-changelog__downgrade:hover { background: var(--kw-bg-subtle); border-color: var(--kw-fg-subtle); }
html.dark .kw-changelog__downgrade { background: transparent; border-color: rgba(255, 255, 255, 0.20); color: #fff; }
html.dark .kw-changelog__downgrade:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); }

/* Install/upgrade/downgrade audit trail in the "Install & usage" panel. */
.kw-versionlog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.kw-versionlog__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-family: var(--kw-font-mono); font-size: 0.75rem; color: var(--kw-fg-subtle); }
.kw-versionlog__action { font-weight: 600; color: var(--kw-fg); font-family: var(--kw-font-headline); }
.kw-versionlog__ver { font-family: var(--kw-font-mono); font-size: 0.72rem; color: var(--kw-blue); }
html.dark .kw-versionlog__ver { color: var(--kw-soft-lavender); }
.kw-versionlog__by { color: var(--kw-fg-subtle); }
.kw-versionlog__at { color: var(--kw-fg-subtle); font-family: var(--kw-font-mono); font-size: 0.7rem; margin-inline-start: auto; }