/* ============================================================
   HighlightsTicker (.x3-ticker) — the blue Highlights strip above the
   fixed nav: slim rotating bar + expandable card panel. Born on the home
   hero (x3.css), extracted 2026-07-30 so /ask-anything/ carries it too
   (Sofia). Behavior: /js/behaviors/highlights-ticker.js (sets
   html.x3-scrolled + html.x3-hl-open + --x3-hl-shift). The .c-header
   seat-coupling rules are :has-scoped so they only fire on pages that
   actually render the ticker.
   ============================================================ */

/* The strip rides ABOVE the fixed nav, announcement-bar style: pinned to the
   very top of the viewport with .c-header pushed down by the bar height.
   Once the page scrolls (html.x3-scrolled, set by x3.js) the strip slides
   away and the nav docks back to the top. */
.x3-ticker {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--color-x3-blue-deep);
  transition: transform 0.35s var(--ease-out-expo);
}
html.x3-scrolled .x3-ticker { transform: translateY(-100%); }
/* this stylesheet loads globally (site.css), so every header-seat rule
   MUST stay :has(.x3-ticker)-scoped — it only fires on pages that render
   the ticker. The nav sits FLUSH under the strip (Sofia, 2026-07-30
   round 2: the earlier 12/14px of air read as a black slit whenever the
   bar goes bright — menu open / scrolled states). */
html:has(.x3-ticker) .c-header { top: 44px; transition: top 0.35s var(--ease-out-expo); }
@media (min-width: 768px) {
  html:has(.x3-ticker) .c-header { top: 54px; }
}
html.x3-scrolled:has(.x3-ticker) .c-header { top: 0; }
/* bright solid-nav pages (no dark/card hero to absorb the strip) RESERVE
   the strip's height at the top of the document — without this the fixed
   strip pushes the nav down into the page's own top spacing and the first
   kicker rides the nav (Sofia, 2026-08-03: "consider the banner a separate
   element spacing wise so it doesn't affect the hierarchy on all pages").
   The reserve stays while scrolled (the strip slides away and the nav
   docks over it), like a classic announcement-bar seat. */
html:has(.x3-ticker):has(.c-header:not(.c-header--dark):not(.c-header--card)) {
  --hl-seat: 44px;
}
html:has(.x3-ticker):has(.c-header:not(.c-header--dark):not(.c-header--card)) body {
  padding-top: 44px;
}
@media (min-width: 768px) {
  html:has(.x3-ticker):has(.c-header:not(.c-header--dark):not(.c-header--card)) {
    --hl-seat: 54px;
  }
  html:has(.x3-ticker):has(.c-header:not(.c-header--dark):not(.c-header--card)) body {
    padding-top: 54px;
  }
}
/* card heroes get the seat too (Sofia, 2026-08-05: the strip overlapped
   the rounded card's top edge — "put it on top and start the rounded
   rectangle below it"). Only full-bleed dark heroes still absorb the
   strip behind them. */
html:has(.x3-ticker):has(.c-header--card) {
  /* consumed by the card-hero heights so the rounded card FITS the
     remaining viewport (Sofia, 2026-08-05 ×2) */
  --hl-seat: 44px;
}
html:has(.x3-ticker):has(.c-header--card) body {
  padding-top: 44px;
}
@media (min-width: 768px) {
  html:has(.x3-ticker):has(.c-header--card) { --hl-seat: 54px; }
  html:has(.x3-ticker):has(.c-header--card) body {
    padding-top: 54px;
  }
}
/* while the panel is open the main nav HIDES entirely (Sofia 2026-08-18:
   the below-panel shift collided with the dimmed hero behind the scrim) —
   it fades back on close. The top seat keeps tracking the measured shift
   so the return lands exactly where the nav belongs. The card-hero
   transition props ride along so .c-header--card keeps its top/padding
   ease under this broader selector. */
