/* One CTA label and navigation icon contract for buttons and text links.
   Keep this publication-owned layer outside the generated design styles. */
:root {
  --cta-font: var(--mono);
  --cta-size: var(--type-ui);
  --cta-weight: var(--font-weight-medium);
  --cta-hover-weight: var(--font-weight-medium);
  --cta-leading: 1.428571;
  --cta-tracking: 0;
  --cta-gap: 8px;
  --cta-icon-size: 14px;
  --cta-icon-offset: 1px;
  --cta-arrow: url("./cta-arrow.svg");
  --cta-arrow-travel: 2px;
  --cta-hover-travel: 0px;
  --cta-hover-duration: 160ms;
  --cta-hover-bg: var(--ui-muted);
  --cta-hover-ink: var(--btn-ink);
  --cta-secondary-bg: transparent;
  --cta-secondary-border: var(--ui-muted);
  --cta-secondary-ink: var(--ui-ink);
  --cta-solid-bg: var(--btn);
  --cta-solid-ink: var(--btn-ink);
  --cta-text-color: var(--ui-muted);
  --cta-text-weight: var(--cta-weight);
}

/* .cta is the opt-in for new actions; the other selectors adapt the existing
   buttons, card labels and isolated download page to the same contract. */
[data-theme] body :is(
  .cta, .btn, .link-arrow, .blog-read, .announce > a,
  .studio-download-docs, .studio-download-sign-in, .studio-download-primary,
  .studio-download-other-platforms, .studio-download-os-row,
  .studio-download-release-meta a, .studio-download-footer a
) {
  display: inline-flex;
  align-items: center;
  gap: var(--cta-gap);
  font-family: var(--cta-font);
  font-size: var(--cta-size);
  font-weight: var(--cta-weight);
  line-height: var(--cta-leading);
  letter-spacing: var(--cta-tracking);

}

body .studio-download-os-row :is(span, small) { font: inherit }

/* The Studio rail keeps its compact geometry and resting surface while
   sharing the same active fill and ink as the larger CTA buttons. */
[data-theme] body .hero-download-latest {
  transition: background-color var(--cta-hover-duration) var(--ease),
              border-color var(--cta-hover-duration) var(--ease),
              color var(--cta-hover-duration) var(--ease);
}
[data-theme] body .hero-download-latest:is(:hover, :focus-visible) {
  background: var(--cta-hover-bg);
  border-color: var(--cta-hover-bg);
  color: var(--cta-hover-ink);
  text-decoration: none;
}
[data-theme] body .hero-download-latest:focus-visible {
  outline: 2px solid var(--ui-ink);
  outline-offset: 2px;
}

/* A card's active state reaches its CTA, including a label rendered inside
   a full-card anchor. Keep type width stable and use fill + arrow motion. */
[data-theme] body :is(
  .cta, .btn, .link-arrow, .blog-read, .announce > a,
  .studio-download-docs, .studio-download-sign-in, .studio-download-primary,
  .studio-download-other-platforms, .studio-download-os-row,
  .studio-download-release-meta a, .studio-download-footer a
):is(:hover, :focus-visible),
[data-theme] body :is(
  .card, .marketing-card-link, .tier, .blog-featured, .blog-card,
  .blog-archive-row, .workflow-template-card,
  .product-related-card, .studio-download-card, .studio-download-os-card,
  .role-row
):is(:hover, :focus-within) {
  --cta-hover-travel: var(--cta-arrow-travel);
  --cta-secondary-bg: var(--cta-hover-bg);
  --cta-secondary-border: var(--cta-hover-bg);
  --cta-secondary-ink: var(--cta-hover-ink);
  --cta-solid-bg: var(--cta-hover-bg);
  --cta-solid-ink: var(--cta-hover-ink);
  --cta-text-color: var(--ui-ink);
  --cta-text-weight: var(--cta-hover-weight);

  /* Keep a filled button's edge on the same hover shade without changing
     any button's resting border or keyboard focus outline. */
  &:is(.btn.solid, .studio-download-primary, .studio-download-sign-in),
  & :is(.btn.solid, .studio-download-primary, .studio-download-sign-in) {
    border-color: var(--cta-hover-bg);
  }
}

/* Footer navigation needs weight feedback on its inverse surface too. */
[data-theme] body .footer .foot-col a:is(:hover, :focus-visible) {
  font-weight: var(--cta-hover-weight);
  text-decoration: none;
}

[data-theme] body :is(.btn.line, .btn.ghost, .studio-download-docs) {
  background: var(--cta-secondary-bg);
  border-color: var(--cta-secondary-border);
  color: var(--cta-secondary-ink);
  transition: background-color var(--cta-hover-duration) var(--ease),
              border-color var(--cta-hover-duration) var(--ease),
              color var(--cta-hover-duration) var(--ease);
}

