/* Values from the live site: .tt-label (0.8rem bold), Label "Platform
   Gradient", .tt-batch (outline badge, 0.6rem).

   Gradients: Product is the platform gradient (dark backgrounds #6085FF
   #75ACFF #A46BFF, light backgrounds #033EFF #0060F0 #5900E8). Green and Blue
   are derived the same way: three stops, a lighter set for dark backgrounds
   and a deeper one for light backgrounds. The set is picked with the --tt-dark
   space toggle (see Button.module.css): --_d-g only exists when dark. */
.cjQoqVs3VqSYANFvJFBU {
  --_g: none;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  /* As wide as its text in any parent (grid, flex, block). */
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  /* Variable font: 600 reads as bold enough and matches the headings. */
  font-weight: 600;
  /* Same stylistic sets as the site's headings and buttons. */
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
}

.c02wqn5j0_pCupzmPUjp {
  display: block;
}

/* ---------- Size and case ----------
   Text and badges step differently: text labels grow more towards the top,
   badges stay compact.
   Text:  X-Small 0.7, Small 0.8 (.tt-label), Medium 0.9, Large 1.1, X-Large 1.3rem.
   Badge: X-Small 0.5, Small 0.55, Medium 0.6 (.tt-batch), Large 0.7
          (.tt-batch.large), X-Large 0.8rem. */

.cjQoqVs3VqSYANFvJFBU[data-size="x-small"] { font-size: 0.7rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="small"] { font-size: 0.8rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="large"] { font-size: 1.1rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="x-large"] { font-size: 1.3rem; }

