/* "by WebCorp" in the footer of studio sites (WebCorp Core) and its preview in WebCorpHUB.
   Source: platform/shared/credit — copied into both plugins by build.py; do not edit the copies. */
.wcb {
  --wcb-ink: currentColor;
  --wcb-muted: color-mix(in srgb, currentColor 58%, transparent);
  --wcb-line: color-mix(in srgb, currentColor 14%, transparent);
  --wcb-fill: color-mix(in srgb, currentColor 7%, transparent);
  --wcb-blue: #5b8cff;
  --wcb-card-bg: linear-gradient(150deg, rgba(26, 31, 41, .97), rgba(12, 15, 20, .97));
  --wcb-card-ink: #e9eef6;
  --wcb-card-muted: #8a94a6;
  --wcb-card-line: rgba(255, 255, 255, .1);
  --wcb-card-cell: rgba(127, 140, 170, .08);
  --wcb-card-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none !important;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.wcb[data-tone="light"] {
  --wcb-blue: #2e63f0;
  --wcb-card-bg: linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(246, 247, 250, .98));
  --wcb-card-ink: #1b1f27;
  --wcb-card-muted: #6b7280;
  --wcb-card-line: rgba(15, 23, 42, .1);
  --wcb-card-cell: rgba(15, 23, 42, .045);
  --wcb-card-shadow: 0 30px 70px -24px rgba(15, 23, 42, .35);
}
a.wcb.wcb, a.wcb.wcb:hover, a.wcb.wcb:focus, a.wcb.wcb:visited { color: inherit; text-decoration: none; } /* the footer's text colour, not its link colour */
.wcb:focus { outline: none; }
.wcb:focus-visible { outline: 2px solid var(--wcb-blue); outline-offset: 4px; border-radius: 999px; }
.wcb *, .wcb *::before, .wcb *::after { box-sizing: border-box; }
.wcb__by { color: var(--wcb-muted); font-weight: 500; }
.wcb__name { font-weight: 600; letter-spacing: -.01em; }
.wcb__logo { position: relative; flex: none; width: 18px; height: 19px; }
.wcb__logo svg, .wcb__logo canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wcb__logo canvas { opacity: 0; transition: opacity .35s; }
.wcb__logo svg { transition: opacity .35s; }
.wcb.is-on .wcb__logo canvas { opacity: 1; }
.wcb.is-on .wcb__logo svg { opacity: 0; }
.wcb__fx { position: absolute; pointer-events: none; }
.wcb__fx canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
.wcb.is-on .wcb__fx canvas { opacity: 1; }

/* Button 1: glass pill "by [mark] WebCorp". */
.wcb--pill { padding: 9px 14px 9px 12px; border: 1px solid var(--wcb-line); border-radius: 999px; background: var(--wcb-fill); transition: background-color .3s, border-color .3s; }
.wcb--pill.is-on { border-color: transparent; }
.wcb--pill .wcb__ring { inset: -10px; }

/* Button 2: round mark; "by WebCorp" slides out on hover. */
.wcb--mark { justify-content: center; width: 44px; height: 44px; gap: 0; border: 1px solid var(--wcb-line); border-radius: 50%; background: var(--wcb-fill); }
.wcb--mark:focus-visible { border-radius: 50%; }
.wcb--mark .wcb__by, .wcb--mark .wcb__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* still the link's text */
.wcb--mark .wcb__logo { width: 20px; height: 21px; }
.wcb--mark .wcb__orbit { inset: -14px; }
.wcb__tag { position: absolute; top: 50%; right: calc(100% + 10px); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(6px, -50%); transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.wcb__tag.is-right { right: auto; left: calc(100% + 10px); transform: translate(-6px, -50%); }
.wcb.is-on .wcb__tag { opacity: 1; transform: translate(0, -50%); }

/* The card with the slogan and the services. */
.wcb-card {
  position: absolute;
  z-index: 50;
  bottom: calc(100% + var(--wcb-gap, 12px));
  left: var(--wcb-left, 0);
  display: block;
  width: var(--wcb-w, 304px);
  padding: 13px 14px 11px;
  border: 1px solid var(--wcb-card-line);
  border-radius: 15px;
  background: var(--wcb-card-bg);
  box-shadow: var(--wcb-card-shadow);
  color: var(--wcb-card-ink);
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.98);
  transform-origin: 50% 100%;
  transition: opacity .3s cubic-bezier(.2, .8, .2, 1), transform .4s cubic-bezier(.2, .8, .2, 1), visibility .3s;
  pointer-events: none;
}
.wcb.is-on .wcb-card { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.wcb-card::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--wcb-gap, 12px) + 2px); } /* the pointer crosses the gap */
.wcb-card > * { position: relative; }
.wcb-card > .wcb__fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.wcb-card__slogan { display: block; margin: 1px 0 2px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.wcb-card__meta { display: block; margin: 0 0 9px; color: var(--wcb-card-muted); font-size: 11px; }
.wcb-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wcb-svc__i { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; padding: 6px 7px; border-radius: 9px; background: var(--wcb-card-cell); }
.wcb-svc svg { flex: none; width: 14px; height: 14px; color: var(--wcb-blue); }
.wcb-svc b { display: block; overflow: hidden; font-size: 11.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.wcb-svc i { display: none; font-style: normal; }
.wcb-card--list .wcb-svc { grid-template-columns: 1fr; gap: 0; }
.wcb-card--list .wcb-svc__i { padding: 5px 2px; border-bottom: 1px solid var(--wcb-card-line); border-radius: 0; background: none; }
.wcb-card--list .wcb-svc__i:last-child { border-bottom: 0; }
.wcb-card--list .wcb-svc b { display: inline; }
.wcb-card--list .wcb-svc i { display: inline; margin-left: 5px; color: var(--wcb-card-muted); font-size: 11px; white-space: nowrap; }
.wcb-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; color: var(--wcb-card-muted); font-size: 11px; white-space: nowrap; }
.wcb-card__go { color: var(--wcb-blue); font-weight: 600; }
.wcb__link { bottom: 100%; height: var(--wcb-gap, 12px); left: var(--wcb-left, 0); width: var(--wcb-w, 304px); }

/* Footer row when the theme has no place for the button. */
.wcb-row { display: flex; justify-content: center; padding: 18px 16px 22px; }

@media (prefers-reduced-motion: reduce) {
  .wcb-card, .wcb__tag { transition: opacity .2s, visibility .2s; transform: none; }
}