[data-theme] body :is(
  .link-arrow, .blog-read, .announce > a, .studio-download-other-platforms,
  .studio-download-release-meta a, .studio-download-footer a
) {
  color: var(--cta-text-color);
  font-weight: var(--cta-text-weight);
  transition: color var(--cta-hover-duration) var(--ease);
}
[data-theme] body :is(.btn.solid, .studio-download-primary, .studio-download-sign-in) {
  background: var(--cta-solid-bg);
  color: var(--cta-solid-ink);
  opacity: 1;
  transition: background-color var(--cta-hover-duration) var(--ease),
              border-color var(--cta-hover-duration) var(--ease);
}
[data-theme] body :is(
  .cta, .btn, .link-arrow, .blog-read, .announce > a,
  .studio-download-docs, .studio-download-sign-in, .studio-download-primary,
  .studio-download-other-platforms, .studio-download-os-row,
  .studio-download-release-meta a, .studio-download-footer a
):is(:hover, :focus-visible) { text-decoration: none }

/* Copy cards use a fill change while retaining their functional icon. */
[data-theme] body .card:is(:hover, :focus-within) .mk-copy,
[data-theme] body .studio-download-card:is(:hover, :focus-within) .studio-download-command {
  background: var(--s1);
  color: var(--ui-ink);
}

/* Long card labels wrap at phone widths without reducing the shared type. */
@media (max-width: 560px) {
  [data-theme] body .card .btn.line {
    height: auto;
    min-height: var(--control-h-sm);
    max-width: 100%;
    padding-block: var(--sp1);
    white-space: normal;
  }
}

/* Keep spacing stable on hover, including native whole-card link states. */
[data-theme] body :is(
  .cta, .btn, .link-arrow, .blog-read, .announce > a
):is(:hover, :focus-visible),
[data-theme] body :is(a, .blog-featured, .blog-card):is(:hover, :focus-within) :is(.link-arrow, .blog-read) {
  gap: var(--cta-gap);
}

/* Action icons (download, copy, newspaper) retain their meaning and shape.
   Navigation arrows below share one mask. Both align to the mono text line. */
[data-theme] body :is(
  .cta, .btn, .link-arrow, .announce > a, .studio-download-docs,
  .studio-download-primary, .studio-download-os-row,
  .studio-download-release-meta a
) > svg,
body .cta-arrow,
body .blog-read > [aria-hidden="true"] {
  display: inline-block;
  width: var(--cta-icon-size);
  height: var(--cta-icon-size);
  flex: 0 0 var(--cta-icon-size);
  align-self: center;
  vertical-align: middle;
  opacity: 1;
  transform: translateY(var(--cta-icon-offset)) rotate(var(--cta-icon-angle, 0deg));
  transition: translate var(--cta-hover-duration) var(--ease);
}

/* Adapt only recognized navigation glyphs from the source. No SVG content or
   link semantics are mutated, so design re-lifts retain the shared artwork. */
body :is(
  .cta, .btn, .link-arrow, .announce > a, .studio-download-docs,
  .studio-download-primary, .studio-download-release-meta a
) > svg:has(> path:is(
  [d="M5 12h14M13 6l6 6-6 6"],
  [d="M7 17L17 7M9 7h8v8"],
  [d="m9 18 6-6-6-6"],
  [d="M7 17 17 7"]
)),
body .cta-arrow,
body .blog-read > [aria-hidden="true"] {
  background: currentColor;
  -webkit-mask: var(--cta-arrow) center / contain no-repeat;
  mask: var(--cta-arrow) center / contain no-repeat;
  translate: var(--cta-hover-travel) var(--cta-hover-travel-y, 0px);
  transition: translate var(--cta-hover-duration) var(--ease);
}

body :is(
  .cta, .btn, .link-arrow, .announce > a, .studio-download-docs,
  .studio-download-primary, .studio-download-release-meta a
) > svg:has(> path:is(
  [d="M5 12h14M13 6l6 6-6 6"],
  [d="M7 17L17 7M9 7h8v8"],
  [d="m9 18 6-6-6-6"],
  [d="M7 17 17 7"]
)) > * { visibility: hidden }

body :is(.cta, .btn, .link-arrow, .studio-download-docs) > svg:has(> path:is(
  [d="M7 17L17 7M9 7h8v8"], [d="M7 17 17 7"]
)),
body .cta-arrow[data-direction="external"] {
  --cta-icon-angle: -45deg;
  --cta-hover-travel-y: calc(-1 * var(--cta-hover-travel));
}

/* Blog cards formerly used a font-dependent Unicode arrow. */
body .blog-read > [aria-hidden="true"] { font-size: 0 }

@media (prefers-reduced-motion: reduce) {
  :root { --cta-arrow-travel: 0px; --cta-hover-duration: 0ms }
}