.cjQoqVs3VqSYANFvJFBU[data-uppercase] {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Blend ----------
   Lets the label mix with what's behind it, e.g. a shader: Plus Lighter
   glows on dark, Multiply sinks into light. Auto picks by the --tt-dark
   toggle, like the Quote. */
.cjQoqVs3VqSYANFvJFBU[data-blend="auto"] {
  --_d-blend: var(--tt-dark) plus-lighter;

  mix-blend-mode: var(--_d-blend, multiply);
}

.cjQoqVs3VqSYANFvJFBU[data-blend="plus-lighter"] { mix-blend-mode: plus-lighter; }
.cjQoqVs3VqSYANFvJFBU[data-blend="multiply"] { mix-blend-mode: multiply; }

/* ---------- Colors ---------- */

/* Muted: the text color around it, toned down like the Heading Group subline. */
.cjQoqVs3VqSYANFvJFBU[data-muted] {
  color: color-mix(in srgb, currentColor var(--tt-text-muted-opacity, 60%), transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-color="product"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #6085ff 10%, #75acff 38%, #a46bff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #033eff 10%, #0060f0 38%, #5900e8 90%));
}

/* Stays within greens: a fresh green, a lighter mint, a cooler green. */
.cjQoqVs3VqSYANFvJFBU[data-color="green"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #3ddc84 10%, #86efac 45%, #2bc48a 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #00873e 10%, #12a150 45%, #047857 90%));
}

.cjQoqVs3VqSYANFvJFBU[data-color="blue"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #4c9bff 10%, #7fd0ff 45%, #6b7cff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #0055e5 10%, #0089d1 45%, #3442e0 90%));
}

/* Stays within the brand purples (--tt-color-brand #6f00ff, brand-soft #8b33ff). */
.cjQoqVs3VqSYANFvJFBU[data-color="purple"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #a46bff 10%, #c39bff 45%, #8b33ff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #5900e8 10%, #8b33ff 45%, #6f00ff 90%));
}

/* Text in color: the gradient fills the letters. */
.cjQoqVs3VqSYANFvJFBU[data-color] [data-part="text"] {
  background-image: var(--_g);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Badges ---------- */

/* Padding in em, so every size keeps the same proportions. The text is
   nudged down by --_shift (less padding below than above) because the font's
   line box sits a little high; capitals have no descenders and need a bit
   more. The total height stays the same either way. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge"],
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"] {
  --_shift: 0.04em;

  padding: calc(0.3em + var(--_shift)) 0.55em calc(0.3em - var(--_shift));
  border-radius: 0.6em;
  font-size: 0.6rem;
  line-height: 1.1;
  font-weight: 600;
}

.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="x-small"] { font-size: 0.5rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="small"] { font-size: 0.55rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="large"] { font-size: 0.7rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="x-large"] { font-size: 0.8rem; }

.cjQoqVs3VqSYANFvJFBU[data-uppercase]:is([data-style="badge"], [data-style="badge-filled"]) {
  --_shift: 0.06em;
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge"]:not([data-color]) {
  border: 1px solid color-mix(in srgb, currentColor 80%, transparent);
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"]:not([data-color]) {
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-muted]:is([data-style="badge"], [data-style="badge-filled"]) {
  color: color-mix(in srgb, currentColor var(--tt-text-muted-opacity, 60%), transparent);
}

/* Colored badge: a 1px gradient border, drawn on a layer whose middle is
   cut out with a mask, so the gradient can also run through the border. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge"][data-color]::before,
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background-image: var(--_g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Filled: a light tint of the gradient behind the text. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--_g);
  opacity: 0.14;
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::before {
  opacity: 0.5;
}

/* ---------- Animated ----------
   The gradient is three times as wide as the label and slides back and
   forth, in the text and the border alike. */

.cjQoqVs3VqSYANFvJFBU[data-animated] [data-part="text"],
.cjQoqVs3VqSYANFvJFBU[data-animated]::before,
.cjQoqVs3VqSYANFvJFBU[data-animated]::after {
  background-size: 300% 100%;
  animation: Tl0mQjlzMCz5aiuOUZw4 4s ease-in-out infinite alternate;
}

@keyframes Tl0mQjlzMCz5aiuOUZw4 {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cjQoqVs3VqSYANFvJFBU[data-animated] [data-part="text"],
  .cjQoqVs3VqSYANFvJFBU[data-animated]::before,
  .cjQoqVs3VqSYANFvJFBU[data-animated]::after {
    animation: none;
  }
}

/* One row: icon, name and text, then a mark per side. The Ownership List
   sets the variables read here (see OwnershipItem.tsx). Marks only animate
   opacity and transform.

   Two layouts, switched by the --_l-* variables:
   - Columns: the marks sit in two columns on the right, under the list's
     side names.
   - Stacked: the marks move under the text and share one spot (one fades
     out, the other in); in Compare they stand side by side. Used on mobile
     and for the list's Checklist appearance. */
.Y9GB7N76X8HEjuLqzERm {
  --_on: var(--tt-ownership-on, 0);
  --_col: var(--tt-ownership-col, 7rem);
  /* A short wave down the list, so all rows read as one movement. */
  --_delay: calc(var(--tt-ownership-index, 0) * 40ms);
  --_ease: cubic-bezier(0.65, 0, 0.35, 1);
  /* Compare (set by a list without motion): both marks show at once. */
  --_compare: var(--tt-ownership-compare, 0);
  --_shared: 0;
  /* How much of the "your team" mark stays once Tiptap takes over. */
  --_rest: var(--_compare);
  /* Checklist: the name is struck through once Tiptap takes it over. */
  --_strike: 0;
  --_line: color-mix(in srgb, currentColor 12%, transparent);
  /* Check color: brand on light, the softer brand on dark (--tt-dark toggle,
     see Button.module.css). */
  --_d-check: var(--tt-dark) var(--tt-color-brand-soft, #8b33ff);
  --_check: var(--_d-check, var(--tt-color-brand, #6f00ff));

  /* Layout: Columns */
  --_l-areas: "icon main marks";
  --_l-columns: auto minmax(0, 1fr) calc(var(--_col) * 2);
  --_l-align: center;
  --_l-marks: 1fr 1fr;
  --_l-marks-justify: center;
  --_l-ours-column: 2;
  --_l-ours-divider: 0;
  --_l-owner: none;
  --_l-ours-shift: 0rem;
  --_l-ours-shrink: 0.4;
  --_l-shared-rest: 1;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--_l-columns);
  grid-template-areas: var(--_l-areas);
  align-items: var(--_l-align);
  column-gap: var(--tt-space-card-sm, 1rem);
  row-gap: var(--tt-space-card-sm, 0.75rem);
  padding-block: var(--tt-space-card-sm, 1rem);
  border-top: 1px solid var(--_line);
}

.Y9GB7N76X8HEjuLqzERm *,
.Y9GB7N76X8HEjuLqzERm *::before,
.Y9GB7N76X8HEjuLqzERm *::after {
  box-sizing: border-box;
}

.xxt7F8JiMu_bSbb4P1Pk {
  display: block;
}

/* Shared: both sides carry it, so your team's mark stays (unless both marks
   share one spot) and the name is never struck through. */
.Y9GB7N76X8HEjuLqzERm[data-tiptap="shared"] {
  --_shared: 1;
  --_rest: var(--_l-shared-rest);
}

/* ---------- Layout: Stacked ----------
   The same values twice: CSS can't share one block between a media query
   and a container query. */
@media (max-width: 767px) {
  .Y9GB7N76X8HEjuLqzERm {
    --_l-areas: "icon main" ". marks";
    --_l-columns: auto minmax(0, 1fr);
    --_l-align: start;
    --_l-marks: auto;
    --_l-marks-justify: start;
    --_l-ours-column: calc(1 + var(--_compare));
    --_l-ours-divider: var(--_compare);
    --_l-owner: block;
    --_l-ours-shift: -1rem;
    --_l-ours-shrink: 0;
    --_l-shared-rest: var(--_compare);
  }
}

/* The list's Checklist appearance (style query on the inherited variable). */
@container style(--tt-ownership-appearance: checklist) {
  .Y9GB7N76X8HEjuLqzERm {
    --_l-areas: "icon main" ". marks";
    --_l-columns: auto minmax(0, 1fr);
    --_l-align: start;
    --_l-marks: auto;
    --_l-marks-justify: start;
    --_l-ours-column: calc(1 + var(--_compare));
    --_l-ours-divider: var(--_compare);
    --_l-owner: block;
    --_l-ours-shift: -1rem;
    --_l-ours-shrink: 0;
    --_l-shared-rest: var(--_compare);
    --_strike: 1;
  }
}

/* ---------- Icon ---------- */

.Y9GB7N76X8HEjuLqzERm > [data-part="icon"] {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--tt-radius-xs, 0.5rem);
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.Y9GB7N76X8HEjuLqzERm > [data-part="icon"] img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

/* ---------- Name and text ---------- */

.Y9GB7N76X8HEjuLqzERm > [data-part="main"] {
  grid-area: main;
  /* Checklist: name and text fade a little once Tiptap takes them over. */
  opacity: calc(1 - var(--_on) * var(--_strike) * (1 - var(--_shared)) * 0.35);
  transition: opacity 0.6s var(--_ease) var(--_delay);
}

/* Direct path only: the Label in the mark has a [data-part="text"] too. */
.Y9GB7N76X8HEjuLqzERm > [data-part="main"] > [data-part="name"] {
  position: relative;
  width: fit-content;
  margin: 0;
  color: var(--tt-heading-color);
  font-size: var(--tt-heading-sm, 1rem);
  line-height: var(--tt-heading-sm-lh, 1.2);
  font-weight: var(--tt-heading-weight, 600);
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
}

/* The strike line draws from left to right. */
.Y9GB7N76X8HEjuLqzERm > [data-part="main"] > [data-part="name"]::after {
  content: "";
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(calc(var(--_on) * var(--_strike) * (1 - var(--_shared))));
  transform-origin: left center;
  transition: transform 0.6s var(--_ease) var(--_delay);
}

.Y9GB7N76X8HEjuLqzERm > [data-part="main"] > [data-part="text"] {
  margin: 0.25rem 0 0;
  color: var(--tt-text-color);
  font-size: var(--tt-text-xs, 0.9rem);
  line-height: var(--tt-text-xs-lh, 1.4);
}

/* ---------- Marks ---------- */

.Y9GB7N76X8HEjuLqzERm > [data-part="marks"] {
  grid-area: marks;
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--_l-marks);
  align-items: center;
  justify-items: var(--_l-marks-justify);
  row-gap: 0.375rem;
}

.Y9GB7N76X8HEjuLqzERm [data-part="mark"] {
  display: inline-flex;
  grid-row: 1;
  grid-column: 1;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  transition:
    opacity 0.6s var(--_ease) var(--_delay),
    transform 0.6s var(--_ease) var(--_delay);
}

.Y9GB7N76X8HEjuLqzERm [data-part="mark"][data-side="yours"] {
  opacity: calc(1 - var(--_on) * (1 - var(--_rest)));
  transform: translateX(calc(var(--_on) * (1 - var(--_rest)) * 1rem));
}

/* Compare in Stacked: Tiptap's mark in a second column, after a divider. */
.Y9GB7N76X8HEjuLqzERm [data-part="mark"][data-side="ours"] {
  grid-column: var(--_l-ours-column);
  margin-left: calc(var(--_l-ours-divider) * 0.75rem);
  padding-left: calc(var(--_l-ours-divider) * 0.75rem);
  border-left: calc(var(--_l-ours-divider) * 1px) solid var(--_line);
  opacity: var(--_on);
  transform: translateX(calc((1 - var(--_on)) * var(--_l-ours-shift))) scale(calc(1 - (1 - var(--_on)) * var(--_l-ours-shrink)));
}

.Y9GB7N76X8HEjuLqzERm [data-part="dot"] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.Y9GB7N76X8HEjuLqzERm [data-part="check"] {
  display: grid;
  place-items: center;
  /* As high as the badge next to it. */
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--_check);
  color: var(--white-a-100, #fff);
}

.Y9GB7N76X8HEjuLqzERm [data-part="check"] svg {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
}

/* Shared: Tiptap carries part of it, so the check is an outline. */
.Y9GB7N76X8HEjuLqzERm[data-tiptap="shared"] [data-part="check"] {
  border: 1.5px solid var(--_check);
  background: transparent;
  color: var(--_check);
}

/* Side names only in Stacked, where there is no header row. At the badge's
   size, so the marks read as one line. */
.Y9GB7N76X8HEjuLqzERm [data-part="owner"] {
  display: var(--_l-owner);
  font-size: 0.7rem;
  font-weight: 600;
}

.Y9GB7N76X8HEjuLqzERm [data-side="yours"] > [data-part="owner"]::before { content: var(--tt-ownership-yours, "Your team"); }
.Y9GB7N76X8HEjuLqzERm [data-side="ours"] > [data-part="owner"]::before { content: var(--tt-ownership-ours, "Tiptap"); }

/* Too narrow for Compare side by side: Tiptap's mark goes below. A Shared
   row is wider (its extra badge), so it stacks earlier. Widths fit the
   default texts. Only Compare in Stacked has a divider, so the other layouts
   keep their column. */
@container (max-width: 15.5rem) {
  .Y9GB7N76X8HEjuLqzERm[data-tiptap="shared"] [data-part="mark"][data-side="ours"] {
    grid-column: calc(var(--_l-ours-column) - var(--_l-ours-divider));
    grid-row: calc(1 + var(--_l-ours-divider));
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}

@container (max-width: 12.5rem) {
  .Y9GB7N76X8HEjuLqzERm [data-part="mark"][data-side="ours"] {
    grid-column: calc(var(--_l-ours-column) - var(--_l-ours-divider));
    grid-row: calc(1 + var(--_l-ours-divider));
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Y9GB7N76X8HEjuLqzERm [data-part="mark"],
  .Y9GB7N76X8HEjuLqzERm > [data-part="main"],
  .Y9GB7N76X8HEjuLqzERm > [data-part="main"] > [data-part="name"]::after {
    transition: none;
  }
}