html:has(.x3-ticker) .c-header {
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    top 0.25s var(--ease-out-expo),
    padding 0.25s var(--ease-out-expo);
}
html.x3-hl-open:has(.x3-ticker) .c-header {
  top: var(--x3-hl-shift, 54px);
  /* the entrance animation's fill:both pins opacity over declarations —
     release it here or the fade can never win */
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* card-hero pages seat the nav inside the hero card's gutter at
   top: 12px + 6px (site-header.css, higher specificity than the generic
   seat above) — since the ticker went site-wide (2026-08-03) that put
   the bar UNDER the blue strip. Re-seat it: same gutter offset, below
   the strip. Once scrolled the card header loses this state and the
   generic top: 0 rule takes over. */
html:not(.nav-open):has(.x3-ticker)
  .c-header--card:not(.is-scrolled):not(.is-past-top) {
  top: calc(44px + 12px + 6px);
}
@media (min-width: 768px) {
  html:not(.nav-open):has(.x3-ticker)
    .c-header--card:not(.is-scrolled):not(.is-past-top) {
    top: calc(54px + 12px + 6px);
  }
}
html.x3-scrolled:not(.nav-open):has(.x3-ticker)
  .c-header--card:not(.is-scrolled):not(.is-past-top) {
  top: calc(12px + 6px);
}
html.x3-hl-open:not(.nav-open):has(.x3-ticker)
  .c-header--card:not(.is-scrolled):not(.is-past-top) {
  top: calc(var(--x3-hl-shift, 54px) + 12px + 6px);
}
.x3-ticker__bar {
  margin-inline: auto;
  max-width: var(--container-large);
  padding-inline: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  /* the whole bar toggles the panel (the chevron alone is a small target) */
  cursor: pointer;
}
@media (min-width: 768px) { .x3-ticker__bar { height: 54px; } }
@media (min-width: 1024px) { .x3-ticker__bar { padding-inline: 24px; } }
/* the wordmark slides in as the first bar item while the panel is open
   (the panel covers the header's logo; collapsed, the header carries the
   brand, so the seat stays empty). White via invert: the asset is the
   canonical blue wordmark. */
.x3-ticker__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  /* collapsed, the zero-width seat still costs one 12px flex gap and
     pushes "Highlights" off the header wordmark's left edge below —
     the negative margin swallows that gap until the seat opens
     (Sofia, 2026-08-05: bar aligns perfectly to the logo) */
  margin-right: -12px;
  /* ≥24px hit area (WCAG 2.5.8, audit 2026-08-05): the wordmark renders
     22px tall — vertical padding grows the target, the negative block
     margin keeps the bar's height unchanged */
  padding-block: 4px;
  margin-block: -4px;
  transition: max-width 0.5s var(--ease-out-expo), opacity 0.3s ease,
    margin-right 0.5s var(--ease-out-expo);
}
.x3-ticker__logo img {
  display: block;
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
}
@media (min-width: 768px) { .x3-ticker__logo img { height: 22px; } }
.x3-ticker.is-open .x3-ticker__logo {
  max-width: 72px;
  opacity: 1;
  margin-right: 0;
}
.x3-ticker__label {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
}
.x3-ticker__divider {
  flex-shrink: 0;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.3);
}
.x3-ticker__lines {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.x3-ticker__line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.x3-ticker__line.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.x3-ticker__line.is-leaving {
  opacity: 0;
  transform: translateY(-9px);
}
.x3-ticker__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.x3-ticker__count {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.65);
}
.x3-ticker__toggle,
.x3-ticker__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.x3-ticker__toggle:hover,
.x3-ticker__arrow:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}
.x3-ticker__toggle svg { transition: transform 0.2s ease; }
.x3-ticker.is-open .x3-ticker__toggle svg { transform: rotate(180deg); }
.x3-ticker__scrim {
  position: absolute;
  inset: 100% 0 auto;
  height: 100vh;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  cursor: default;
}
.x3-ticker.is-open .x3-ticker__scrim { opacity: 1; pointer-events: auto; }
.x3-ticker__panel {
  position: absolute;
  inset: 100% 0 auto;
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 12px 20px 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
@media (min-width: 1024px) { .x3-ticker__panel { padding-inline: 24px; } }
.x3-ticker.is-open .x3-ticker__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* launch-week auto-open lands softer than a click: the panel fades in
   over 0.7s (is-auto is dropped right after, so manual toggles keep
   the snappy 0.28s) — highlights-ticker.js */
.x3-ticker.is-auto .x3-ticker__panel {
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.x3-ticker__cards {
  position: relative;
  display: grid;
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 0;
  background: rgba(5, 8, 16, 0.92);
  box-shadow: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.x3-ticker__card {
  position: relative; /* seats the __card-art visual */
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* a highlight with a visual (Sofia, 2026-07-30 round 2 · relaid 2026-08-03):
   the art sits on the LEFT inside a rounded square tile; beside it the copy
   column stretches to the tile's height — pill + kicker + title vertically
   CENTERED, the CTA button pinned to the BOTTOM edge in line with the
   visual's foot */
@media (min-width: 768px) {
  .x3-ticker__card--visual {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 32px;
    align-items: stretch;
    /* the side prev-arrow (40px at left 14px) must not overlap the tile —
       the visual starts right of it (Sofia 2026-08-03 round 11) */
    padding-left: 68px;
  }
}
.x3-ticker__card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.x3-ticker__card-art {
  display: none;
}
/* the art tile fills the room the panel has (Sofia, 2026-08-03: the page
   behind the open panel is blurred anyway, so the visual can breathe) —
   200px from tablet, 240px on wide screens; the open-panel nav shift is
   measured by the behavior, so the taller card tracks automatically */
@media (min-width: 768px) {
  .x3-ticker__card-art {
    display: block;
    align-self: center;
    width: 200px;
    height: 200px;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
  }
  /* the whole copy stack (tag · kicker · title · CTA) reads as ONE group,
     vertically centered against the tile with tight spacing (Sofia
     2026-08-03 round 11 — supersedes the round-6 three-row split) */
}
@media (min-width: 1200px) {
  .x3-ticker__card--visual { min-height: 288px; column-gap: 40px; }
  .x3-ticker__card-art { width: 240px; height: 240px; }
}
/* the iBeta wordmark fills its frame edge-to-edge — inset it so the LOGO
   reads smaller while the tile keeps its size (Sofia 2026-08-03; the art
   is object-fit: contain, so padding shrinks the rendered mark) */
.x3-ticker__card-art[src^="/highlights/ibeta"] { padding: 34px; }
@media (min-width: 1200px) {
  .x3-ticker__card-art[src^="/highlights/ibeta"] { padding: 44px; }
}
/* the Gartner quadrant chart reads smaller INSIDE the standard tile
   (Sofia 2026-08-03 round 13: the placeholder square stays the exact
   same size as the other slides; only the chart shrinks) — inset like
   the iBeta mark; the chart's rounded corners are baked into the PNG
   (alpha corners), since CSS can't round contain-fit bitmap content */
.x3-ticker__card-art[src^="/highlights/gartner"] { padding: 22px; }
@media (min-width: 1200px) {
  .x3-ticker__card-art[src^="/highlights/gartner"] { padding: 26px; }
}
.x3-ticker__card.is-active { opacity: 1; }
/* only clickable while the panel is open — otherwise the invisible active
   card floats over the hero and swallows clicks meant for hero controls */
.x3-ticker.is-open .x3-ticker__card.is-active { pointer-events: auto; }
.x3-ticker__card-kicker {
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.x3-ticker__card-title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  /* sized with the enlarged card (Sofia 2026-08-03, rounds 3+6: 36px too
     big, 30px too small — 34 lands it); 28px is the mobile floor */
  font-size: clamp(28px, 2.4vw, 34px);
  /* tight leading + a two-line measure: the long display line breaks into
     two balanced lines instead of running the card's full width (Sofia
     2026-08-03) */
  line-height: 1.1;
  max-width: 34ch;
  text-wrap: balance;
  color: var(--color-white);
}
/* the kicker already provides the air above the title */
.x3-ticker__card-kicker + .x3-ticker__card-title { margin-top: 0; }
.x3-ticker__card-body {
  margin-top: 0;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.65);
}
/* the CTA is a real button now (Sofia 2026-08-03) — the canonical white
   button recipe (base.css .btn--white), drawn on the span since the whole
   card is the link */
.x3-ticker__cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  /* sized like the header nav CTA (site-header.css .c-header__cta):
     8/16 padding + radius-sm — the 44px .btn--white read too big here */
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-black);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.x3-ticker__card:hover .x3-ticker__cta { background: rgba(255, 255, 255, 0.9); }
.x3-ticker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 0 12px 12px;
  background: rgba(5, 8, 16, 0.92);
  padding: 10px 24px;
}
/* side-mounted carousel arrows (Sofia 2026-08-03: more visible than the
   old foot pair) — vertically centered on each edge of the card, above
   the slide link; a dark plate keeps them legible over the art tile */
.x3-ticker__arrow--side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  background: rgba(5, 8, 16, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.x3-ticker__arrow--prev { left: 14px; }
.x3-ticker__arrow--next { right: 14px; }
/* the explicit X on the open panel (Sofia, 2026-08-18) — same glass
   circle as the side arrows, pinned to the panel's top-right corner
   (the panel's 12px top pad + the card's rounded corner) */
.x3-ticker__close {
  position: absolute;
  top: 26px;
  right: 34px;
  z-index: 6;
  width: 32px;
  height: 32px;
  background: rgba(5, 8, 16, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (min-width: 1024px) { .x3-ticker__close { right: 38px; } }
/* mobile: no X on the open panel (Sofia 2026-08-19) — it floated over the
   slide visual; the bar chevron, the scrim tap, and Escape still close */
@media (max-width: 767px) { .x3-ticker__close { display: none; } }
/* ---------- mobile open panel (Sofia, 2026-08-07) ----------
   The visual LEADS: a full-width edge-to-edge strip across the top of
   the card, kicker/title/CTA below it. The panel and card drop their
   side insets so the sheet runs screen edge to screen edge; the side
   arrows ride ON the visual strip like carousel controls. */
@media (max-width: 767px) {
  .x3-ticker__panel { padding-inline: 0; }
  .x3-ticker__cards { border-radius: 0; border-inline: 0; }
  .x3-ticker__foot { border-radius: 0; border-inline: 0; }
  .x3-ticker__card--visual { padding: 0 20px 22px; }
  .x3-ticker__card-art {
    display: block;
    order: -1;
    width: calc(100% + 40px);
    max-width: none; /* the global img cap would hold it at the padding box */
    margin-inline: -20px;
    margin-bottom: 18px;
    height: 200px;
    object-fit: contain;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    /* black, not the 5% tint: the square visuals (privacy head) letterbox
       on this strip and the tint read as a rough rectangle (Sofia
       2026-08-19) — black merges with the art's own ground */
    background: var(--color-black);
  }
  /* centered on the 200px visual strip */
  .x3-ticker__arrow--side { top: 100px; }
  .x3-ticker__arrow--prev { left: 10px; }
  .x3-ticker__arrow--next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .x3-ticker__line, .x3-ticker__panel, .x3-ticker__scrim, .x3-ticker__card {
    transition: none !important;
  }
}