/* "Works with" platform strip: logo cloud (landing), grid (docs, platforms), picker (first run).
   Depends only on the tokens in base.css. Self-contained marquee: it does not need css/fx.css.
   Logos are <img> only and are recolored with a CSS filter so they follow the theme.
   Theme handling mirrors base.css: [data-theme="dark"], or system dark unless [data-theme="light"]. */

:root {
  --ww-filter: brightness(0);
  --ww-ink: #000;                     /* wordmark ink: matches what --ww-filter does to a logo */
  --ww-op: 0.62;
  --ww-hover-op: 0.96;
  --ww-hover-filter: brightness(0);   /* light theme: only vendors that publish a brand color switch to it */
  --ww-h: 30px;
  --ww-gap: clamp(28px, 4.2vw, 56px);
  --ww-dur: 60s;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] { --ww-filter: brightness(0) invert(1); --ww-ink: #fff; --ww-op: 0.68; --ww-hover-filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] { --ww-filter: brightness(0) invert(1); --ww-ink: #fff; --ww-op: 0.68; --ww-hover-filter: brightness(0) invert(1); }

/* ---------- section wrapper (landing) ---------- */
.ww-section { padding-block: clamp(28px, 5vw, 56px); }
.ww-head { display: grid; justify-items: center; gap: 10px; text-align: center; margin-bottom: clamp(14px, 2.4vw, 24px); }
.ww-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.ww-line { max-width: 62ch; margin-inline: auto; font-size: 0.95rem; color: var(--text-2); text-wrap: balance; }
.ww-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 10px; color: var(--text-2); font-weight: 600; }

/* ---------- mark: logo image or wordmark ---------- */
.ww-mark { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ww-h); }
.ww-logo {
  display: block; width: auto; max-width: none; /* height comes from the img height attribute */
  filter: var(--ww-filter); opacity: var(--ww-op);
  transition: opacity 0.2s var(--ease);
}
/* Wordmark tile: our own chamfered badge with knocked-out initials, then the name in one type treatment.
   Same ink and opacity as the filtered logo images, so both read as one monochrome family.
   Per-name tuning only adjusts size and tracking (--ww-ts, --ww-tt) so lengths balance optically. */
.ww-wordmark {
  --ww-ts: 1; --ww-tt: -0.022em;
  display: inline-flex; align-items: center; gap: calc(var(--ww-h) * 0.3); height: var(--ww-h);
  line-height: 1; white-space: nowrap; color: var(--ww-ink); opacity: var(--ww-op);
  transition: opacity 0.25s var(--ease);
}
.ww-badge { flex: none; display: block; width: calc(var(--ww-h) * 0.86); height: calc(var(--ww-h) * 0.86); overflow: visible; }
.ww-badge-t { font-family: var(--font); font-weight: 780; font-size: 14.6px; letter-spacing: -0.04em; }
.ww-badge-n1 { font-size: 17px; }
.ww-wm-text {
  font-size: calc(var(--ww-h) * 0.66 * var(--ww-ts)); font-weight: 650; letter-spacing: var(--ww-tt);
  font-feature-settings: "kern", "ss01"; padding-bottom: 0.04em;
}
/* optical balance per name: long names a touch smaller and tighter, short names a touch larger */
.ww-wm-genesys, .ww-wm-connect { --ww-ts: 0.93; --ww-tt: -0.026em; }
.ww-wm-cxone { --ww-ts: 0.95; --ww-tt: -0.018em; }
.ww-wm-ringcx, .ww-wm-telnyx, .ww-wm-dialpad { --ww-ts: 1.02; }
.ww-wm-twilio, .ww-wm-five9 { --ww-ts: 1.05; --ww-tt: -0.026em; }
.ww-wm-convoso { --ww-ts: 1.02; --ww-tt: -0.024em; }
.ww-wm-twilio .ww-badge-t, .ww-wm-connect .ww-badge-t { font-size: 13.4px; }
/* grid and picker tiles are narrow: keep the two longest names inside the tile padding */
.ww-grid .ww-wm-connect, .ww-picker .ww-wm-connect { --ww-ts: 0.82; }
.ww-grid .ww-wm-genesys, .ww-picker .ww-wm-genesys { --ww-ts: 0.86; }
.ww-grid .ww-wm-cxone, .ww-picker .ww-wm-cxone { --ww-ts: 0.9; }
.ww-grid .ww-wordmark, .ww-picker .ww-wordmark { max-width: 100%; }

