/* Copyright (c) 2024-2026 onCloud LLC. All rights reserved. Proprietary and confidential. */
/* ===== Public promotion ribbon (voice#1497; shared since voice#1636) =====
   Mounted by /shared/js/promo-ribbon.js when a public promo code is running; the script
   loads THIS stylesheet itself, so a page needs only the script tag. The ribbon is fixed
   to the top; the script sets --promo-ribbon-h from the rendered height and the page
   offsets by it, so nothing is covered (a fixed marketing .nav moves down with it; the
   docs header is in normal flow and simply starts below the body padding).
   The three var() fallbacks are for hosts without the marketing tokens (the docs site):
   the brand gradient is the shared token, the pill radius and mono font their marketing
   values. The hero PILL (.promo-pill) stays in each marketing stylesheet: it is mounted
   only there. */
:root { --promo-ribbon-h: 0px; }
.promo-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.6rem 0.9rem; padding: 0.55rem 3rem 0.55rem 1rem;
  background: var(--gradient-primary, var(--cv-brand-grad)); color: #fff; font-size: 0.86rem; line-height: 1.35;
}
.promo-ribbon__tag {
  font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill, 100px); white-space: nowrap;
}
.promo-ribbon__msg b { font-weight: 700; color: inherit; }
.promo-ribbon__ends { opacity: 0.85; white-space: nowrap; }
.promo-ribbon__go { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.promo-ribbon__x {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: 0.85; padding: 0.25rem;
}
.promo-ribbon__x:hover, .promo-ribbon__x:focus-visible { opacity: 1; outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; border-radius: 4px; }
html.has-promo-ribbon body { padding-top: var(--promo-ribbon-h); }
html.has-promo-ribbon .nav { top: var(--promo-ribbon-h); }
@media (max-width: 640px) {
  .promo-ribbon { font-size: 0.8rem; padding-right: 2.5rem; }
  .promo-ribbon__ends { display: none; }
}

/* ===== Website announcements (voice#2032) =====
   The spotlighted announcement takes the hero pill slot (the marketing stylesheets style
   .promo-pill there); on the public docs site, which has no hero, the same pill opens the
   article, so it is styled here with the docs' own fallbacks. The What's new cards use each
   site's own card class (data-card-class); only the date line and the link are shared. */
.doc-article > .promo-pill__wrap { margin: 0 0 1rem; }
.doc-article > .promo-pill__wrap .promo-pill {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  border-radius: 100px; border: 1px solid rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.08);
  color: inherit; font-weight: 600; font-size: 0.88rem; text-decoration: none;
}
.doc-article > .promo-pill__wrap .promo-pill:hover { border-color: rgba(139, 92, 246, 0.7); }
.doc-article > .promo-pill__wrap .promo-pill__chip {
  background: var(--cv-brand-grad, linear-gradient(135deg, #7c3aed, #2563eb)); color: #fff;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 100px;
}
.cs-news__date {
  font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.7; margin: 0 0 0.35rem;
}
.cs-news__more { font-weight: 600; white-space: nowrap; }