/* ---------- tile ---------- */
.ww-track { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ww-tile { position: relative; list-style: none; }
.ww-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px; color: var(--text); text-decoration: none;
  background: none; border: 0; font: inherit;
  transition: transform 0.55s var(--spring);
}
a.ww-face:hover, button.ww-face:hover { text-decoration: none; }
.ww-tile:hover .ww-face, .ww-face:focus-visible { transform: translateY(-3px); }
.ww-face:active { transform: translateY(-1px) scale(0.985); transition-duration: 0.1s; }
.ww-face:focus-visible { outline: 2.5px solid var(--accent-text); outline-offset: 2px; border-radius: 14px; }

/* hover and focus: see the logo stack block at the end (opacity crossfade only) */
.ww-tile:hover .ww-wordmark, .ww-face:focus-visible .ww-wordmark { opacity: 1; }

/* coming soon: dimmed but still legible */
.ww-soon .ww-mark { opacity: 0.62; }
.ww-soon .ww-face { cursor: default; }
.ww-soon:hover .ww-face, .ww-soon .ww-face:focus-visible { transform: none; }

/* ---------- info bubble: Beta chip, tier counts, Notify me ---------- */
.ww-info { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; }
.ww-chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.5; white-space: nowrap;
  color: var(--accent-text); background: var(--accent-soft); border: 1px solid transparent;
}
.ww-chip-soon { color: var(--text-2); background: var(--sunken); border-color: var(--line); }
.ww-counts { display: inline-flex; gap: 8px; font-size: 0.72rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.ww-n b { font-weight: 800; }
.ww-n-read b { color: var(--read); }
.ww-n-write b { color: var(--write); }
.ww-n-dangerous b { color: var(--danger); }
.ww-notify {
  min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 650; line-height: 1; white-space: nowrap;
  color: var(--text); background: var(--surface-solid); border: 1px solid var(--line-strong);
  transition: transform 0.45s var(--spring), background-color 0.2s var(--ease);
}
.ww-notify:hover { background: var(--sunken); transform: translateY(-1px); }
.ww-notify:active { transform: scale(0.96); transition-duration: 0.1s; }
.ww-notify:focus-visible { outline: 2.5px solid var(--accent-text); outline-offset: 2px; border-radius: 999px; }

/* ---------- marquee ---------- */
.ww-marquee { position: relative; }
.ww-marquee .ww-viewport {
  display: flex; overflow: hidden; padding-block: 8px 36px; margin-bottom: -20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.ww-marquee .ww-track {
  flex: none; min-width: 100%; justify-content: space-around; gap: var(--ww-gap); padding-inline: calc(var(--ww-gap) / 2);
  animation: ww-scroll var(--ww-dur) linear infinite;
}
.ww-marquee .ww-tile { flex: none; }
@keyframes ww-scroll { to { transform: translateX(-100%); } }
.ww-marquee:hover .ww-track, .ww-marquee:focus-within .ww-track { animation-play-state: paused; }
.ww-marquee .ww-info {
  position: absolute; z-index: 3; left: 50%; top: calc(100% - 6px); transform: translate(-50%, 4px);
  padding: 6px 10px; border-radius: 999px; background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1);
  opacity: 0; visibility: hidden; pointer-events: none; white-space: nowrap; flex-wrap: nowrap;
  transition: opacity 0.2s var(--ease), transform 0.4s var(--spring), visibility 0s linear 0.2s;
}
.ww-marquee .ww-tile:hover .ww-info, .ww-marquee .ww-tile:focus-within .ww-info {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition: opacity 0.2s var(--ease), transform 0.4s var(--spring), visibility 0s;
}

/* ---------- grid and picker ---------- */
.ww-grid .ww-track, .ww-picker .ww-track {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); gap: 12px; align-items: stretch;
}
.ww-grid .ww-tile, .ww-picker .ww-tile {
  display: flex; flex-direction: column; min-height: 136px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--highlight);
  transition: border-color 0.25s var(--ease), box-shadow 0.3s var(--ease), transform 0.55s var(--spring);
}
.ww-grid .ww-tile:hover, .ww-picker .ww-tile:hover, .ww-grid .ww-tile:focus-within, .ww-picker .ww-tile:focus-within {
  border-color: var(--line-strong); box-shadow: var(--highlight), var(--shadow-1); transform: translateY(-2px);
}
.ww-grid .ww-face, .ww-picker .ww-face { flex: 1; width: 100%; padding: 22px 14px 8px; gap: 10px; }
.ww-grid .ww-tile:hover .ww-face, .ww-picker .ww-tile:hover .ww-face, .ww-grid .ww-face:focus-visible, .ww-picker .ww-face:focus-visible { transform: none; }
.ww-picker .ww-pick { cursor: pointer; }
.ww-picker .ww-pick[aria-pressed="true"], .ww-picker .ww-tile.is-selected { border-color: var(--accent); }
.ww-name { font-size: 0.82rem; font-weight: 600; color: var(--text-2); text-align: center; }
.ww-grid .ww-info, .ww-picker .ww-info { padding: 0 12px 14px; min-height: 40px; }
.ww-grid .ww-counts, .ww-picker .ww-counts { opacity: 0; transition: opacity 0.2s var(--ease); }
.ww-grid .ww-tile:hover .ww-counts, .ww-grid .ww-tile:focus-within .ww-counts,
.ww-picker .ww-tile:hover .ww-counts, .ww-picker .ww-tile:focus-within .ww-counts { opacity: 1; }
@media (hover: none) { .ww-grid .ww-counts, .ww-picker .ww-counts { opacity: 1; } }

/* ---------- reduced motion: static wrapped grid, no duplicate track ---------- */
@media (prefers-reduced-motion: reduce) {
  .ww-marquee .ww-viewport { display: block; overflow: visible; padding-block: 0 24px; margin-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .ww-marquee .ww-track { animation: none; flex-wrap: wrap; justify-content: center; min-width: 0; gap: 8px clamp(12px, 3vw, 32px); padding-inline: 0; transform: none; }
  .ww-marquee .ww-clone { display: none; }
  .ww-face, .ww-grid .ww-tile, .ww-picker .ww-tile { transition: none; }
  .ww-tile:hover .ww-face { transform: none; }
}

@media (max-width: 520px) {
  :root { --ww-gap: 28px; }
  .ww-grid .ww-track, .ww-picker .ww-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (forced-colors: active) {
  .ww-logo { filter: none; opacity: 1; }
  .ww-wordmark { color: CanvasText; opacity: 1; }
  .ww-grid .ww-tile, .ww-picker .ww-tile { border-color: CanvasText; }
}

/* product name beside a company logo or an icon (marquee only, where no caption shows the name) */
.ww-mark:has(.ww-logo-label) { display: inline-flex; align-items: center; gap: 10px; }
.ww-logo-label { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; white-space: nowrap; color: var(--ww-ink); opacity: var(--ww-op); transition: opacity 0.25s var(--ease); }
.ww-tile:hover .ww-logo-label, .ww-face:focus-visible .ww-logo-label { opacity: var(--ww-hover-op); }

/* Every logo fits its box: never clipped, never wider than the space it gets. The optical size comes from the
   registry's scale token (js/works-with.js), so no per-page height overrides. A logo that has to shrink keeps
   its aspect (height: auto with the width and height attributes as the ratio). */
.ww-mark { max-width: 100%; min-width: 0; }
.ww-stack { min-width: 0; max-width: 100%; }
.ww-logo { max-width: 100%; object-fit: contain; object-position: left center; }
.ww-face .ww-logo, .lp-slot .ww-logo, .pf-logo .ww-logo { object-position: center; }
.ww-face .ww-logo { max-width: calc(100% - 8px); }

/* ---------- design v2 overrides: flat tiles, no lift ---------- */
.ww-tile:hover .ww-face, .ww-face:focus-visible, .ww-face:active, .ww-notify:hover, .ww-notify:active { transform: none; }
.ww-grid .ww-tile:hover, .ww-picker .ww-tile:hover, .ww-grid .ww-tile:focus-within, .ww-picker .ww-tile:focus-within { transform: none; box-shadow: none; }
.ww-grid .ww-tile, .ww-picker .ww-tile { box-shadow: none; border-radius: var(--r-l); }
.ww-notify { border-radius: var(--r-s); }
.ww-chip { border-radius: var(--r-s); }
/* static row (landing fallback): no marquee motion */
.ww-row .ww-track { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.ww-row .ww-info { display: none; }
.ww-label, .ww-chip { letter-spacing: 0.01em; text-transform: none; }

/* ---------- logo stack: monochrome at rest, brand color on hover and focus ----------
   Two copies of the same file sit in one grid cell. Only opacity animates (200 ms), never the filter, so at rest
   and mid-transition nothing looks blurred or half recolored. Dark theme: logos with dark ink get a hue-preserving
   inversion on the color layer so the brand colors stay readable on near-black. */
.ww-stack { display: inline-grid; place-items: center; max-width: 100%; }
.ww-stack > .ww-logo { grid-area: 1 / 1; max-width: 100%; }
.ww-logo.ww-mono { filter: var(--ww-filter); opacity: var(--ww-op); }
.ww-logo.ww-color { filter: none; opacity: 0; }
:root[data-theme="dark"] .ww-dark-ink .ww-logo.ww-color { filter: invert(1) hue-rotate(180deg); }
.ww-tile:hover .ww-logo.ww-mono, .ww-face:focus-visible .ww-logo.ww-mono, :is(.ww-host:hover, .ww-host:focus-visible, .ww-host:focus-within) .ww-logo.ww-mono { opacity: var(--ww-hover-op); }
.ww-tile:hover .ww-color-ok .ww-logo.ww-mono, .ww-face:focus-visible .ww-color-ok .ww-logo.ww-mono, :is(.ww-host:hover, .ww-host:focus-visible, .ww-host:focus-within) .ww-color-ok .ww-logo.ww-mono { opacity: 0; }
.ww-tile:hover .ww-color-ok .ww-logo.ww-color, .ww-face:focus-visible .ww-color-ok .ww-logo.ww-color, :is(.ww-host:hover, .ww-host:focus-visible, .ww-host:focus-within) .ww-color-ok .ww-logo.ww-color { opacity: 1; }
:is(.ww-host:hover, .ww-host:focus-visible, .ww-host:focus-within) .ww-logo-label { opacity: 1; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .ww-logo, .ww-logo-label { transition: none; } }
@media (forced-colors: active) { .ww-logo.ww-color { display: none; } }

/* App only: a square product icon with a filled background (Amazon Connect in the signed-in app). Flattening it to
   one ink would erase the glyph, so the resting layer is grayscale instead. */
.ww-is-icon { gap: 10px; }
.ww-is-icon .ww-logo { border-radius: 6px; height: calc(var(--ww-h, 30px) * 1.2); width: auto; }
.ww-is-icon .ww-logo.ww-mono { filter: grayscale(1) contrast(1.15); }
:root[data-theme="dark"] .ww-is-icon .ww-logo.ww-mono { filter: grayscale(1) brightness(1.25); }